- 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