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

html5/2dcontext Overview.html,1.4,1.5

From: Ian Hickson via cvs-syncmail <cvsmail@w3.org>
Date: Fri, 08 Jan 2010 09:22:06 +0000
To: public-html-commits@w3.org
Message-Id: <E1NTB2k-00057Y-TD@lionel-hutz.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-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
@@ -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 @@
 &lt;/script&gt;</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 &#2310; 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 &Aacute;, &yuml;,
+  the alphabetic baseline is where characters like &Aacute;, " src="images/baselines.png">00FF;,
   f, and &Omega; are anchored, the ideographic baseline is
   where glyphs like &#31169; and &#36948; 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."&gt;<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>&lt;canvas width="800" height="450"&gt;&lt;/canvas&gt;
 &lt;script&gt;
 
Received on Friday, 8 January 2010 09:22:08 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Friday, 8 January 2010 09:22:08 GMT