Skip to content

Commit

Permalink
[e] (0) compositing clarifications
Browse files Browse the repository at this point in the history 
git-svn-id: http://svn.whatwg.org/webapps@5280 340c8d12-0b0e-0410-8428-c7bf67bfef74
  • Loading branch information
@Hixie
Hixie committed Aug 11, 2010
1 parent fccc2e2 commit bb19269
Show file tree
Hide file tree
Showing 3 changed files with 126 additions and 112 deletions.
79 changes: 42 additions & 37 deletions complete.html
View file
Expand Up @@ -30212,77 +30212,77 @@ <h6 id=compositing><span class=secno>4.8.11.1.3 </span>Compositing</h6>

<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>
Expand All @@ -30292,15 +30292,19 @@ <h6 id=compositing><span class=secno>4.8.11.1.3 </span>Compositing</h6>

</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 <a href=#case-sensitive>case-sensitive</a> 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>
Expand Down Expand Up @@ -30982,7 +30986,7 @@ <h6 id=shadows><span class=secno>4.8.11.1.6 </span><dfn>Shadows</dfn></h6>
<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>

Expand Down Expand Up @@ -32165,8 +32169,8 @@ <h6 id=images><span class=secno>4.8.11.1.11 </span>Images</h6>
<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>

Expand Down Expand Up @@ -32554,7 +32558,7 @@ <h6 id=pixel-manipulation><span class=secno>4.8.11.1.12 </span><dfn>Pixel manipu

<div class=impl>

<h6 id=drawing-model><span class=secno>4.8.11.1.13 </span>Drawing model</h6>
<h6 id=drawing-model><span class=secno>4.8.11.1.13 </span><dfn>Drawing model</dfn></h6>

<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>
Expand All @@ -32572,14 +32576,15 @@ <h6 id=drawing-model><span class=secno>4.8.11.1.13 </span>Drawing model</h6>
<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>

Expand Down
79 changes: 42 additions & 37 deletions index
View file
Expand Up @@ -30139,77 +30139,77 @@ idea from Mihai:

<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>
Expand All @@ -30219,15 +30219,19 @@ idea from Mihai:

</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 <a href=#case-sensitive>case-sensitive</a> 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>
Expand Down Expand Up @@ -30909,7 +30913,7 @@ hairline width with transform. ack Shaun Morris.
<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>

Expand Down Expand Up @@ -32092,8 +32096,8 @@ v5DVT (also check for '- -' bits in the part above) --><p>The <dfn id=dom-contex
<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>

Expand Down Expand Up @@ -32481,7 +32485,7 @@ function AddCloud(data, x, y) { ... }</pre>

<div class=impl>

<h6 id=drawing-model><span class=secno>4.8.11.1.13 </span>Drawing model</h6>
<h6 id=drawing-model><span class=secno>4.8.11.1.13 </span><dfn>Drawing model</dfn></h6>

<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>
Expand All @@ -32499,14 +32503,15 @@ function AddCloud(data, x, y) { ... }</pre>
<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>

Expand Down

0 comments on commit bb19269

Please sign in to comment.