- From: Ian Hickson via cvs-syncmail <cvsmail@w3.org>
- Date: Fri, 08 Jan 2010 09:22:06 +0000
- To: public-html-commits@w3.org
Update of /sources/public/html5/2dcontext
In directory hutz:/tmp/cvs-serv19648
Modified Files:
Overview.html
Log Message:
split out communications section (whatwg r4548)
Index: Overview.html
===================================================================
RCS file: /sources/public/html5/2dcontext/Overview.html,v
retrieving revision 1.4
retrieving revision 1.5
diff -u -d -r1.4 -r1.5
--- Overview.html 8 Jan 2010 08:29:06 -0000 1.4
+++ Overview.html 8 Jan 2010 09:22:04 -0000 1.5
@@ -378,27 +378,26 @@
<!--begin-toc-->
<ol class="toc">
<li><a href="#conformance-requirements"><span class="secno">1 </span>Conformance requirements</a></li>
- <li><a href="#idl"><span class="secno">2 </span>IDL</a></li>
- <li><a href="#the-canvas-state"><span class="secno">3 </span>The canvas state</a></li>
- <li><a href="#transformations"><span class="secno">4 </span>Transformations</a></li>
- <li><a href="#compositing"><span class="secno">5 </span>Compositing</a></li>
- <li><a href="#colors-and-styles"><span class="secno">6 </span>Colors and styles</a></li>
- <li><a href="#line-styles"><span class="secno">7 </span>Line styles</a></li>
- <li><a href="#shadows"><span class="secno">8 </span>Shadows</a></li>
- <li><a href="#simple-shapes-rectangles"><span class="secno">9 </span>Simple shapes (rectangles)</a></li>
- <li><a href="#complex-shapes-paths"><span class="secno">10 </span>Complex shapes (paths)</a></li>
- <li><a href="#focus-management"><span class="secno">11 </span>Focus management</a></li>
- <li><a href="#text"><span class="secno">12 </span>Text</a></li>
- <li><a href="#images"><span class="secno">13 </span>Images</a></li>
- <li><a href="#pixel-manipulation"><span class="secno">14 </span>Pixel manipulation</a></li>
- <li><a href="#drawing-model"><span class="secno">15 </span>Drawing model</a></li>
- <li><a href="#examples"><span class="secno">16 </span>Examples</a></li>
+ <li><a href="#the-canvas-state"><span class="secno">2 </span>The canvas state</a></li>
+ <li><a href="#transformations"><span class="secno">3 </span>Transformations</a></li>
+ <li><a href="#compositing"><span class="secno">4 </span>Compositing</a></li>
+ <li><a href="#colors-and-styles"><span class="secno">5 </span>Colors and styles</a></li>
+ <li><a href="#line-styles"><span class="secno">6 </span>Line styles</a></li>
+ <li><a href="#shadows"><span class="secno">7 </span>Shadows</a></li>
+ <li><a href="#simple-shapes-rectangles"><span class="secno">8 </span>Simple shapes (rectangles)</a></li>
+ <li><a href="#complex-shapes-paths"><span class="secno">9 </span>Complex shapes (paths)</a></li>
+ <li><a href="#focus-management"><span class="secno">10 </span>Focus management</a></li>
+ <li><a href="#text"><span class="secno">11 </span>Text</a></li>
+ <li><a href="#images"><span class="secno">12 </span>Images</a></li>
+ <li><a href="#pixel-manipulation"><span class="secno">13 </span>Pixel manipulation</a></li>
+ <li><a href="#drawing-model"><span class="secno">14 </span>Drawing model</a></li>
+ <li><a href="#examples"><span class="secno">15 </span>Examples</a></li>
<li><a class="no-num" href="#references">References</a></li>
<li><a class="no-num" href="#acknowledgements">Acknowledgements</a></ol>
<!--end-toc--><hr><h2 id="conformance-requirements"><span class="secno">1 </span>Conformance requirements</h2><p>This specification is an HTML specification. All the conformance
requirements, conformance classes, definitions, dependencies,
terminology, and typographical conventions described in the HTML5
- Core and Vocabulary specification apply to this specification. <a href="#refsHTML5CORE">[HTML5CORE]</a><h2 id="idl"><span class="secno">2 </span>IDL</h2><div class="impl">
+ Core and Vocabulary specification apply to this specification. <a href="#refsHTML5CORE">[HTML5CORE]</a><div class="impl">
<p>When the <code title="dom-canvas-getContext">getContext()</code>
@@ -585,7 +584,7 @@
computed value of the <code title="">currentColor</code> keyword is
fully opaque black. <a href="#refsCSSCOLOR">[CSSCOLOR]</a></p>
- </div><h2 id="the-canvas-state"><span class="secno">3 </span>The canvas state</h2><p>Each context maintains a stack of drawing states. <dfn id="drawing-state" title="drawing state">Drawing states</dfn> consist of:<ul class="brief"><li>The current <a href="#transformations" title="dom-context-2d-transformation">transformation matrix</a>.</li>
+ </div><h2 id="the-canvas-state"><span class="secno">2 </span>The canvas state</h2><p>Each context maintains a stack of drawing states. <dfn id="drawing-state" title="drawing state">Drawing states</dfn> consist of:<ul class="brief"><li>The current <a href="#transformations" title="dom-context-2d-transformation">transformation matrix</a>.</li>
<li>The current <a href="#clipping-region">clipping region</a>.</li>
<li>The current values of the following attributes: <code title="dom-context-2d-strokeStyle"><a href="#dom-context-2d-strokestyle">strokeStyle</a></code>, <code title="dom-context-2d-fillStyle"><a href="#dom-context-2d-fillstyle">fillStyle</a></code>, <code title="dom-context-2d-globalAlpha"><a href="#dom-context-2d-globalalpha">globalAlpha</a></code>, <code title="dom-context-2d-lineWidth"><a href="#dom-context-2d-linewidth">lineWidth</a></code>, <code title="dom-context-2d-lineCap"><a href="#dom-context-2d-linecap">lineCap</a></code>, <code title="dom-context-2d-lineJoin"><a href="#dom-context-2d-linejoin">lineJoin</a></code>, <code title="dom-context-2d-miterLimit"><a href="#dom-context-2d-miterlimit">miterLimit</a></code>, <code title="dom-context-2d-shadowOffsetX"><a href="#dom-context-2d-shadowoffsetx">shadowOffsetX</a></code>, <code title="dom-context-2d-shadowOffsetY"><a href="#dom-context-2d-shadowoffsety">shadowOffsetY</a></code>, <code title="dom-context-2d-shadowBlur"><a href="#dom-context-2-shadowblur">shadowBlur</a></code>, <code title="dom-context-2d-shadowColor"><a href="#dom-context-2d-shadowcolor">shadowColor</a></code>, <code title="dom-context-2d-globalCompositeOperation"><a href="#dom-context-2d-globalcompositeoperation">globalCompositeOperation</a></code>, <code title="dom-context-2d-font"><a href="#dom-context-2d-font">font</a></code>, <code title="dom-context-2d-textAlign"><a href="#dom-context-2d-textalign">textAlign</a></code>, <code title="dom-context-2d-textBaseline"><a href="#dom-context-2d-textbaseline">textBaseline</a></code>.</li>
</ul><p class="note">The current path and the current bitmap are not part
@@ -636,7 +635,7 @@
> But how would it interact with normal calls to ctx.restore()?
-->
- </div><h2 id="transformations"><span class="secno">4 </span><dfn title="dom-context-2d-transformation">Transformations</dfn></h2><p>The transformation matrix is applied to coordinates when creating
+ </div><h2 id="transformations"><span class="secno">3 </span><dfn title="dom-context-2d-transformation">Transformations</dfn></h2><p>The transformation matrix is applied to coordinates when creating
shapes and paths.</p><!-- conformance criteria for actual drawing
are described in the various sections below --><div class="impl">
@@ -730,7 +729,7 @@
transform to the identity matrix, and then invoke the <code><a href="#dom-context-2d-transform" title="dom-context-2d-transform">transform</a>(<var title="">m11</var>, <var title="">m12</var>, <var title="">m21</var>, <var title="">m22</var>, <var title="">dx</var>,
<var title="">dy</var>)</code> method with the same arguments.</p>
- </div><h2 id="compositing"><span class="secno">5 </span>Compositing</h2><dl class="domintro"><dt><var title="">context</var> . <code title="dom-context-2d-globalAlpha"><a href="#dom-context-2d-globalalpha">globalAlpha</a></code> [ = <var title="">value</var> ]</dt>
+ </div><h2 id="compositing"><span class="secno">4 </span>Compositing</h2><dl class="domintro"><dt><var title="">context</var> . <code title="dom-context-2d-globalAlpha"><a href="#dom-context-2d-globalalpha">globalAlpha</a></code> [ = <var title="">value</var> ]</dt>
<dd>
@@ -879,7 +878,7 @@
attribute must initially have the value
<code>source-over</code>.</p>
- </div><h2 id="colors-and-styles"><span class="secno">6 </span>Colors and styles</h2><dl class="domintro"><dt><var title="">context</var> . <code title="dom-context-2d-strokeStyle"><a href="#dom-context-2d-strokestyle">strokeStyle</a></code> [ = <var title="">value</var> ]</dt>
+ </div><h2 id="colors-and-styles"><span class="secno">5 </span>Colors and styles</h2><dl class="domintro"><dt><var title="">context</var> . <code title="dom-context-2d-strokeStyle"><a href="#dom-context-2d-strokestyle">strokeStyle</a></code> [ = <var title="">value</var> ]</dt>
<dd>
@@ -1227,7 +1226,7 @@
canvas then using that canvas as the pattern.
-->
- </div><h2 id="line-styles"><span class="secno">7 </span>Line styles</h2><dl class="domintro"><dt><var title="">context</var> . <code title="dom-context-2d-lineWidth"><a href="#dom-context-2d-linewidth">lineWidth</a></code> [ = <var title="">value</var> ]</dt>
+ </div><h2 id="line-styles"><span class="secno">6 </span>Line styles</h2><dl class="domintro"><dt><var title="">context</var> . <code title="dom-context-2d-lineWidth"><a href="#dom-context-2d-linewidth">lineWidth</a></code> [ = <var title="">value</var> ]</dt>
<dd>
@@ -1394,7 +1393,7 @@
> allowing whatever behavior the graphics library has.)
-->
- </div><h2 id="shadows"><span class="secno">8 </span><dfn>Shadows</dfn></h2><p>All drawing operations are affected by the four global shadow
+ </div><h2 id="shadows"><span class="secno">7 </span><dfn>Shadows</dfn></h2><p>All drawing operations are affected by the four global shadow
attributes.<dl class="domintro"><dt><var title="">context</var> . <code title="dom-context-2d-shadowColor"><a href="#dom-context-2d-shadowcolor">shadowColor</a></code> [ = <var title="">value</var> ]</dt>
<dd>
@@ -1520,7 +1519,7 @@
rendered as part of the drawing model described below.</p> </li>
</ol></div><p>If the current composition operation is <code title="gcop-copy"><a href="#gcop-copy">copy</a></code>, shadows effectively won't render
- (since the shape will overwrite the shadow).<h2 id="simple-shapes-rectangles"><span class="secno">9 </span>Simple shapes (rectangles)</h2><p>There are three methods that immediately draw rectangles to the
+ (since the shape will overwrite the shadow).<h2 id="simple-shapes-rectangles"><span class="secno">8 </span>Simple shapes (rectangles)</h2><p>There are three methods that immediately draw rectangles to the
bitmap. They each take four arguments; the first two give the <var title="">x</var> and <var title="">y</var> coordinates of the top
left of the rectangle, and the second two give the width <var title="">w</var> and height <var title="">h</var> of the rectangle,
respectively.<div class="impl">
@@ -1581,7 +1580,7 @@
zero, then the method will draw a line instead (the path for the
outline is just a straight line along the non-zero dimension).</p>
- </div><h2 id="complex-shapes-paths"><span class="secno">10 </span>Complex shapes (paths)</h2><p>The context always has a current path. There is only one current
+ </div><h2 id="complex-shapes-paths"><span class="secno">9 </span>Complex shapes (paths)</h2><p>The context always has a current path. There is only one current
path, it is not part of the <a href="#drawing-state">drawing state</a>.<p>A <dfn id="path">path</dfn> has a list of zero or more subpaths. Each
subpath consists of a list of one or more points, connected by
straight or curved lines, and a flag indicating whether the subpath
@@ -1929,7 +1928,7 @@
path. If either of the arguments is infinite or NaN, then the method
must return false.</p>
- </div><h2 id="focus-management"><span class="secno">11 </span>Focus management</h2><!-- a v4 feature --><p>When a canvas is interactive, authors should include focusable
+ </div><h2 id="focus-management"><span class="secno">10 </span>Focus management</h2><!-- a v4 feature --><p>When a canvas is interactive, authors should include focusable
elements in the element's fallback content corresponding to each
focusable part of the canvas.<p>To indicate which focusable part of the canvas is currently
focused, authors should use the <code title="dom-context-2d-drawFocusRing"><a href="#dom-context-2d-drawfocusring">drawFocusRing()</a></code> method,
@@ -2062,7 +2061,7 @@
</script></pre>
<!-- http://software.hixie.ch/utilities/js/live-dom-viewer/saved/340 -->
- </div><h2 id="text"><span class="secno">12 </span>Text</h2><!-- a v3 feature --><dl class="domintro"><dt><var title="">context</var> . <code title="dom-context-2d-font"><a href="#dom-context-2d-font">font</a></code> [ = <var title="">value</var> ]</dt>
+ </div><h2 id="text"><span class="secno">11 </span>Text</h2><!-- a v3 feature --><dl class="domintro"><dt><var title="">context</var> . <code title="dom-context-2d-font"><a href="#dom-context-2d-font">font</a></code> [ = <var title="">value</var> ]</dt>
<dd>
@@ -2212,12 +2211,12 @@
roughly at the top of the glyphs in a font, the hanging baseline is
where some glyphs like आ are anchored, the middle is half-way
between the top of the em square and the bottom of the em square,
- the alphabetic baseline is where characters like Á, ÿ,
+ the alphabetic baseline is where characters like Á, " src="images/baselines.png">00FF;,
f, and Ω are anchored, the ideographic baseline is
where glyphs like 私 and 達 are anchored, and the bottom
of the em square is roughly at the bottom of the glyphs in a
font. The top and bottom of the bounding box can be far from these
- baselines, due to glyphs extending far outside the em square." src="images/baselines.png"><p>The keywords map to these alignment points as follows:<dl><dt><dfn id="dom-context-2d-textbaseline-top" title="dom-context-2d-textBaseline-top"><code>top</code></dfn>
+ baselines, due to glyphs extending far outside the em square."><p>The keywords map to these alignment points as follows:<dl><dt><dfn id="dom-context-2d-textbaseline-top" title="dom-context-2d-textBaseline-top"><code>top</code></dfn>
<dd>The top of the em square</dd>
<dt><dfn id="dom-context-2d-textbaseline-hanging" title="dom-context-2d-textBaseline-hanging"><code>hanging</code></dfn>
@@ -2555,7 +2554,7 @@
</div><p class="note">A future version of the 2D context API may provide a
way to render fragments of documents, rendered using CSS, straight
to the canvas. This would be provided in preference to a dedicated
- way of doing multiline layout.<h2 id="images"><span class="secno">13 </span>Images</h2><p>To draw images onto the canvas, the <dfn id="dom-context-2d-drawimage" title="dom-context-2d-drawImage"><code>drawImage</code></dfn> method
+ way of doing multiline layout.<h2 id="images"><span class="secno">12 </span>Images</h2><p>To draw images onto the canvas, the <dfn id="dom-context-2d-drawimage" title="dom-context-2d-drawImage"><code>drawImage</code></dfn> method
can be used.<p>This method can be invoked with three different sets of arguments:<ul class="brief"><li><code title="">drawImage(<var title="">image</var>, <var title="">dx</var>, <var title="">dy</var>)</code>
<li><code title="">drawImage(<var title="">image</var>, <var title="">dx</var>, <var title="">dy</var>, <var title="">dw</var>, <var title="">dh</var>)</code>
<li><code title="">drawImage(<var title="">image</var>, <var title="">sx</var>, <var title="">sy</var>, <var title="">sw</var>, <var title="">sh</var>, <var title="">dx</var>, <var title="">dy</var>, <var title="">dw</var>, <var title="">dh</var>)</code>
@@ -2667,7 +2666,7 @@
subject to <a href="#shadows" title="shadows">shadow effects</a>, <a href="#dom-context-2d-globalalpha" title="dom-context-2d-globalAlpha">global alpha</a>, the <a href="#clipping-region" title="clipping region">clipping region</a>, and <a href="#dom-context-2d-globalcompositeoperation" title="dom-context-2d-globalCompositeOperation">global composition
operators</a>.</p>
- </div><h2 id="pixel-manipulation"><span class="secno">14 </span><dfn>Pixel manipulation</dfn></h2><dl class="domintro"><dt><var title="">imagedata</var> = <var title="">context</var> . <code title="dom-context-2d-createImageData"><a href="#dom-context-2d-createimagedata">createImageData</a></code>(<var title="">sw</var>, <var title="">sh</var>)</dt>
+ </div><h2 id="pixel-manipulation"><span class="secno">13 </span><dfn>Pixel manipulation</dfn></h2><dl class="domintro"><dt><var title="">imagedata</var> = <var title="">context</var> . <code title="dom-context-2d-createImageData"><a href="#dom-context-2d-createimagedata">createImageData</a></code>(<var title="">sw</var>, <var title="">sh</var>)</dt>
<dd>
@@ -3018,7 +3017,7 @@
</div><div class="impl">
- <h2 id="drawing-model"><span class="secno">15 </span>Drawing model</h2>
+ <h2 id="drawing-model"><span class="secno">14 </span>Drawing model</h2>
<p>When a shape or image is painted, user agents must follow these
steps, in the order given (or act as if they do):</p>
@@ -3045,7 +3044,7 @@
over the current canvas bitmap using the current composition
operator.</li>
- </ol></div><h2 id="examples"><span class="secno">16 </span>Examples</h2><p><i>This section is non-normative.</i><p>Here is an example of a script that uses canvas to draw pretty
+ </ol></div><h2 id="examples"><span class="secno">15 </span>Examples</h2><p><i>This section is non-normative.</i><p>Here is an example of a script that uses canvas to draw pretty
glowing lines.<pre><canvas width="800" height="450"></canvas>
<script>
Received on Friday, 8 January 2010 09:22:08 UTC