2Dapi; hixie: compositing clarifications (whatwg r5280)

2Dapi; hixie: compositing clarifications (whatwg r5280)

http://dev.w3.org/cvsweb/html5/2dcontext/Overview.html?r1=1.60&r2=1.61&f=h
http://html5.org/tools/web-apps-tracker?from=5279&to=5280

===================================================================
RCS file: /sources/public/html5/2dcontext/Overview.html,v
retrieving revision 1.60
retrieving revision 1.61
diff -u -d -r1.60 -r1.61
--- Overview.html 11 Aug 2010 18:25:10 -0000 1.60
+++ Overview.html 11 Aug 2010 18:41:31 -0000 1.61
@@ -825,77 +825,77 @@
 
   </div><dl><dt><dfn id="gcop-source-atop" title="gcop-source-atop"><code>source-atop</code></dfn></dt>
 
-   <dd><var title="">A</var> atop <var title="">B</var>. Display the
+   <dd><var title="">A</var> atop <var title="">B</var>. <span class="note">Display the
    source image wherever both images are opaque. Display the
    destination image wherever the destination image is opaque but the
-   source image is transparent. Display transparency elsewhere.</dd>
+   source image is transparent. Display transparency elsewhere.</span></dd>
 
    <dt><dfn id="gcop-source-in" title="gcop-source-in"><code>source-in</code></dfn></dt>
 
-   <dd><var title="">A</var> in <var title="">B</var>. Display the
+   <dd><var title="">A</var> in <var title="">B</var>. <span class="note">Display the
    source image wherever both the source image and destination image
-   are opaque. Display transparency elsewhere.</dd>
+   are opaque. Display transparency elsewhere.</span></dd>
 
    <dt><dfn id="gcop-source-out" title="gcop-source-out"><code>source-out</code></dfn></dt>
 
-   <dd><var title="">A</var> out <var title="">B</var>. Display the
+   <dd><var title="">A</var> out <var title="">B</var>. <span class="note">Display the
    source image wherever the source image is opaque and the
    destination image is transparent. Display transparency
-   elsewhere.</dd>
+   elsewhere.</span></dd>
 
    <dt><dfn id="gcop-source-over" title="gcop-source-over"><code>source-over</code></dfn> (default)</dt>
 
-   <dd><var title="">A</var> over <var title="">B</var>. Display the
+   <dd><var title="">A</var> over <var title="">B</var>. <span class="note">Display the
    source image wherever the source image is opaque. Display the
-   destination image elsewhere.</dd>
+   destination image elsewhere.</span></dd>
 
 
    <dt><dfn id="gcop-destination-atop" title="gcop-destination-atop"><code>destination-atop</code></dfn></dt>
 
-   <dd><var title="">B</var> atop <var title="">A</var>. Same as <code title="gcop-source-atop"><a href="#gcop-source-atop">source-atop</a></code> but using the
-   destination image instead of the source image and vice versa.</dd>
+   <dd><var title="">B</var> atop <var title="">A</var>. <span class="note">Same as <code title="gcop-source-atop"><a href="#gcop-source-atop">source-atop</a></code> but using the
+   destination image instead of the source image and vice versa.</span></dd>
 
    <dt><dfn id="gcop-destination-in" title="gcop-destination-in"><code>destination-in</code></dfn></dt>
 
-   <dd><var title="">B</var> in <var title="">A</var>. Same as <code title="gcop-source-in"><a href="#gcop-source-in">source-in</a></code> but using the destination
-   image instead of the source image and vice versa.</dd>
+   <dd><var title="">B</var> in <var title="">A</var>. <span class="note">Same as <code title="gcop-source-in"><a href="#gcop-source-in">source-in</a></code> but using the destination
+   image instead of the source image and vice versa.</span></dd>
 
    <dt><dfn id="gcop-destination-out" title="gcop-destination-out"><code>destination-out</code></dfn></dt>
 
-   <dd><var title="">B</var> out <var title="">A</var>. Same as <code title="gcop-source-out"><a href="#gcop-source-out">source-out</a></code> but using the destination
-   image instead of the source image and vice versa.</dd>
+   <dd><var title="">B</var> out <var title="">A</var>. <span class="note">Same as <code title="gcop-source-out"><a href="#gcop-source-out">source-out</a></code> but using the destination
+   image instead of the source image and vice versa.</span></dd>
 
    <dt><dfn id="gcop-destination-over" title="gcop-destination-over"><code>destination-over</code></dfn></dt>
 
-   <dd><var title="">B</var> over <var title="">A</var>. Same as <code title="gcop-source-over"><a href="#gcop-source-over">source-over</a></code> but using the
-   destination image instead of the source image and vice versa.</dd>
+   <dd><var title="">B</var> over <var title="">A</var>. <span class="note">Same as <code title="gcop-source-over"><a href="#gcop-source-over">source-over</a></code> but using the
+   destination image instead of the source image and vice versa.</span></dd>
 
 
 <!-- no clear definition of this operator (doesn't correspond to a PorterDuff operator)
    <dt><dfn title="gcop-darker"><code>darker</code></dfn></dt>
 
-   <dd>Display the sum of the source image and destination image,
-   with color values approaching 0 as a limit.</dd>
+   <dd><span class="note">Display the sum of the source image and destination image,
+   with color values approaching 0 as a limit.</span></dd>
 -->
 
    <dt><dfn id="gcop-lighter" title="gcop-lighter"><code>lighter</code></dfn></dt>
 
-   <dd><var title="">A</var> plus <var title="">B</var>. Display the
+   <dd><var title="">A</var> plus <var title="">B</var>. <span class="note">Display the
    sum of the source image and destination image, with color values
-   approaching 1 as a limit.</dd>
+   approaching 1 as a limit.</span></dd>
 
 
    <dt><dfn id="gcop-copy" title="gcop-copy"><code>copy</code></dfn></dt>
 
    <dd><var title="">A</var> (<var title="">B</var> is
-   ignored). Display the source image instead of the destination
-   image.</dd>
+   ignored). <span class="note">Display the source image instead of the destination
+   image.</span></dd>
 
 
    <dt><dfn id="gcop-xor" title="gcop-xor"><code>xor</code></dfn></dt>
 
-   <dd><var title="">A</var> xor <var title="">B</var>. Exclusive OR
-   of the source image and destination image.</dd>
+   <dd><var title="">A</var> xor <var title="">B</var>. <span class="note">Exclusive OR
+   of the source image and destination image.</span></dd>
 
 
    <dt class="impl"><code><var title="">vendorName</var>-<var title="">operationName</var></code></dt>
@@ -905,15 +905,19 @@
 
   </dl><div class="impl">
 
+  <p>The operators in the above list must be treated as described by
+  the Porter-Duff operator given at the start of their description
+  (e.g. <var title="">A</var> over <var title="">B</var>). They are to
+  be applied as part of the <a href="#drawing-model">drawing model</a>, at which point the
+  <a href="#clipping-region">clipping region</a> is also applied. (Without a clipping
+  region, these operators act on the whole bitmap with every
+  operation.) <a href="#refsPORTERDUFF">[PORTERDUFF]</a></p>
+
   <p>These values are all case-sensitive &mdash; they must be used
   exactly as shown. User agents must not recognize values that are not
   a <span>case-sensitive</span> match for one of the values given
   above.</p>
 
-  <p>The operators in the above list must be treated as described by
-  the Porter-Duff operator given at the start of their description
-  (e.g. <var title="">A</var> over <var title="">B</var>). <a href="#refsPORTERDUFF">[PORTERDUFF]</a></p>
-
   <p>On setting, if the user agent does not recognize the specified
   value, it must be ignored, leaving the value of <code title="dom-context-2d-globalCompositeOperation"><a href="#dom-context-2d-globalcompositeoperation">globalCompositeOperation</a></code>
   unaffected.</p>
@@ -1567,7 +1571,7 @@
    <li> <p>Multiply the alpha component of every pixel in <var title="">B</var> by the alpha component of the color of <code title="dom-context-2d-shadowColor"><a href="#dom-context-2d-shadowcolor">shadowColor</a></code>.</p> </li>
 
    <li> <p>The shadow is in the bitmap <var title="">B</var>, and is
-   rendered as part of the drawing model described below.</p> </li>
+   rendered as part of the <a href="#drawing-model">drawing model</a> 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
@@ -2692,8 +2696,8 @@
   <p class="note">This specification does not define the algorithm to
   use when scaling the image, if necessary.</p>
 
-  <p class="note">When a canvas is drawn onto itself, the drawing
-  model requires the source to be copied before the image is drawn
+  <p class="note">When a canvas is drawn onto itself, the <a href="#drawing-model">drawing
+  model</a> requires the source to be copied before the image is drawn
   back onto the canvas, so it is possible to copy parts of a canvas
   onto overlapping parts of itself.</p>
 
@@ -3068,7 +3072,7 @@
 
   </div><div class="impl">
 
-  <h2 id="drawing-model"><span class="secno">14 </span>Drawing model</h2>
+  <h2 id="drawing-model"><span class="secno">14 </span><dfn>Drawing model</dfn></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>
@@ -3086,14 +3090,15 @@
    <li><p><a href="#when-shadows-are-drawn">When shadows are drawn</a>, multiply the alpha
    component of every pixel in <var title="">B</var> by <code title="dom-context-2d-globalAlpha"><a href="#dom-context-2d-globalalpha">globalAlpha</a></code>.</li>
 
-   <li><p><a href="#when-shadows-are-drawn">When shadows are drawn</a>, composite <var title="">B</var> within the clipping region over the current canvas
-   bitmap using the current composition operator.</li>
+   <li><p><a href="#when-shadows-are-drawn">When shadows are drawn</a>, composite <var title="">B</var> within the <a href="#clipping-region">clipping region</a> over the
+   current canvas bitmap using the current composition
+   operator.</li>
 
    <li><p>Multiply the alpha component of every pixel in <var title="">A</var> by <code title="dom-context-2d-globalAlpha"><a href="#dom-context-2d-globalalpha">globalAlpha</a></code>.</li>
 
-   <li><p>Composite <var title="">A</var> within the clipping region
-   over the current canvas bitmap using the current composition
-   operator.</li>
+   <li><p>Composite <var title="">A</var> within the <a href="#clipping-region">clipping
+   region</a> 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
   glowing lines.<pre>&lt;canvas width="800" height="450"&gt;&lt;/canvas&gt;

Received on Wednesday, 11 August 2010 18:42:20 UTC