- From: Ian Hickson via cvs-syncmail <cvsmail@w3.org>
- Date: Fri, 08 Jan 2010 06:48:43 +0000
- To: public-html-commits@w3.org
Update of /sources/public/html5/2dcontext In directory hutz:/tmp/cvs-serv854 Modified Files: Overview.html Log Message: cleanup. This may introduce other problems; I'll clean them up too shortly. (whatwg r4543) Index: Overview.html =================================================================== RCS file: /sources/public/html5/2dcontext/Overview.html,v retrieving revision 1.1 retrieving revision 1.2 diff -u -d -r1.1 -r1.2 --- Overview.html 8 Jan 2010 06:17:53 -0000 1.1 +++ Overview.html 8 Jan 2010 06:48:41 -0000 1.2 @@ -377,23 +377,28 @@ permits reuse of the specification text.</p><!-- UNDER NO CIRCUMSTANCES IS THE PRECEDING PARAGRAPH TO BE REMOVED OR EDITED WITHOUT TALKING TO IAN FIRST --><h2 class="no-num no-toc" id="contents">Table of Contents</h2> <!--begin-toc--> <ol class="toc"> - <li><a href="#idl"><span class="secno">1 </span>IDL</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></ol> -<!--end-toc--><hr><h2 id="idl"><span class="secno">1 </span>IDL</h2><div class="impl"> + <li><a href="#conformance"><span class="secno">1 </span>Conformance</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 class="no-num" href="#references">References</a></li> + <li><a href="#acknowledgements"><span class="secno">17 </span>Acknowledgements</a></ol> +<!--end-toc--><hr><h2 id="conformance"><span class="secno">1 </span>Conformance</h2><p>Definitions of terms and conformance classes used in this + specification, as well as a general introduction to the HTML5 series + of specifiations, can be found in the <a href="http://dev.w3.org/html5/spec/spec.html">HTML5 Core and + Vocabularies</a> specification.<h2 id="idl"><span class="secno">2 </span>IDL</h2><div class="impl"> <p>When the <code title="dom-canvas-getContext">getContext()</code> @@ -580,7 +585,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">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> + </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> <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 @@ -631,7 +636,7 @@ > But how would it interact with normal calls to ctx.restore()? --> - </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 + </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 shapes and paths.</p><!-- conformance criteria for actual drawing are described in the various sections below --><div class="impl"> @@ -725,7 +730,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">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> + </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> <dd> @@ -874,7 +879,7 @@ attribute must initially have the value <code>source-over</code>.</p> - </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> + </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> <dd> @@ -1222,7 +1227,7 @@ canvas then using that canvas as the pattern. --> - </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> + </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> <dd> @@ -1389,7 +1394,7 @@ > allowing whatever behavior the graphics library has.) --> - </div><h2 id="shadows"><span class="secno">7 </span><dfn>Shadows</dfn></h2><p>All drawing operations are affected by the four global shadow + </div><h2 id="shadows"><span class="secno">8 </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> @@ -1515,7 +1520,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">8 </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">9 </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"> @@ -1576,7 +1581,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">9 </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">10 </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 @@ -1924,7 +1929,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">10 </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">11 </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, @@ -2057,7 +2062,7 @@ </script></pre> <!-- http://software.hixie.ch/utilities/js/live-dom-viewer/saved/340 --> - </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> + </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> <dd> @@ -2550,7 +2555,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">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 + 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 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> @@ -2662,7 +2667,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">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> + </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> <dd> @@ -3013,7 +3018,7 @@ </div><div class="impl"> - <h2 id="drawing-model"><span class="secno">14 </span>Drawing model</h2> + <h2 id="drawing-model"><span class="secno">15 </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> @@ -3040,7 +3045,7 @@ over the current canvas bitmap using the current composition operator.</li> - </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 + </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 glowing lines.<pre><canvas width="800" height="450"></canvas> <script> @@ -3080,7 +3085,7 @@ } setInterval(blank, 40); -</script></pre><!--START vCard--><!--START vEvent--><h2 class="no-num" id="references">References</h2><!--REFS--><!--END vCard--><!--END vEvent--><p>All references are normative unless marked "Non-normative".</p><!--START vCard--><!--START vEvent--><!-- XXX really should remove dates and version numbers from these references once and for all --><dl><dt id="refsBEZIER">[BEZIER]</dt> +</script></pre><h2 class="no-num" id="references">References</h2><!--REFS--><p>All references are normative unless marked "Non-normative".</p><!-- XXX really should remove dates and version numbers from these references once and for all --><dl><dt id="refsBEZIER">[BEZIER]</dt> <dd><cite>Courbes à poles</cite>, P. de Casteljau. INPI, 1959.</dd> <dt id="refsCSS">[CSS]</dt> @@ -3112,4 +3117,5 @@ graphics</cite>, volume 18, number 3, pp. 253-259. ACM Press, July 1984.</dd> - </dl><!--END vCard--><!--END vEvent--> + </dl><h2 id="acknowledgements"><span class="secno">17 </span>Acknowledgements</h2><p>For a full list of acknowledgements, please see the HTML5 + specification.
Received on Friday, 8 January 2010 06:48:46 UTC