[html5] r810 - /
whatwg at whatwg.org
whatwg at whatwg.org
Mon May 14 19:36:53 PDT 2007
Author: ianh
Date: 2007-05-14 19:36:51 -0700 (Mon, 14 May 2007)
New Revision: 810
Modified:
index
source
Log:
[agow] (2) <canvas> gradient updates, cross reference fixes, and editorial fixes
Modified: index
===================================================================
--- index 2007-05-11 23:20:38 UTC (rev 809)
+++ index 2007-05-15 02:36:51 UTC (rev 810)
@@ -22,7 +22,7 @@
<h1 id=html-5>HTML 5</h1>
- <h2 class="no-num no-toc" id=working>Working Draft — 11 May 2007</h2>
+ <h2 class="no-num no-toc" id=working>Working Draft — 15 May 2007</h2>
<p>You can take part in this work. <a
href="http://www.whatwg.org/mailing-list">Join the working group's
@@ -15455,7 +15455,7 @@
<p>When the UA is passed an empty string or a string specifying a context
that it does not support, then it must return null. String comparisons
- should be literal and case-sensitive.
+ must be literal and case-sensitive.
<p class=note>A future version of this specification will probably define a
<code>3d</code> context (probably based on the OpenGL ES API).
@@ -15554,15 +15554,15 @@
-->
// compositing
attribute float <a href="#globalalpha" title=dom-context-2d-globalAlpha>globalAlpha</a>; // (default 1.0)
- attribute DOMString <a href="#globalcompositeoperation" title=dom-context-2d-globalCompositeOperation>globalCompositeOperation</a>; // (default over)
+ attribute DOMString <a href="#globalcompositeoperation" title=dom-context-2d-globalCompositeOperation>globalCompositeOperation</a>; // (default source-over)
// colors and styles
attribute DOMObject <a href="#strokestyle" title=dom-context-2d-strokeStyle>strokeStyle</a>; // (default black)
attribute DOMObject <a href="#fillstyle" title=dom-context-2d-fillStyle>fillStyle</a>; // (default black)
- <a href="#canvasgradient0">CanvasGradient</a> <span title=dom-context-2d-createLinearGradient>createLinearGradient</span>(in float x0, in float y0, in float x1, in float y1);
- <a href="#canvasgradient0">CanvasGradient</a> <span title=dom-context-2d-createRadialGradient>createRadialGradient</span>(in float x0, in float y0, in float r0, in float x1, in float y1, in float r1);
- <a href="#canvaspattern0">CanvasPattern</a> <span title=dom-context-2d-createPattern>createPattern</span>(in <a href="#htmlimageelement">HTMLImageElement</a> image, DOMString repetition);
- <a href="#canvaspattern0">CanvasPattern</a> <span title=dom-context-2d-createPattern>createPattern</span>(in <a href="#htmlcanvaselement">HTMLCanvasElement</a> image, DOMString repetition);
+ <a href="#canvasgradient0">CanvasGradient</a> <a href="#createlineargradient" title=dom-context-2d-createLinearGradient>createLinearGradient</a>(in float x0, in float y0, in float x1, in float y1);
+ <a href="#canvasgradient0">CanvasGradient</a> <a href="#createradialgradient" title=dom-context-2d-createRadialGradient>createRadialGradient</a>(in float x0, in float y0, in float r0, in float x1, in float y1, in float r1);
+ <a href="#canvaspattern0">CanvasPattern</a> <a href="#createpatternimage" title=dom-context-2d-createPattern>createPattern</a>(in <a href="#htmlimageelement">HTMLImageElement</a> image, DOMString repetition);
+ <a href="#canvaspattern0">CanvasPattern</a> <a href="#createpatternimage" title=dom-context-2d-createPattern>createPattern</a>(in <a href="#htmlcanvaselement">HTMLCanvasElement</a> image, DOMString repetition);
// line caps/joins
attribute float <a href="#linewidth" title=dom-context-2d-lineWidth>lineWidth</a>; // (default 1)
@@ -15574,7 +15574,7 @@
attribute float <a href="#shadowoffsetx" title=dom-context-2d-shadowOffsetX>shadowOffsetX</a>; // (default 0)
attribute float <a href="#shadowoffsety" title=dom-context-2d-shadowOffsetY>shadowOffsetY</a>; // (default 0)
attribute float <a href="#shadowblur" title=dom-context-2d-shadowBlur>shadowBlur</a>; // (default 0)
- attribute DOMString <a href="#shadowcolor" title=dom-context-2d-shadowColor>shadowColor</a>; // (default black)
+ attribute DOMString <a href="#shadowcolor" title=dom-context-2d-shadowColor>shadowColor</a>; // (default transparent black)
// rects
void <a href="#clearrect" title=dom-context-2d-clearRect>clearRect</a>(in float x, in float y, in float w, in float h);
@@ -15676,13 +15676,13 @@
canvas</span><!-- XXX xref -->, not the context.
<p>The <dfn id=save title=dom-context-2d-save><code>save()</code></dfn>
- method pushes a copy of the current drawing state onto the drawing state
- stack.
+ method must push a copy of the current drawing state onto the drawing
+ state stack.
<p>The <dfn id=restore
- title=dom-context-2d-restore><code>restore()</code></dfn> method pops the
- top entry in the drawing state stack, and resets the drawing state it
- describes. If there is no saved state, the method does nothing.
+ title=dom-context-2d-restore><code>restore()</code></dfn> method must pop
+ the top entry in the drawing state stack, and reset the drawing state it
+ describes. If there is no saved state, the method must do nothing.
<h6 id=transformations><span class=secno>3.14.11.1.2. </span><dfn
id=transformations0>Transformations</dfn></h6>
@@ -15901,9 +15901,9 @@
<p>Both attributes can be either strings, <code><a
href="#canvasgradient0">CanvasGradient</a></code>s, or <code><a
- href="#canvaspattern0">CanvasPattern</a></code>s. On setting, strings
- should be parsed as CSS <color> values and the color assigned, and
- <code><a href="#canvasgradient0">CanvasGradient</a></code> and <code><a
+ href="#canvaspattern0">CanvasPattern</a></code>s. On setting, strings must
+ be parsed as CSS <color> values and the color assigned, and <code><a
+ href="#canvasgradient0">CanvasGradient</a></code> and <code><a
href="#canvaspattern0">CanvasPattern</a></code> objects must be assigned
themselves. <a href="#refsCSS3COLOR">[CSS3COLOR]</a> If the value is a
string but is not a valid color, or is neither a string, a <code><a
@@ -15932,10 +15932,10 @@
<p>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 an object supporting
- those interfaces must be returned. Such objects are opaque and therefore
- only useful for assigning to other attributes or for comparison to other
- gradients or patterns.
+ 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>When the context is created, the <code
title=dom-context-2d-strokeStyle><a
@@ -15948,12 +15948,15 @@
both represented by objects implementing the opaque <dfn
id=canvasgradient0><code>CanvasGradient</code></dfn> interface.
- <p>Once a gradient has been created (see below), stops must be placed along
- it to define how the colors are distributed along the gradient. Between
- each such stop, the colors and the alpha component must be interpolated
- over the RGBA space to find the color to use at that offset. Immediately
- before the 0 offset and immediately after the 1 offset, transparent black
- stops are be assumed.
+ <p>Once a gradient has been created (see below), stops are placed along it
+ to define how the colors are distributed along the gradient. The color of
+ the gradient at each stop is the color specified for that stop. Between
+ each such stop, the colors and the alpha component must be linearly
+ interpolated over the RGBA space without premultiplying the alpha value to
+ find the color to use at that offset. Before the first stop, the color
+ must be the color of the first stop. After the last stop, the color must
+ be the color of the last stop. When there are no stops, the gradient is
+ transparent black.
<p>The <dfn id=addcolorstop
title=dom-canvasgradient-addColorStop><code>addColorStop(<var
@@ -15963,10 +15966,17 @@
than 0 or greater than 1 then an <code>INDEX_SIZE_ERR</code> exception
must be raised. If the <var title="">color</var> cannot be parsed as a CSS
color, then a <code>SYNTAX_ERR</code> exception must be raised. Otherwise,
- the gradient must be updated with the new stop information.
+ the gradient must have a new stop placed, at offset <var
+ title="">offset</var> relative to the whole gradient, and with the color
+ obtained by parsing <var title="">color</var> as a CSS <color>
+ value. If multiple stops are placed at the same place on a gradient, they
+ must be placed in the order added, with the first one closest to the start
+ of the gradient, and each subsequent one infinitesimally further along
+ towards the end point (in effect causing all but the first and last stop
+ added at each point to be ignored).
- <p>The <dfn id=createlineargradient title=createLinearGradient><code
- title=dom-context-2d-createLinearGradient>createLinearGradient(<var
+ <p>The <dfn id=createlineargradient
+ title=dom-context-2d-createLinearGradient><code>createLinearGradient(<var
title="">x0</var>, <var title="">y0</var>, <var title="">x1</var>, <var
title="">y1</var>)</code></dfn> method takes four arguments, representing
the start point (<var title="">x0</var>, <var title="">y0</var>) and end
@@ -15975,15 +15985,23 @@
href="#canvasgradient0">CanvasGradient</a></code> initialised with that
line.
- <p>Linear gradients must be rendered such that at the starting point on the
- canvas the color at offset 0 is used, that at the ending point the color
- at offset 1 is used, that all points on a line perpendicular to the line
- between the start and end points have the color at the point where those
- two lines cross (interpolation happening as described above), and that any
- points beyond the start or end points are a transparent black.
+ <p>Linear gradients must be rendered such that at and before the starting
+ point on the canvas the color at offset 0 is used, that at and after the
+ ending point the color at offset 1 is used, and that all points on a line
+ perpendicular to the line that crosses the start and end points have the
+ color at the point where those two lines cross (with the colors coming
+ from the interpolation described above).
- <p>The <dfn id=createradialgradient title=createRadialGradient><code
- title=dom-context-2d-createRadialGradient>createRadialGradient(<var
+ <p>If <span><var title="">x<sub>0</sub></var> = <var
+ title="">x<sub>1</sub></var></span> and <span><var
+ title="">y<sub>0</sub></var> = <var
+ title="">y<sub>1</sub></var></span>, then the linear gradient must paint
+ nothing.</p>
+ <!-- XXX could make this paint the start colour,
+ or the end colour, or raise an exception -->
+
+ <p>The <dfn id=createradialgradient
+ title=dom-context-2d-createRadialGradient><code>createRadialGradient(<var
title="">x0</var>, <var title="">y0</var>, <var title="">r0</var>, <var
title="">x1</var>, <var title="">y1</var>, <var
title="">r1</var>)</code></dfn> method takes six arguments, the first
@@ -15993,44 +16011,92 @@
<var title="">y1</var>) and radius <var title="">r1</var>. The values are
in coordinate space units. The method must return a radial <code><a
href="#canvasgradient0">CanvasGradient</a></code> initialised with those
- two circles.
+ two circles. If either of <var title="">r0</var> or <var title="">r1</var>
+ are negative, an <code>INDEX_SIZE_ERR</code> exception must be raised.
- <p>Radial gradients must be rendered such that a cone is created from the
- two circles, so that at the circumference of the starting circle the color
- at offset 0 is used, that at the circumference around the ending circle
- the color at offset 1 is used, that the circumference of a circle drawn a
- certain fraction of the way along the line between the two origins with a
- radius the same fraction of the way between the two radii has the color at
- that offset (interpolation happening as described above), that the end
- circle appear to be above the start circle when the end circle is not
- completely enclosed by the start circle, that the end circle be filled by
- the color at offset 1, and that any points not described by the gradient
- are a transparent black.
+ <p>Radial gradients must be rendered by following these steps:
- <p>If a gradient has no stops defined, then the gradient must be treated as
- a solid transparent black. Gradients are, naturally, only painted where
- the stroking or filling effect requires that they be drawn.
+ <ol>
+ <li>
+ <p>Let <span>x(<var title="">ω</var>) = (<var
+ title="">x<sub>1</sub></var>-<var title="">x<sub>0</sub></var>)<var
+ title="">ω</var> + <var
+ title="">x<sub>0</sub></var></span></p>
+ <p>Let <span>y(<var title="">ω</var>) = (<var
+ title="">y<sub>1</sub></var>-<var title="">y<sub>0</sub></var>)<var
+ title="">ω</var> + <var
+ title="">y<sub>0</sub></var></span></p>
+
+ <p>Let <span>r(<var title="">ω</var>) = (<var
+ title="">r<sub>1</sub></var>-<var title="">r<sub>0</sub></var>)<var
+ title="">ω</var> + <var
+ title="">r<sub>0</sub></var></span></p>
+
+ <p>Let the color at <var title="">ω</var> be the color of the
+ gradient at offset 0.0 for all values of <var title="">ω</var>
+ less than 0.0, the color at offset 1.0 for all values of <var
+ title="">ω</var> greater than 1.0, and the color at the given
+ offset for values of <var title="">ω</var> in the range
+ <span>0.0 ≤ <var
+ title="">ω</var> ≤ 1.0</span>
+
+ <li>
+ <p>For all values of <var title="">ω</var> where <span>r(<var
+ title="">ω</var>) > 0</span>, starting with the value
+ of <var title="">ω</var> nearest to positive infinity and ending
+ with the value of <var title="">ω</var> nearest to negative
+ infinity, draw the circumference of the circle with radius of radius
+ <span>r(<var title="">ω</var>)</span> at position (<span>x(<var
+ title="">ω</var>)</span>, <span>y(<var
+ title="">ω</var>)</span>), with the color at <var
+ title="">ω</var>, but only painting on the parts of the canvas
+ that have not yet been painted on by earlier circles in this step for
+ this rendering of the gradient.
+ </ol>
+
+ <p>If <span><var title="">x<sub>0</sub></var> = <var
+ title="">x<sub>1</sub></var></span> and <span><var
+ title="">y<sub>0</sub></var> = <var
+ title="">y<sub>1</sub></var></span> and <span><var
+ title="">r<sub>0</sub></var> = <var
+ title="">r<sub>1</sub></var></span>, then the radial gradient must paint
+ nothing.</p>
+ <!-- XXX could make this paint the start colour,
+ or the end colour, or a circle of one in the other, or raise an
+ exception -->
+
+ <p class=note>This effectively creates a cone, touched by the two circles
+ defined in the creation of the gradient, with the part of the cone before
+ the start circle (0.0) using the color of the first offset, the part of
+ the cone after the end circle (1.0) using the color of the last offset,
+ and areas outside the cone untouched by the gradient (transparent black).
+ If the two circles overlap, the effect is as if the second (end) circle is
+ painted on top of the first circle. The end circle is always filled with
+ the color of the last stop.
+
+ <p>Gradients must only be painted where the relevant stroking or filling
+ effects requires that they be drawn.
+
<p>Support for actually painting gradients is optional. Instead of painting
the gradients, user agents may instead just paint the first stop's color.
- However, <code
- title=dom-context-2d-createLinearGradient>createLinearGradient()</code>
- and <code
- title=dom-context-2d-createRadialGradient>createRadialGradient()</code>
- must always return objects when passed valid arguments.
+ However, <code title=dom-context-2d-createLinearGradient><a
+ href="#createlineargradient">createLinearGradient()</a></code> and <code
+ title=dom-context-2d-createRadialGradient><a
+ href="#createradialgradient">createRadialGradient()</a></code> must always
+ return objects when passed valid arguments.
<p>Patterns are represented by objects implementing the opaque <dfn
id=canvaspattern0><code>CanvasPattern</code></dfn> interface.
<p>To create objects of this type, the <dfn id=createpatternimage
- title=createPattern><code
- title=dom-context-2d-createPattern>createPattern(image,
+ title=dom-context-2d-createPattern><code>createPattern(image,
repetition)</code></dfn> method is used. The first argument gives the
image to use as the pattern (either an <code><a
href="#htmlimageelement">HTMLImageElement</a></code> or an <code><a
href="#htmlcanvaselement">HTMLCanvasElement</a></code>). Modifying this
- image after calling the <code
- title=dom-context-2d-createPattern>createPattern()</code> method must not
+ image after calling the <code title=dom-context-2d-createPattern><a
+ href="#createpatternimage">createPattern()</a></code> method must not
affect the pattern. The second argument must be a string with one of the
following values: <code title="">repeat</code>, <code
title="">repeat-x</code>, <code title="">repeat-y</code>, <code
@@ -16064,9 +16130,8 @@
be drawn, and are affected by the current transformation matrix.
<p>Support for patterns is optional. If the user agent doesn't support
- patterns, then <code
- title=dom-context-2d-createPattern>createPattern()</code> must return
- null.</p>
+ patterns, then <code title=dom-context-2d-createPattern><a
+ href="#createpatternimage">createPattern()</a></code> must return null.</p>
<!--
Requests for v3 features:
* apply transforms to patterns, so you don't have to create
@@ -39100,9 +39165,9 @@
Håkon Wium Lie, Henri Sivonen, Henrik Lied, Ignacio Javier, J. King,
James Graham, James M Snell, James Perrett, Jan-Klaas Kollhof, Jasper
Bryant-Greene, Jeff Cutsinger, Jens Bannmann, Joel Spolsky, John Harding,
- Johnny Stenback, Jon Perlow, Jonathan Worent, Jorgen Horstink, Joshua
- Randall, Jukka K. Korpela, Kai Hendry, <!-- Keryx Web, = Lars
- Gunther -->
+ Johnny Stenback, Jon Perlow, Jonathan Worent, Jorgen Horstink, Josh
+ Levenberg, Joshua Randall, Jukka K. Korpela, Kai Hendry, <!-- Keryx
+ Web, = Lars Gunther -->
Kornel Lesinski, 黒澤剛志 (KUROSAWA Takeshi),
Lachlan Hunt, Larry Page, Lars Gunther, Laurens Holst, Lenny Domnitser,
Léonard Bouchet, Leons Petrazickis, Logan<!-- on moz irc -->,
@@ -39111,8 +39176,8 @@
Matthew Raymond, Matthew Thomas, Mattias Waldau, Max Romantschuk, Michael
'Ratt' Iannarelli, Michael A. Nachbaur, Michael Gratton, Michael Powers,
Michel Fortin, Mihai Şucan<!-- from ROBO Design -->, Mike
- Dierken<!--
- S. Mike Dierken -->, Mike Dixon, Mike Schinkel, Mike Shaver,
+ Dierken<!-- S. Mike
+ Dierken -->, Mike Dixon, Mike Schinkel, Mike Shaver,
Mikko Rantalainen, Neil Deakin, Olav Junker Kjær, Philip Taylor,
Rajas Moonka, Rimantas Liubertas, Robert O'Callahan, Robert Sayre, Roman
Ivanov, S. Mike Dierken, Sam Ruby, Sean Knapp, Shadow2531, Shaun Inman,
Modified: source
===================================================================
--- source 2007-05-11 23:20:38 UTC (rev 809)
+++ source 2007-05-15 02:36:51 UTC (rev 810)
@@ -13039,7 +13039,7 @@
<p>When the UA is passed an empty string or a string specifying a
context that it does not support, then it must return null. String
- comparisons should be literal and case-sensitive.</p>
+ comparisons must be literal and case-sensitive.</p>
<p class="note">A future version of this specification will probably
define a <code>3d</code> context (probably based on the OpenGL ES
@@ -13136,7 +13136,7 @@
-->
// compositing
attribute float <span title="dom-context-2d-globalAlpha">globalAlpha</span>; // (default 1.0)
- attribute DOMString <span title="dom-context-2d-globalCompositeOperation">globalCompositeOperation</span>; // (default over)
+ attribute DOMString <span title="dom-context-2d-globalCompositeOperation">globalCompositeOperation</span>; // (default source-over)
// colors and styles
attribute DOMObject <span title="dom-context-2d-strokeStyle">strokeStyle</span>; // (default black)
@@ -13156,7 +13156,7 @@
attribute float <span title="dom-context-2d-shadowOffsetX">shadowOffsetX</span>; // (default 0)
attribute float <span title="dom-context-2d-shadowOffsetY">shadowOffsetY</span>; // (default 0)
attribute float <span title="dom-context-2d-shadowBlur">shadowBlur</span>; // (default 0)
- attribute DOMString <span title="dom-context-2d-shadowColor">shadowColor</span>; // (default black)
+ attribute DOMString <span title="dom-context-2d-shadowColor">shadowColor</span>; // (default transparent black)
// rects
void <span title="dom-context-2d-clearRect">clearRect</span>(in float x, in float y, in float w, in float h);
@@ -13247,14 +13247,14 @@
the canvas</span><!-- XXX xref -->, not the context.</p>
<p>The <dfn title="dom-context-2d-save"><code>save()</code></dfn>
- method pushes a copy of the current drawing state onto the drawing
- state stack.</p>
+ method must push a copy of the current drawing state onto the
+ drawing state stack.</p>
<p>The <dfn
title="dom-context-2d-restore"><code>restore()</code></dfn> method
- pops the top entry in the drawing state stack, and resets the
+ must pop the top entry in the drawing state stack, and reset the
drawing state it describes. If there is no saved state, the method
- does nothing.</p>
+ must do nothing.</p>
<h6><dfn>Transformations</dfn></h6>
@@ -13473,8 +13473,8 @@
<p>Both attributes can be either strings,
<code>CanvasGradient</code>s, or <code>CanvasPattern</code>s. On
- setting, strings should be parsed as CSS <color> values and
- the color assigned, and <code>CanvasGradient</code> and
+ setting, strings must be parsed as CSS <color> values and the
+ color assigned, and <code>CanvasGradient</code> and
<code>CanvasPattern</code> objects must be assigned themselves. <a
href="#refsCSS3COLOR">[CSS3COLOR]</a> If the value is a string but
is not a valid color, or is neither a string, a
@@ -13503,10 +13503,10 @@
U+0029 RIGHT PARENTHESIS.</p>
<p>Otherwise, if it is not a color but a <code>CanvasGradient</code>
- or <code>CanvasPattern</code>, then an object supporting those
- interfaces 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>
+ 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
@@ -13517,12 +13517,16 @@
gradients, both represented by objects implementing the opaque
<dfn><code>CanvasGradient</code></dfn> interface.</p>
- <p>Once a gradient has been created (see below), stops must be
- placed along it to define how the colors are distributed along the
- gradient. Between each such stop, the colors and the alpha component
- must be interpolated over the RGBA space to find the color to use at
- that offset. Immediately before the 0 offset and immediately after
- the 1 offset, transparent black stops are be assumed.</p>
+ <p>Once a gradient has been created (see below), stops are placed
+ along it to define how the colors are distributed along the
+ gradient. The color of the gradient at each stop is the color
+ specified for that stop. Between each such stop, the colors and the
+ alpha component must be linearly interpolated over the RGBA space
+ without premultiplying the alpha value to find the color to use at
+ that offset. Before the first stop, the color must be the color of
+ the first stop. After the last stop, the color must be the color of
+ the last stop. When there are no stops, the gradient is transparent
+ black.</p>
<p>The <dfn
title="dom-canvasgradient-addColorStop"><code>addColorStop(<var
@@ -13532,11 +13536,18 @@
greater than 1 then an <code>INDEX_SIZE_ERR</code> exception must be
raised. If the <var title="">color</var> cannot be parsed as a CSS
color, then a <code>SYNTAX_ERR</code> exception must be raised.
- Otherwise, the gradient must be updated with the new stop
- information.</p>
+ Otherwise, the gradient must have a new stop placed, at offset <var
+ title="">offset</var> relative to the whole gradient, and with the
+ color obtained by parsing <var title="">color</var> as a CSS
+ <color> value. If multiple stops are placed at the same place
+ on a gradient, they must be placed in the order added, with the
+ first one closest to the start of the gradient, and each subsequent
+ one infinitesimally further along towards the end point (in effect
+ causing all but the first and last stop added at each point to be
+ ignored).</p>
- <p>The <dfn title="createLinearGradient"><code
- title="dom-context-2d-createLinearGradient">createLinearGradient(<var
+ <p>The <dfn
+ title="dom-context-2d-createLinearGradient"><code>createLinearGradient(<var
title="">x0</var>, <var title="">y0</var>, <var title="">x1</var>,
<var title="">y1</var>)</code></dfn> method takes four arguments,
representing the start point (<var title="">x0</var>, <var
@@ -13545,16 +13556,23 @@
must return a linear <code>CanvasGradient</code> initialised with
that line.</p>
- <p>Linear gradients must be rendered such that at the starting point
- on the canvas the color at offset 0 is used, that at the ending
- point the color at offset 1 is used, that all points on a line
- perpendicular to the line between the start and end points have the
- color at the point where those two lines cross (interpolation
- happening as described above), and that any points beyond the start
- or end points are a transparent black.</p>
+ <p>Linear gradients must be rendered such that at and before the
+ starting point on the canvas the color at offset 0 is used, that at
+ and after the ending point the color at offset 1 is used, and that
+ all points on a line perpendicular to the line that crosses the
+ start and end points have the color at the point where those two
+ lines cross (with the colors coming from the interpolation described
+ above).</p>
- <p>The <dfn title="createRadialGradient"><code
- title="dom-context-2d-createRadialGradient">createRadialGradient(<var
+ <p>If <span><var title="">x<sub>0</sub></var> = <var
+ title="">x<sub>1</sub></var></span> and <span><var
+ title="">y<sub>0</sub></var> = <var
+ title="">y<sub>1</sub></var></span>, then the linear gradient must
+ paint nothing.</p> <!-- XXX could make this paint the start colour,
+ or the end colour, or raise an exception -->
+
+ <p>The <dfn
+ title="dom-context-2d-createRadialGradient"><code>createRadialGradient(<var
title="">x0</var>, <var title="">y0</var>, <var title="">r0</var>,
<var title="">x1</var>, <var title="">y1</var>, <var
title="">r1</var>)</code></dfn> method takes six arguments, the
@@ -13564,26 +13582,82 @@
with origin (<var title="">x1</var>, <var title="">y1</var>) and
radius <var title="">r1</var>. The values are in coordinate space
units. The method must return a radial <code>CanvasGradient</code>
- initialised with those two circles.</p>
+ initialised with those two circles. If either of <var
+ title="">r0</var> or <var title="">r1</var> are negative, an
+ <code>INDEX_SIZE_ERR</code> exception must be raised.</p>
- <p>Radial gradients must be rendered such that a cone is created
- from the two circles, so that at the circumference of the starting
- circle the color at offset 0 is used, that at the circumference
- around the ending circle the color at offset 1 is used, that the
- circumference of a circle drawn a certain fraction of the way along
- the line between the two origins with a radius the same fraction of
- the way between the two radii has the color at that offset
- (interpolation happening as described above), that the end circle
- appear to be above the start circle when the end circle is not
- completely enclosed by the start circle, that the end circle be
- filled by the color at offset 1, and that any points not described
- by the gradient are a transparent black.</p>
+ <p>Radial gradients must be rendered by following these steps:</p>
- <p>If a gradient has no stops defined, then the gradient must be
- treated as a solid transparent black. Gradients are, naturally, only
- painted where the stroking or filling effect requires that they be
- drawn.</p>
+ <ol>
+ <li>
+
+ <p>Let <span>x(<var title="">ω</var>) = (<var
+ title="">x<sub>1</sub></var>-<var
+ title="">x<sub>0</sub></var>)<var
+ title="">ω</var> + <var
+ title="">x<sub>0</sub></var></span></p>
+
+ <p>Let <span>y(<var title="">ω</var>) = (<var
+ title="">y<sub>1</sub></var>-<var
+ title="">y<sub>0</sub></var>)<var
+ title="">ω</var> + <var
+ title="">y<sub>0</sub></var></span></p>
+
+ <p>Let <span>r(<var title="">ω</var>) = (<var
+ title="">r<sub>1</sub></var>-<var
+ title="">r<sub>0</sub></var>)<var
+ title="">ω</var> + <var
+ title="">r<sub>0</sub></var></span></p>
+
+ <p>Let the color at <var title="">ω</var> be the color of
+ the gradient at offset 0.0 for all values of <var
+ title="">ω</var> less than 0.0, the color at offset 1.0 for
+ all values of <var title="">ω</var> greater than 1.0, and
+ the color at the given offset for values of <var
+ title="">ω</var> in the range <span>0.0 ≤ <var
+ title="">ω</var> ≤ 1.0</span>
+
+ </li>
+
+ <li><p>For all values of <var title="">ω</var> where
+ <span>r(<var title="">ω</var>) > 0</span>,
+ starting with the value of <var title="">ω</var> nearest to
+ positive infinity and ending with the value of <var
+ title="">ω</var> nearest to negative infinity, draw the
+ circumference of the circle with radius of radius <span>r(<var
+ title="">ω</var>)</span> at position (<span>x(<var
+ title="">ω</var>)</span>, <span>y(<var
+ title="">ω</var>)</span>), with the color at <var
+ title="">ω</var>, but only painting on the parts of the
+ canvas that have not yet been painted on by earlier circles in this
+ step for this rendering of the gradient.</p></li>
+
+ </ol>
+
+ <p>If <span><var title="">x<sub>0</sub></var> = <var
+ title="">x<sub>1</sub></var></span> and <span><var
+ title="">y<sub>0</sub></var> = <var
+ title="">y<sub>1</sub></var></span> and <span><var
+ title="">r<sub>0</sub></var> = <var
+ title="">r<sub>1</sub></var></span>, then the radial gradient must
+ paint nothing.</p> <!-- XXX could make this paint the start colour,
+ or the end colour, or a circle of one in the other, or raise an
+ exception -->
+
+ <p class="note">This effectively creates a cone, touched by the two
+ circles defined in the creation of the gradient, with the part of
+ the cone before the start circle (0.0) using the color of the first
+ offset, the part of the cone after the end circle (1.0) using the
+ color of the last offset, and areas outside the cone untouched by
+ the gradient (transparent black). If the two circles overlap, the
+ effect is as if the second (end) circle is painted on top of the
+ first circle. The end circle is always filled with the color of the
+ last stop.</p>
+
+ <p>Gradients must only be painted where the relevant stroking or
+ filling effects requires that they be drawn.</p>
+
<p>Support for actually painting gradients is optional. Instead of
painting the gradients, user agents may instead just paint the first
stop's color. However, <code
@@ -13596,8 +13670,7 @@
<dfn><code>CanvasPattern</code></dfn> interface.</p>
<p>To create objects of this type, the <dfn
- title="createPattern"><code
- title="dom-context-2d-createPattern">createPattern(image,
+ title="dom-context-2d-createPattern"><code>createPattern(image,
repetition)</code></dfn> method is used. The first argument gives
the image to use as the pattern (either an
<code>HTMLImageElement</code> or an <code>HTMLCanvasElement</code>).
@@ -35562,18 +35635,19 @@
Sivonen, Henrik Lied, Ignacio Javier, J. King, James Graham, James M
Snell, James Perrett, Jan-Klaas Kollhof, Jasper Bryant-Greene, Jeff
Cutsinger, Jens Bannmann, Joel Spolsky, John Harding, Johnny
- Stenback, Jon Perlow, Jonathan Worent, Jorgen Horstink, Joshua
- Randall, Jukka K. Korpela, Kai Hendry, <!-- Keryx Web, = Lars
- Gunther --> Kornel Lesinski, 黒澤剛志
- (KUROSAWA Takeshi), Lachlan Hunt, Larry Page, Lars Gunther, Laurens
- Holst, Lenny Domnitser, Léonard Bouchet, Leons Petrazickis,
- Logan<!-- on moz irc -->, Maciej Stachowiak, Malcolm Rowe, Mark
- Nottingham, Mark Schenk, Martijn Wargers, Martin Atkins, Martin
- Honnen, Mathieu Henri, Matthew Mastracci, Matthew Raymond, Matthew
- Thomas, Mattias Waldau, Max Romantschuk, Michael 'Ratt' Iannarelli,
- Michael A. Nachbaur, Michael Gratton, Michael Powers, Michel Fortin,
- Mihai Şucan<!-- from ROBO Design -->, Mike Dierken<!--
- S. Mike Dierken -->, Mike Dixon, Mike Schinkel, Mike Shaver, Mikko
+ Stenback, Jon Perlow, Jonathan Worent, Jorgen Horstink, Josh
+ Levenberg, Joshua Randall, Jukka K. Korpela, Kai Hendry, <!-- Keryx
+ Web, = Lars Gunther --> Kornel Lesinski,
+ 黒澤剛志 (KUROSAWA Takeshi), Lachlan Hunt,
+ Larry Page, Lars Gunther, Laurens Holst, Lenny Domnitser,
+ Léonard Bouchet, Leons Petrazickis, Logan<!-- on moz irc -->,
+ Maciej Stachowiak, Malcolm Rowe, Mark Nottingham, Mark Schenk,
+ Martijn Wargers, Martin Atkins, Martin Honnen, Mathieu Henri,
+ Matthew Mastracci, Matthew Raymond, Matthew Thomas, Mattias Waldau,
+ Max Romantschuk, Michael 'Ratt' Iannarelli, Michael A. Nachbaur,
+ Michael Gratton, Michael Powers, Michel Fortin, Mihai
+ Şucan<!-- from ROBO Design -->, Mike Dierken<!-- S. Mike
+ Dierken -->, Mike Dixon, Mike Schinkel, Mike Shaver, Mikko
Rantalainen, Neil Deakin, Olav Junker Kjær, Philip Taylor,
Rajas Moonka, Rimantas Liubertas, Robert O'Callahan, Robert Sayre,
Roman Ivanov, S. Mike Dierken, Sam Ruby, Sean Knapp, Shadow2531,
More information about the Commit-Watchers
mailing list