[html5] r1160 - /
whatwg at whatwg.org
whatwg at whatwg.org
Wed Jan 16 18:10:19 PST 2008
Author: ianh
Date: 2008-01-16 18:10:17 -0800 (Wed, 16 Jan 2008)
New Revision: 1160
Modified:
index
source
Log:
[gow] (2) Define what shadows really are in the <canvas> API.
Modified: index
===================================================================
--- index 2008-01-16 02:01:48 UTC (rev 1159)
+++ index 2008-01-17 02:10:17 UTC (rev 1160)
@@ -24,7 +24,7 @@
<h1 id=html-5>HTML 5</h1>
- <h2 class="no-num no-toc" id=working>Working Draft — 15 January 2008</h2>
+ <h2 class="no-num no-toc" id=working>Working Draft — 17 January 2008</h2>
<p>You can take part in this work. <a
href="http://www.whatwg.org/mailing-list">Join the working group's
@@ -16487,32 +16487,34 @@
href="#canvaspattern0">CanvasPattern</a></code>, then it must be ignored,
and the attribute must retain its previous value.
- <p>On getting, if the value is a color, then: if it has alpha equal to 1.0,
- then the color must be returned as a lowercase six-digit hex value,
- prefixed with a "#" character (U+0023 NUMBER SIGN), with the first two
- digits representing the red component, the next two digits representing
- the green component, and the last two digits representing the blue
- component, the digits being in the range 0-9 a-f (U+0030 to U+0039 and
- U+0061 to U+0066). If the value has alpha less than 1.0, then the value
- must instead be returned in the CSS <code title="">rgba()</code>
- functional-notation format: the literal string <code title="">rgba</code>
- (U+0072 U+0067 U+0062 U+0061) followed by a U+0028 LEFT PARENTHESIS, a
- base-ten integer in the range 0-255 representing the red component (using
- digits 0-9, U+0030 to U+0039, in the shortest form possible), a literal
- U+002C COMMA and U+0020 SPACE, an integer for the green component, a comma
- and a space, an integer for the blue component, another comma and space, a
- U+0030 DIGIT ZERO, a U+002E FULL STOP (representing the decimal point),
- one or more digits in the range 0-9 (U+0030 to U+0039) representing the
- fractional part of the alpha value, and finally a U+0029 RIGHT
- PARENTHESIS.
-
- <p>Otherwise, if it is not a color but a <code><a
+ <p>On getting, if the value is a color, then the <a href="#serialisation"
+ title="serialisation of a color">serialisation of the color</a> must be
+ returned. Otherwise, if it is not a color but a <code><a
href="#canvasgradient0">CanvasGradient</a></code> or <code><a
href="#canvaspattern0">CanvasPattern</a></code>, then the respective
object must be returned. (Such objects are opaque and therefore only
useful for assigning to other attributes or for comparison to other
gradients or patterns.)
+ <p>The <dfn id=serialisation>serialisation of a color</dfn> for a color
+ value is a string, computed as follows: if it has alpha equal to 1.0, then
+ the string is a lowercase six-digit hex value, prefixed with a "#"
+ character (U+0023 NUMBER SIGN), with the first two digits representing the
+ red component, the next two digits representing the green component, and
+ the last two digits representing the blue component, the digits being in
+ the range 0-9 a-f (U+0030 to U+0039 and U+0061 to U+0066). Otherwise, the
+ color value has alpha less than 1.0, and the string is the color value in
+ the CSS <code title="">rgba()</code> functional-notation format: the
+ literal string <code title="">rgba</code> (U+0072 U+0067 U+0062 U+0061)
+ followed by a U+0028 LEFT PARENTHESIS, a base-ten integer in the range
+ 0-255 representing the red component (using digits 0-9, U+0030 to U+0039,
+ in the shortest form possible), a literal U+002C COMMA and U+0020 SPACE,
+ an integer for the green component, a comma and a space, an integer for
+ the blue component, another comma and space, a U+0030 DIGIT ZERO, a U+002E
+ FULL STOP (representing the decimal point), one or more digits in the
+ range 0-9 (U+0030 to U+0039) representing the fractional part of the alpha
+ value, and finally a U+0029 RIGHT PARENTHESIS.
+
<p>When the context is created, the <code
title=dom-context-2d-strokeStyle><a
href="#strokestyle">strokeStyle</a></code> and <code
@@ -16818,45 +16820,107 @@
<p>The <dfn id=shadowcolor
title=dom-context-2d-shadowColor><code>shadowColor</code></dfn> attribute
- sets the color of the shadow.</p>
- <!-- XXX this section doesn't say what this attributes returns or
- what they do on setting. if anyone complains, we'll have to add
- it. shadowColor is a CSS Color attribute. -->
+ sets the color of the shadow.
<p>When the context is created, the <code
title=dom-context-2d-shadowColor><a
href="#shadowcolor">shadowColor</a></code> attribute initially must be
fully-transparent black.
+ <p>On getting, the <a href="#serialisation" title="serialisation of a
+ color">serialisation of the color</a> must be returned.
+
+ <p>On setting, the new value must be parsed as a CSS <color> value
+ and the color assigned. If the value is not a valid color, then it must be
+ ignored, and the attribute must retain its previous value. <a
+ href="#refsCSS3COLOR">[CSS3COLOR]</a>
+
<p>The <dfn id=shadowoffsetx
title=dom-context-2d-shadowOffsetX><code>shadowOffsetX</code></dfn> and
<dfn id=shadowoffsety
title=dom-context-2d-shadowOffsetY><code>shadowOffsetY</code></dfn>
attributes specify the distance that the shadow will be offset in the
positive horizontal and positive vertical distance respectively. Their
- values are in coordinate space units.</p>
- <!-- XXX we don't define getting/setting -->
+ values are in coordinate space units.
<p>When the context is created, the shadow offset attributes initially have
the value <code>0</code>.
+ <p>On getting, they must return their current value. On setting, the
+ attribute being set must be set to the new value.
+
<p>The <dfn id=shadowblur
title=dom-context-2d-shadowBlur><code>shadowBlur</code></dfn> attribute
specifies the number of coordinate space units that the blurring is to
- cover. On setting, negative numbers must be ignored, leaving the attribute
- unmodified.</p>
- <!-- XXX we don't define getting/setting -->
+ cover.
<p>When the context is created, the <code
title=dom-context-2d-shadowBlur><a
href="#shadowblur">shadowBlur</a></code> attribute must initially have the
value <code>0</code>.
+ <p>On getting, the attribute must return its current value. On setting, if
+ the value is greater than or equal to zero, then the attribute must be set
+ to the new value; otherwise, the new value is igored.
+
<p>Support for shadows is optional. When they are supported, then, when
- shadows are drawn, they must be rendered using the specified color,
- offset, and blur radius.</p>
- <!-- XXX we don't really define what that means -->
+ shadows are drawn, they must be rendered as follows:
+ <ol>
+ <li>
+ <p>Let A be the source image for which a shadow is being created.</p>
+
+ <li>
+ <p>Let B be an infinite transparent black bitmap, with a coordinate space
+ and an origin identical to A.</p>
+
+ <li>
+ <p>Copy the alpha channel of A to B, offset by <code
+ title=dom-context-2d-shadowOffsetX><a
+ href="#shadowoffsetx">shadowOffsetX</a></code> in the positive <var
+ title="">x</var> direction, and <code
+ title=dom-conteyt-2d-shadowOffsetY>shadowOffsetY</code> in the positive
+ <var title="">y</var> direction.</p>
+
+ <li>
+ <p>If <code title=dom-context-2d-shadowBlur><a
+ href="#shadowblur">shadowBlur</a></code> is greater than 0:</p>
+
+ <ol>
+ <li>
+ <p>If <code title=dom-context-2d-shadowBlur><a
+ href="#shadowblur">shadowBlur</a></code> is less than 8, let <var
+ title="">σ</var> be <span><code
+ title=dom-context-2d-shadowBlur><a
+ href="#shadowblur">shadowBlur</a></code>/2</span>; otherwise, let <var
+ title="">σ</var> be the square root of span><code
+ title=dom-context-2d-shadowBlur><a
+ href="#shadowblur">shadowBlur</a></code>*2
+
+ <li>
+ <p>Perform a Gaussian Blur on B, using <var title="">σ</var> as
+ the standard deviation.
+ </li>
+ <!-- need
+ a reference for this XXX -->
+ </ol>
+
+ <li>
+ <p>Set the red, green, and blue components of every pixel in B to the
+ red, green, and blue components (respectively) of the color of <code
+ title=dom-context-2d-shadowColor><a
+ href="#shadowcolor">shadowColor</a></code>.</p>
+
+ <li>
+ <p>Multiply the alpha component of every pixel in B by the alpha
+ components of the color of <code title=dom-context-2d-shadowColor><a
+ href="#shadowcolor">shadowColor</a></code>.</p>
+
+ <li>
+ <p>The shadow is in the bitmap B, and is rendered as part of the drawing
+ model described below.</p>
+ </ol>
+
<h6 id=simple><span class=secno>3.14.11.1.7. </span>Simple shapes
(rectangles)</h6>
@@ -17358,7 +17422,7 @@
current shadow styles, creating image <var title="">B</var>.
<li>Image <var title="">A</var> is composited over image <var
- title="">B</var> creating the source image.
+ title="">B</var> creating the source image and the source-over operator.
<li>The source image has its alpha adjusted by <code
title=dom-context-2d-globalAlpha><a
Modified: source
===================================================================
--- source 2008-01-16 02:01:48 UTC (rev 1159)
+++ source 2008-01-17 02:10:17 UTC (rev 1160)
@@ -14030,15 +14030,24 @@
it must be ignored, and the attribute must retain its previous
value.</p>
- <p>On getting, if the value is a color, then: if it has alpha equal
- to 1.0, then the color must be returned as a lowercase six-digit
- hex value, prefixed with a "#" character (U+0023 NUMBER SIGN), with
- the first two digits representing the red component, the next two
- digits representing the green component, and the last two digits
- representing the blue component, the digits being in the range 0-9
- a-f (U+0030 to U+0039 and U+0061 to U+0066). If the value has alpha
- less than 1.0, then the value must instead be returned in the CSS
- <code title="">rgba()</code> functional-notation format: the literal
+ <p>On getting, if the value is a color, then the <span
+ title="serialisation of a color">serialisation of the color</span>
+ must be returned. Otherwise, if it is not a color but a
+ <code>CanvasGradient</code> or <code>CanvasPattern</code>, then the
+ respective object must be returned. (Such objects are opaque and
+ therefore only useful for assigning to other attributes or for
+ comparison to other gradients or patterns.)</p>
+
+ <p>The <dfn>serialisation of a color</dfn> for a color value is a
+ string, computed as follows: if it has alpha equal to 1.0, then the
+ string is a lowercase six-digit hex value, prefixed with a "#"
+ character (U+0023 NUMBER SIGN), with the first two digits
+ representing the red component, the next two digits representing the
+ green component, and the last two digits representing the blue
+ component, the digits being in the range 0-9 a-f (U+0030 to U+0039
+ and U+0061 to U+0066). Otherwise, the color value has alpha less
+ than 1.0, and the string is the color value in the CSS <code
+ title="">rgba()</code> functional-notation format: the literal
string <code title="">rgba</code> (U+0072 U+0067 U+0062 U+0061)
followed by a U+0028 LEFT PARENTHESIS, a base-ten integer in the
range 0-255 representing the red component (using digits 0-9, U+0030
@@ -14050,12 +14059,6 @@
representing the fractional part of the alpha value, and finally a
U+0029 RIGHT PARENTHESIS.</p>
- <p>Otherwise, if it is not a color but a <code>CanvasGradient</code>
- or <code>CanvasPattern</code>, then the respective object must be
- returned. (Such objects are opaque and therefore only useful for
- assigning to other attributes or for comparison to other gradients
- or patterns.)</p>
-
<p>When the context is created, the <code
title="dom-context-2d-strokeStyle">strokeStyle</code> and <code
title="dom-context-2d-fillStyle">fillStyle</code> attributes must
@@ -14381,14 +14384,18 @@
title="dom-context-2d-shadowColor"><code>shadowColor</code></dfn>
attribute sets the color of the shadow.</p>
- <!-- XXX this section doesn't say what this attributes returns or
- what they do on setting. if anyone complains, we'll have to add
- it. shadowColor is a CSS Color attribute. -->
-
<p>When the context is created, the <code
title="dom-context-2d-shadowColor">shadowColor</code> attribute
initially must be fully-transparent black.</p>
+ <p>On getting, the <span title="serialisation of a
+ color">serialisation of the color</span> must be returned.</p>
+
+ <p>On setting, the new value must be parsed as a CSS <color>
+ value and the color assigned. If the value is not a valid color,
+ then it must be ignored, and the attribute must retain its previous
+ value. <a href="#refsCSS3COLOR">[CSS3COLOR]</a></p>
+
<p>The <dfn
title="dom-context-2d-shadowOffsetX"><code>shadowOffsetX</code></dfn>
and <dfn
@@ -14397,30 +14404,83 @@
the positive horizontal and positive vertical distance
respectively. Their values are in coordinate space units.</p>
- <!-- XXX we don't define getting/setting -->
-
<p>When the context is created, the shadow offset attributes
initially have the value <code>0</code>.</p>
+ <p>On getting, they must return their current value. On setting, the
+ attribute being set must be set to the new value.</p>
+
<p>The <dfn
title="dom-context-2d-shadowBlur"><code>shadowBlur</code></dfn>
attribute specifies the number of coordinate space units that the
- blurring is to cover. On setting, negative numbers must be ignored,
- leaving the attribute unmodified.</p>
+ blurring is to cover.</p>
- <!-- XXX we don't define getting/setting -->
-
<p>When the context is created, the <code
title="dom-context-2d-shadowBlur">shadowBlur</code> attribute must
initially have the value <code>0</code>.</p>
+ <p>On getting, the attribute must return its current value. On
+ setting, if the value is greater than or equal to zero, then the
+ attribute must be set to the new value; otherwise, the new value is
+ igored.</p>
+
<p>Support for shadows is optional. When they are supported, then,
- when shadows are drawn, they must be rendered using the specified
- color, offset, and blur radius.</p>
+ when shadows are drawn, they must be rendered as follows:</p>
- <!-- XXX we don't really define what that means -->
+ <ol>
+ <li> <p>Let A be the source image for which a shadow is being
+ created.</p> </li>
+ <li> <p>Let B be an infinite transparent black bitmap, with a
+ coordinate space and an origin identical to A.</p> </li>
+
+ <li> <p>Copy the alpha channel of A to B, offset by <code
+ title="dom-context-2d-shadowOffsetX">shadowOffsetX</code> in the
+ positive <var title="">x</var> direction, and <code
+ title="dom-conteyt-2d-shadowOffsetY">shadowOffsetY</code> in the
+ positive <var title="">y</var> direction.</p> </li>
+
+ <li> <p>If <code
+ title="dom-context-2d-shadowBlur">shadowBlur</code> is greater than
+ 0:</p>
+
+ <ol>
+
+ <li> <p>If <code
+ title="dom-context-2d-shadowBlur">shadowBlur</code> is less than
+ 8, let <var title="">σ</var> be <span><code
+ title="dom-context-2d-shadowBlur">shadowBlur</code>/2</span>;
+ otherwise, let <var title="">σ</var> be the square root of
+ span><code
+ title="dom-context-2d-shadowBlur">shadowBlur</code>*2</span>
+ </p></li>
+
+ <li> <p>Perform a Gaussian Blur on B, using <var
+ title="">σ</var> as the standard deviation. </li> <!-- need
+ a reference for this XXX -->
+
+ </ol>
+
+ </li>
+
+ <li> <p>Set the red, green, and blue components of every pixel in B
+ to the red, green, and blue components (respectively) of the color
+ of <code title="dom-context-2d-shadowColor">shadowColor</code>.</p>
+ </li>
+
+ <li> <p>Multiply the alpha component of every pixel in B by the
+ alpha components of the color of <code
+ title="dom-context-2d-shadowColor">shadowColor</code>.</p> </li>
+
+ <li> <p>The shadow is in the bitmap B, and is rendered as part of
+ the drawing model described below.</p> </li>
+
+ </li>
+
+ </ol>
+
+
<h6>Simple shapes (rectangles)</h6>
<p>There are three methods that immediately draw rectangles to the
@@ -14954,7 +15014,8 @@
title="">B</var>.</li>
<li>Image <var title="">A</var> is composited over image <var
- title="">B</var> creating the source image.</li>
+ title="">B</var> creating the source image and the source-over
+ operator.</li>
<li>The source image has its alpha adjusted by <code
title="dom-context-2d-globalAlpha">globalAlpha</code>.</li>
More information about the Commit-Watchers
mailing list