W3C home > Mailing lists > Public > public-html-commits@w3.org > January 2010

html5/2dcontext Overview.html,1.1,1.2

From: Ian Hickson via cvs-syncmail <cvsmail@w3.org>
Date: Fri, 08 Jan 2010 06:48:43 +0000
To: public-html-commits@w3.org
Message-Id: <E1NT8eJ-0000E6-Vv@lionel-hutz.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-2d-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 @@
 &lt;/script&gt;</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>&lt;canvas width="800" height="450"&gt;&lt;/canvas&gt;
 &lt;script&gt;
 
@@ -3080,7 +3085,7 @@
  }
  setInterval(blank, 40);
 
-&lt;/script&gt;</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>
+&lt;/script&gt;</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 &agrave; 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 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Friday, 8 January 2010 06:48:54 GMT