- From: poot <cvsmail@w3.org>
- Date: Thu, 12 Aug 2010 03:46:04 +0900 (JST)
- To: public-html-diffs@w3.org
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 — 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><canvas width="800" height="450"></canvas>
Received on Wednesday, 11 August 2010 18:42:20 UTC