[html5] r7022 - [e] (0) Rearrange and retitle sections in preparation for Path primitives Affect [...]
whatwg at whatwg.org
whatwg at whatwg.org
Wed Mar 7 14:53:22 PST 2012
Author: ianh
Date: 2012-03-07 14:53:20 -0800 (Wed, 07 Mar 2012)
New Revision: 7022
Modified:
complete.html
index
source
Log:
[e] (0) Rearrange and retitle sections in preparation for Path primitives
Affected topics: Canvas
Modified: complete.html
===================================================================
--- complete.html 2012-03-07 00:40:51 UTC (rev 7021)
+++ complete.html 2012-03-07 22:53:20 UTC (rev 7022)
@@ -600,19 +600,20 @@
<ol>
<li><a href=#the-canvas-state><span class=secno>4.8.11.1.1 </span>The canvas state</a></li>
<li><a href=#transformations><span class=secno>4.8.11.1.2 </span>Transformations</a></li>
- <li><a href=#compositing><span class=secno>4.8.11.1.3 </span>Compositing</a></li>
- <li><a href=#colors-and-styles><span class=secno>4.8.11.1.4 </span>Colors and styles</a></li>
- <li><a href=#line-styles><span class=secno>4.8.11.1.5 </span>Line styles</a></li>
- <li><a href=#shadows><span class=secno>4.8.11.1.6 </span>Shadows</a></li>
- <li><a href=#simple-shapes-(rectangles)><span class=secno>4.8.11.1.7 </span>Simple shapes (rectangles)</a></li>
- <li><a href=#complex-shapes-(paths)><span class=secno>4.8.11.1.8 </span>Complex shapes (paths)</a></li>
- <li><a href=#the-current-default-path><span class=secno>4.8.11.1.9 </span>The current default path</a></li>
- <li><a href=#text-0><span class=secno>4.8.11.1.10 </span>Text</a></li>
- <li><a href=#images><span class=secno>4.8.11.1.11 </span>Images</a></li>
- <li><a href=#pixel-manipulation><span class=secno>4.8.11.1.12 </span>Pixel manipulation</a></li>
- <li><a href=#drawing-model><span class=secno>4.8.11.1.13 </span>Drawing model</a></li>
- <li><a href=#best-practices><span class=secno>4.8.11.1.14 </span>Best practices</a></li>
- <li><a href=#examples><span class=secno>4.8.11.1.15 </span>Examples</a></ol></li>
+ <li><a href=#line-styles><span class=secno>4.8.11.1.3 </span>Line styles</a></li>
+ <li><a href=#text-styles><span class=secno>4.8.11.1.4 </span>Text styles</a></li>
+ <li><a href=#building-paths><span class=secno>4.8.11.1.5 </span>Building paths</a></li>
+ <li><a href=#fill-and-stroke-styles><span class=secno>4.8.11.1.6 </span>Fill and stroke styles</a></li>
+ <li><a href=#the-current-default-path><span class=secno>4.8.11.1.7 </span>The current default path</a></li>
+ <li><a href=#drawing-rectangles-to-the-canvas><span class=secno>4.8.11.1.8 </span>Drawing rectangles to the canvas</a></li>
+ <li><a href=#drawing-text-to-the-canvas><span class=secno>4.8.11.1.9 </span>Drawing text to the canvas</a></li>
+ <li><a href=#drawing-images-to-the-canvas><span class=secno>4.8.11.1.10 </span>Drawing images to the canvas</a></li>
+ <li><a href=#pixel-manipulation><span class=secno>4.8.11.1.11 </span>Pixel manipulation</a></li>
+ <li><a href=#compositing><span class=secno>4.8.11.1.12 </span>Compositing</a></li>
+ <li><a href=#shadows><span class=secno>4.8.11.1.13 </span>Shadows</a></li>
+ <li><a href=#drawing-model><span class=secno>4.8.11.1.14 </span>Drawing model</a></li>
+ <li><a href=#best-practices><span class=secno>4.8.11.1.15 </span>Best practices</a></li>
+ <li><a href=#examples><span class=secno>4.8.11.1.16 </span>Examples</a></ol></li>
<li><a href=#color-spaces-and-color-correction><span class=secno>4.8.11.2 </span>Color spaces and color correction</a></li>
<li><a href=#security-with-canvas-elements><span class=secno>4.8.11.3 </span>Security with <code>canvas</code> elements</a></ol></li>
<li><a href=#the-map-element><span class=secno>4.8.12 </span>The <code>map</code> element</a></li>
@@ -1108,7 +1109,7 @@
<li><a href=#optional-tags><span class=secno>12.1.2.4 </span>Optional tags</a></li>
<li><a href=#element-restrictions><span class=secno>12.1.2.5 </span>Restrictions on content models</a></li>
<li><a href=#cdata-rcdata-restrictions><span class=secno>12.1.2.6 </span>Restrictions on the contents of raw text and RCDATA elements</a></ol></li>
- <li><a href=#text-1><span class=secno>12.1.3 </span>Text</a>
+ <li><a href=#text-0><span class=secno>12.1.3 </span>Text</a>
<ol>
<li><a href=#newlines><span class=secno>12.1.3.1 </span>Newlines</a></ol></li>
<li><a href=#character-references><span class=secno>12.1.4 </span>Character references</a></li>
@@ -1271,7 +1272,7 @@
<li><a href=#replaced-elements><span class=secno>14.4 </span>Replaced elements</a>
<ol>
<li><a href=#embedded-content-2><span class=secno>14.4.1 </span>Embedded content</a></li>
- <li><a href=#images-0><span class=secno>14.4.2 </span>Images</a></li>
+ <li><a href=#images><span class=secno>14.4.2 </span>Images</a></li>
<li><a href=#attributes-for-embedded-content-and-images><span class=secno>14.4.3 </span>Attributes for embedded content and images</a></li>
<li><a href=#image-maps-0><span class=secno>14.4.4 </span>Image maps</a></li>
<li><a href=#toolbars-0><span class=secno>14.4.5 </span>Toolbars</a></ol></li>
@@ -35242,560 +35243,10 @@
</div>
- <h6 id=compositing><span class=secno>4.8.11.1.3 </span>Compositing</h6>
- <dl class=domintro><dt><var title="">context</var> . <code title=dom-context-2d-globalAlpha><a href=#dom-context-2d-globalalpha>globalAlpha</a></code> [ = <var title="">value</var> ]</dt>
- <dd>
+ <h6 id=line-styles><span class=secno>4.8.11.1.3 </span>Line styles</h6>
- <p>Returns the current alpha value applied to rendering operations.</p>
-
- <p>Can be set, to change the alpha value. Values outside of the
- range 0.0 .. 1.0 are ignored.</p>
-
- </dd>
-
-
- <dt><var title="">context</var> . <code title=dom-context-2d-globalCompositeOperation><a href=#dom-context-2d-globalcompositeoperation>globalCompositeOperation</a></code> [ = <var title="">value</var> ]</dt>
-
- <dd>
-
- <p>Returns the current composition operation, from the list below.</p>
-
- <p>Can be set, to change the composition operation. Unknown values
- are ignored.</p>
-
- </dd>
-
- </dl><div class=impl>
-
- <p>All drawing operations are affected by the global compositing
- attributes, <code title=dom-context-2d-globalAlpha><a href=#dom-context-2d-globalalpha>globalAlpha</a></code> and <code title=dom-context-2d-globalCompositeOperation><a href=#dom-context-2d-globalcompositeoperation>globalCompositeOperation</a></code>.</p>
-
- <!-- conformance criteria for painting are described in the "drawing
- model" section below -->
-
- <p>The <dfn id=dom-context-2d-globalalpha title=dom-context-2d-globalAlpha><code>globalAlpha</code></dfn>
- attribute gives an alpha value that is applied to shapes and images
- before they are composited onto the canvas. The value must be in the
- range from 0.0 (fully transparent) to 1.0 (no additional
- transparency). If an attempt is made to set the attribute to a value
- outside this range, including Infinity and Not-a-Number (NaN)
- values, the attribute must retain its previous value. When the
- context is created, the <code title=dom-context-2d-globalAlpha><a href=#dom-context-2d-globalalpha>globalAlpha</a></code> attribute must
- initially have the value 1.0.</p>
-
- <p>The <dfn id=dom-context-2d-globalcompositeoperation title=dom-context-2d-globalCompositeOperation><code>globalCompositeOperation</code></dfn>
- attribute sets how shapes and images are drawn onto the existing
- bitmap, once they have had <code title=dom-context-2d-globalAlpha><a href=#dom-context-2d-globalalpha>globalAlpha</a></code> and the
- current transformation matrix applied. It must be set to a value
- from the following list. In the descriptions below, the source
- image, <var title="">A</var>, is the shape or image being rendered,
- and the destination image, <var title="">B</var>, is the current
- state of the bitmap.</p>
-
- </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>. <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.</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>. <span class=note>Display the
- source image wherever both the source image and destination image
- 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>. <span class=note>Display the
- source image wherever the source image is opaque and the
- destination image is transparent. Display transparency
- 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>. <span class=note>Display the
- source image wherever the source image is opaque. Display the
- 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>. <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>. <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>. <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>. <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><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>. <span class=note>Display the
- sum of the source image and destination image, with color values
- approaching 255 (100%) 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). <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>. <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>
-
- <dd class=impl>Vendor-specific extensions to the list of
- composition operators should use this syntax.</dd>
-
- </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 <a href=#case-sensitive>case-sensitive</a> match for one of the values given
- above.</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>
-
- <p>When the context is created, the <code title=dom-context-2d-globalCompositeOperation><a href=#dom-context-2d-globalcompositeoperation>globalCompositeOperation</a></code>
- attribute must initially have the value
- <code>source-over</code>.</p>
-
- </div>
-
-
- <h6 id=colors-and-styles><span class=secno>4.8.11.1.4 </span>Colors and styles</h6>
-
- <dl class=domintro><dt><var title="">context</var> . <code title=dom-context-2d-strokeStyle><a href=#dom-context-2d-strokestyle>strokeStyle</a></code> [ = <var title="">value</var> ]</dt>
-
- <dd>
-
- <p>Returns the current style used for stroking shapes.</p>
-
- <p>Can be set, to change the stroke style.</p>
-
- <p>The style can be either a string containing a CSS color, or a
- <code><a href=#canvasgradient>CanvasGradient</a></code> or <code><a href=#canvaspattern>CanvasPattern</a></code>
- object. Invalid values are ignored.</p>
-
- </dd>
-
- <dt><var title="">context</var> . <code title=dom-context-2d-fillStyle><a href=#dom-context-2d-fillstyle>fillStyle</a></code> [ = <var title="">value</var> ]</dt>
-
- <dd>
-
- <p>Returns the current style used for filling shapes.</p>
-
- <p>Can be set, to change the fill style.</p>
-
- <p>The style can be either a string containing a CSS color, or a
- <code><a href=#canvasgradient>CanvasGradient</a></code> or <code><a href=#canvaspattern>CanvasPattern</a></code>
- object. Invalid values are ignored.</p>
-
- </dd>
-
- </dl><div class=impl>
-
- <!-- v6 feature requests:
-
- * Getting and setting colours by component to bypass the CSS value parsing.
-
- Either:
- context.fillStyle.red += 1;
-
- Or:
- var array = context.fillStyle;
- array[1] += 1;
- context.fillStyle = array;
-
- * A more performant way of setting colours in general, e.g.:
-
- context.setFillColor(r,g,b,a) // already supported by webkit
-
- Or:
-
- context.fillStyle = 0xRRGGBBAA; // set a 32bit int directly
-
- * fill rule for deciding between winding and even-odd algorithms.
- SVG has fill-rule: nonzero | evenodd
- http://www.w3.org/TR/SVG/painting.html#FillProperties
- see also mozFillRule: http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2011-June/032002.html
-
- -->
-
- <p>The <dfn id=dom-context-2d-strokestyle title=dom-context-2d-strokeStyle><code>strokeStyle</code></dfn>
- attribute represents the color or style to use for the lines around
- shapes, and the <dfn id=dom-context-2d-fillstyle title=dom-context-2d-fillStyle><code>fillStyle</code></dfn>
- attribute represents the color or style to use inside the
- shapes.</p>
-
- <p>Both attributes can be either strings,
- <code><a href=#canvasgradient>CanvasGradient</a></code>s, or <code><a href=#canvaspattern>CanvasPattern</a></code>s. On
- setting, strings must be <a href=#parsed-as-a-css-color-value title="parsed as a CSS <color>
- value">parsed as CSS <color> values</a> and the color
- assigned, and <code><a href=#canvasgradient>CanvasGradient</a></code> and
- <code><a href=#canvaspattern>CanvasPattern</a></code> objects must be assigned themselves. <a href=#refsCSSCOLOR>[CSSCOLOR]</a> If the value is a string but
- cannot be <a href=#parsed-as-a-css-color-value>parsed as a CSS <color> value</a>, or is
- neither a string, a <code><a href=#canvasgradient>CanvasGradient</a></code>, nor a
- <code><a href=#canvaspattern>CanvasPattern</a></code>, then it must be ignored, and the
- attribute must retain its previous value.</p>
-
- <p>When set to a <code><a href=#canvaspattern>CanvasPattern</a></code> or
- <code><a href=#canvasgradient>CanvasGradient</a></code> object, the assignment is
- <a href=#live>live</a>, meaning that changes made to the object after the
- assignment do affect subsequent stroking or filling of shapes.</p>
-
- <p>On getting, if the value is a color, then the <a href=#serialization-of-a-color title="serialization of a color">serialization of the color</a>
- must be returned. Otherwise, if it is not a color but a
- <code><a href=#canvasgradient>CanvasGradient</a></code> or <code><a href=#canvaspattern>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>
-
- <p>The <dfn id=serialization-of-a-color>serialization 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, if the alpha value is greater than zero then a
- U+002E FULL STOP (representing the decimal point), if the alpha
- value is greater than zero then one or more digits in the range 0-9
- (U+0030 to U+0039) representing the fractional part of the alpha<!--
- value with no trailing zeros (implied by next sentence)-->, and
- finally a U+0029 RIGHT PARENTHESIS. User agents must express the
- fractional part of the alpha value, if any, with the level of
- precision necessary for the alpha value, when reparsed, to be
- interpreted as the same alpha value.</p> <!-- if people complain
- this is unreadable, expand it into a <dl> with two nested <ol>s -->
-
- <p>When the context is created, the <code title=dom-context-2d-strokeStyle><a href=#dom-context-2d-strokestyle>strokeStyle</a></code> and <code title=dom-context-2d-fillStyle><a href=#dom-context-2d-fillstyle>fillStyle</a></code> attributes must
- initially have the string value <code title="">#000000</code>.</p>
-
- <p>When the value is a color, it must not be affected by the
- transformation matrix when used to draw on the canvas.</p> <!-- so
- singular matrices don't affect solid color fillStyles -->
-
- </div>
-
- <hr><p>There are two types of gradients, linear gradients and radial
- gradients, both represented by objects implementing the opaque
- <code><a href=#canvasgradient>CanvasGradient</a></code> interface.</p>
-
- <p id=interpolation>Once a gradient has been created (see below),
- stops are placed along it to define how the colors are distributed
- along the gradient. <span class=impl>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.</span></p>
-
- <dl class=domintro><dt><var title="">gradient</var> . <code title=dom-canvasgradient-addColorStop><a href=#dom-canvasgradient-addcolorstop>addColorStop</a></code>(<var title="">offset</var>, <var title="">color</var>)</dt>
-
- <dd>
-
- <p>Adds a color stop with the given color to the gradient at the
- given offset. 0.0 is the offset at one end of the gradient, 1.0 is
- the offset at the other end.</p>
-
- <p>Throws an <code><a href=#indexsizeerror>IndexSizeError</a></code> exception if the offset
- is out of range. Throws a <code><a href=#syntaxerror>SyntaxError</a></code> exception if the
- color cannot be parsed.</p>
-
- </dd>
-
- <dt><var title="">gradient</var> = <var title="">context</var> . <code title=dom-context-2d-createLinearGradient><a href=#dom-context-2d-createlineargradient>createLinearGradient</a></code>(<var title="">x0</var>, <var title="">y0</var>, <var title="">x1</var>, <var title="">y1</var>)</dt>
-
- <dd>
-
- <p>Returns a <code><a href=#canvasgradient>CanvasGradient</a></code> object that represents a
- linear gradient that paints along the line given by the
- coordinates represented by the arguments.</p>
-
- <p>If any of the arguments are not finite numbers, throws a
- <code><a href=#notsupportederror>NotSupportedError</a></code> exception.</p>
-
- </dd>
-
- <dt><var title="">gradient</var> = <var title="">context</var> . <code title=dom-context-2d-createRadialGradient><a href=#dom-context-2d-createradialgradient>createRadialGradient</a></code>(<var title="">x0</var>, <var title="">y0</var>, <var title="">r0</var>, <var title="">x1</var>, <var title="">y1</var>, <var title="">r1</var>)</dt>
-
- <dd>
-
- <p>Returns a <code><a href=#canvasgradient>CanvasGradient</a></code> object that represents a
- radial gradient that paints along the cone given by the circles
- represented by the arguments.</p>
-
- <p>If any of the arguments are not finite numbers, throws a
- <code><a href=#notsupportederror>NotSupportedError</a></code> exception. If either of the radii
- are negative, throws an <code><a href=#indexsizeerror>IndexSizeError</a></code> exception.</p>
-
- </dd>
-
- </dl><div class=impl>
-
- <p>The <dfn id=dom-canvasgradient-addcolorstop title=dom-canvasgradient-addColorStop><code>addColorStop(<var title="">offset</var>, <var title="">color</var>)</code></dfn>
- method on the <code><a href=#canvasgradient>CanvasGradient</a></code> interface adds a new stop
- to a gradient. If the <var title="">offset</var> is less than 0,
- greater than 1, infinite, or NaN, then an
- <code><a href=#indexsizeerror>IndexSizeError</a></code> exception must be thrown. If the <var title="">color</var> cannot be <a href=#parsed-as-a-css-color-value>parsed as a CSS <color>
- value</a>, then a <code><a href=#syntaxerror>SyntaxError</a></code> exception must be
- thrown. 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 added at the same
- offset 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 id=dom-context-2d-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
- that represent the start point (<var title="">x0</var>, <var title="">y0</var>) and end point (<var title="">x1</var>, <var title="">y1</var>) of the gradient. If any of the arguments to <code title=dom-context-2d-createLinearGradient><a href=#dom-context-2d-createlineargradient>createLinearGradient()</a></code>
- are infinite or NaN, the method must throw a
- <code><a href=#notsupportederror>NotSupportedError</a></code> exception. Otherwise, the method must
- return a linear <code><a href=#canvasgradient>CanvasGradient</a></code> initialized with the
- specified line.</p>
-
- <p>Linear gradients must be rendered such 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 <a href=#interpolation>interpolation and
- extrapolation</a> described above). The points in the linear
- gradient must be transformed as described by the <a href=#transformations title=dom-context-2d-transformation>current transformation
- matrix</a> when rendering.</p>
-
- <p>If <span title=""><var title="">x0</var> = <var title="">x1</var></span> and <span title=""><var title="">y0</var> = <var title="">y1</var></span>, then
- the linear gradient must paint nothing.</p>
-
- <p>The <dfn id=dom-context-2d-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 three representing the start circle with origin (<var title="">x0</var>, <var title="">y0</var>) and radius <var title="">r0</var>, and the last three representing the end circle
- with origin (<var title="">x1</var>, <var title="">y1</var>) and
- radius <var title="">r1</var>. The values are in coordinate space
- units. If any of the arguments are infinite or NaN, a
- <code><a href=#notsupportederror>NotSupportedError</a></code> exception must be thrown. If either
- of <var title="">r0</var> or <var title="">r1</var> are negative, an
- <code><a href=#indexsizeerror>IndexSizeError</a></code> exception must be thrown. Otherwise,
- the method must return a radial <code><a href=#canvasgradient>CanvasGradient</a></code>
- initialized with the two specified circles.</p>
-
- <p>Radial gradients must be rendered by following these steps:</p>
-
- <ol><li><p>If <span title=""><var title="">x<sub>0</sub></var> = <var title="">x<sub>1</sub></var></span> and <span title=""><var title="">y<sub>0</sub></var> = <var title="">y<sub>1</sub></var></span> and <span title=""><var title="">r<sub>0</sub></var> = <var title="">r<sub>1</sub></var></span>, then the radial gradient must
- paint nothing. Abort these steps.</li>
-
- <li>
-
- <p>Let <span title="">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 title="">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 title="">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 at
- that position on the gradient (with the colors coming from the <a href=#interpolation>interpolation and extrapolation</a>
- described above).</p>
-
- </li>
-
- <li><p>For all values of <var title="">ω</var> where <span title="">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 <span title="">r(<var title="">ω</var>)</span> at position (<span title="">x(<var title="">ω</var>)</span>, <span title="">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.</li>
-
- </ol><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).</p>
-
- <p>The resulting radial gradient must then be transformed as
- described by the <a href=#transformations title=dom-context-2d-transformation>current
- transformation matrix</a> when rendering.</p>
-
- <p>Gradients must be painted only where the relevant stroking or
- filling effects requires that they be drawn.</p>
-
- </div>
-
- <hr><p>Patterns are represented by objects implementing the opaque
- <code><a href=#canvaspattern>CanvasPattern</a></code> interface.</p>
-
- <dl class=domintro><dt><var title="">pattern</var> = <var title="">context</var> . <code title=dom-context-2d-createPattern><a href=#dom-context-2d-createpattern>createPattern</a></code>(<var title="">image</var>, <var title="">repetition</var>)</dt>
-
- <dd>
-
- <p>Returns a <code><a href=#canvaspattern>CanvasPattern</a></code> object that uses the given image
- and repeats in the direction(s) given by the <var title="">repetition</var> argument.</p>
-
- <p>The allowed values for <var title="">repetition</var> are <code title="">repeat</code> (both directions), <code title="">repeat-x</code> (horizontal only), <code title="">repeat-y</code> (vertical only), and <code title="">no-repeat</code> (neither). If the <var title="">repetition</var> argument is empty, the value <code title="">repeat</code> is used.</p>
-
- <p>If the image has no image data, throws an
- <code><a href=#invalidstateerror>InvalidStateError</a></code> exception. If the second argument
- isn't one of the allowed values, throws a <code><a href=#syntaxerror>SyntaxError</a></code>
- exception. If the image isn't yet fully decoded, then the method
- returns null.</p>
-
- </dd>
-
- </dl><div class=impl>
-
- <p>To create objects of this type, the <dfn id=dom-context-2d-createpattern title=dom-context-2d-createPattern><code>createPattern(<var title="">image</var>, <var title="">repetition</var>)</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>,
- <code><a href=#htmlcanvaselement>HTMLCanvasElement</a></code>, or <code><a href=#htmlvideoelement>HTMLVideoElement</a></code>
- object). Modifying this image after calling the <code title=dom-context-2d-createPattern><a href=#dom-context-2d-createpattern>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 title="">no-repeat</code>. If the empty string is specified,
- <code title="">repeat</code> must be assumed. If an unrecognized value
- is given, then the user agent must throw a <code><a href=#syntaxerror>SyntaxError</a></code>
- exception. User agents must recognize the four values described above
- exactly (e.g. they must not do case folding). Except as specified
- below, the method must return a <code><a href=#canvaspattern>CanvasPattern</a></code> object
- suitably initialized.</p>
-
- <p>The <var title="">image</var> argument is an instance of either
- <code><a href=#htmlimageelement>HTMLImageElement</a></code>, <code><a href=#htmlcanvaselement>HTMLCanvasElement</a></code>, or
- <code><a href=#htmlvideoelement>HTMLVideoElement</a></code>.</p> <!-- drawImage() has an equivalent
- paragraph -->
-
- <p>If the <var title="">image</var> argument is an
- <code><a href=#htmlimageelement>HTMLImageElement</a></code> object that is not <a href=#img-good title=img-good>fully decodable</a>, or if the <var title="">image</var> argument is an <code><a href=#htmlvideoelement>HTMLVideoElement</a></code>
- object whose <code title=dom-media-readyState><a href=#dom-media-readystate>readyState</a></code>
- attribute is either <code title=dom-media-HAVE_NOTHING><a href=#dom-media-have_nothing>HAVE_NOTHING</a></code> or <code title=dom-media-HAVE_METADATA><a href=#dom-media-have_metadata>HAVE_METADATA</a></code>, then the
- implementation must return null.</p> <!-- drawImage() has an
- equivalent paragraph -->
-
- <p>If the <var title="">image</var> argument is an
- <code><a href=#htmlcanvaselement>HTMLCanvasElement</a></code> object with either a horizontal
- dimension or a vertical dimension equal to zero, then the
- implementation must throw an <code><a href=#invalidstateerror>InvalidStateError</a></code>
- exception.</p>
- <!-- drawImage() has an equivalent paragraph -->
-
- <p>Patterns must be painted so that the top left of the first image
- is anchored at the origin of the coordinate space, and images are
- then repeated horizontally to the left and right, if the
- <code>repeat-x</code> string was specified, or vertically up and
- down, if the <code>repeat-y</code> string was specified, or in all
- four directions all over the canvas, if the <code>repeat</code>
- string was specified, to create the repeated pattern that is used
- for rendering. The images are not scaled by this process; one CSS
- pixel of the image must be painted on one coordinate space unit in
- generating the repeated pattern. When rendered, however, patterns
- must actually be painted only where the stroking or filling effect
- requires that they be drawn, and the repeated pattern must be
- affected by the current transformation matrix. Pixels not covered by
- the repeating pattern (if the <code>repeat</code> string was not
- specified) must be transparent black.</p>
-
- <p>If the original image data is a bitmap image, the value painted
- at a point in the area of the repetitions is computed by filtering
- the original image data. The user agent may use any filtering
- algorithm (for example bilinear interpolation or nearest-neighbor).
- When the filtering algorithm requires a pixel value from outside the
- original image data, it must instead use the value from wrapping the
- pixel's coordinates to the original image's dimensions. (That is,
- the filter uses 'repeat' behavior, regardless of the value of
- <var title="">repetition</var>.)
- <!-- drawImage() has a similar paragraph with different rules -->
-
- <p>When the <code title=dom-context-2d-createPattern><a href=#dom-context-2d-createpattern>createPattern()</a></code> method
- is passed an animated image as its <var title="">image</var>
- argument, the user agent must use the poster frame of the animation,
- or, if there is no poster frame, the first frame of the
- animation.</p>
- <!-- drawImage() has an equivalent paragraph -->
-
- <p>When the <var title="">image</var> argument is an
- <code><a href=#htmlvideoelement>HTMLVideoElement</a></code>, then the frame at the <a href=#current-playback-position>current
- playback position</a> must be used as the source image, and the
- source image's dimensions must be the <a href=#concept-video-intrinsic-width title=concept-video-intrinsic-width>intrinsic width</a> and
- <a href=#concept-video-intrinsic-height title=concept-video-intrinsic-height>intrinsic height</a>
- of the <a href=#media-resource>media resource</a> (i.e. after any aspect-ratio
- correction has been applied).</p>
- <!-- drawImage() has an equivalent paragraph -->
-
- <!--
- Requests for v5 features:
- * apply transforms to patterns, so you don't have to create
- transformed patterns manually by rendering them to an off-screen
- canvas then using that canvas as the pattern.
- -->
-
- </div>
-
- <div class=impl>
-
- <hr><p>If a radial gradient or repeated pattern is used when the
- transformation matrix is singular, the resulting style must be
- transparent black (otherwise the gradient or pattern would be
- collapsed to a point or line, leaving the other pixels undefined).
- Linear gradients and solid colors always define all points even with
- singular tranformation matrices.</p>
-
- </div>
-
-
-
- <h6 id=line-styles><span class=secno>4.8.11.1.5 </span>Line styles</h6>
-
<dl class=domintro><dt><var title="">context</var> . <code title=dom-context-2d-lineWidth><a href=#dom-context-2d-linewidth>lineWidth</a></code> [ = <var title="">value</var> ]</dt>
<dd>
@@ -35977,216 +35428,164 @@
</div>
- <h6 id=shadows><span class=secno>4.8.11.1.6 </span><dfn>Shadows</dfn></h6>
+ <h6 id=text-styles><span class=secno>4.8.11.1.4 </span>Text styles</h6>
- <p>All drawing operations are affected by the four global shadow
- attributes.</p>
+ <dl class=domintro><dt><var title="">context</var> . <code title=dom-context-2d-font><a href=#dom-context-2d-font>font</a></code> [ = <var title="">value</var> ]</dt>
- <dl class=domintro><dt><var title="">context</var> . <code title=dom-context-2d-shadowColor><a href=#dom-context-2d-shadowcolor>shadowColor</a></code> [ = <var title="">value</var> ]</dt>
-
<dd>
- <p>Returns the current shadow color.</p>
+ <p>Returns the current font settings.</p>
- <p>Can be set, to change the shadow color. Values that cannot be parsed as CSS colors are ignored.</p>
+ <p>Can be set, to change the font. The syntax is the same as for
+ the CSS 'font' property; values that cannot be parsed as CSS font
+ values are ignored.</p>
+ <p>Relative keywords and lengths are computed relative to the font
+ of the <code><a href=#the-canvas-element>canvas</a></code> element.</p>
+
</dd>
- <dt><var title="">context</var> . <code title=dom-context-2d-shadowOffsetX><a href=#dom-context-2d-shadowoffsetx>shadowOffsetX</a></code> [ = <var title="">value</var> ]</dt>
- <dt><var title="">context</var> . <code title=dom-context-2d-shadowOffsetY><a href=#dom-context-2d-shadowoffsety>shadowOffsetY</a></code> [ = <var title="">value</var> ]</dt>
+ <dt><var title="">context</var> . <code title=dom-context-2d-textAlign><a href=#dom-context-2d-textalign>textAlign</a></code> [ = <var title="">value</var> ]</dt>
<dd>
- <p>Returns the current shadow offset.</p>
+ <p>Returns the current text alignment settings.</p>
- <p>Can be set, to change the shadow offset. Values that are not finite numbers are ignored.</p>
+ <p>Can be set, to change the alignment. The possible values are
+ <code title="">start</code>, <code title="">end</code>, <code title="">left</code>, <code title="">right</code>, and <code title="">center</code>. Other values are ignored. The default is
+ <code title="">start</code>.</p>
</dd>
- <dt><var title="">context</var> . <code title=dom-context-2d-shadowBlur><a href=#dom-context-2d-shadowblur>shadowBlur</a></code> [ = <var title="">value</var> ]</dt>
+ <dt><var title="">context</var> . <code title=dom-context-2d-textBaseline><a href=#dom-context-2d-textbaseline>textBaseline</a></code> [ = <var title="">value</var> ]</dt>
<dd>
- <p>Returns the current level of blur applied to shadows.</p>
+ <p>Returns the current baseline alignment settings.</p>
- <p>Can be set, to change the blur level. Values that are not finite numbers greater than or equal to zero are ignored.</p>
+ <p>Can be set, to change the baseline alignment. The possible
+ values and their meanings are given below. Other values are
+ ignored. The default is <code title="">alphabetic</code>.</p>
</dd>
</dl><div class=impl>
- <p>The <dfn id=dom-context-2d-shadowcolor title=dom-context-2d-shadowColor><code>shadowColor</code></dfn>
- attribute sets the color of the shadow.</p>
+ <p>Objects that implement the <code><a href=#canvastext>CanvasText</a></code>
+ interface have attributes (defined in this section) that control how
+ text is laid out (rasterized or outlined) by the object.</p>
- <p>When the context is created, the <code title=dom-context-2d-shadowColor><a href=#dom-context-2d-shadowcolor>shadowColor</a></code> attribute
- initially must be fully-transparent black.</p>
+ <p>The <dfn id=dom-context-2d-font title=dom-context-2d-font><code>font</code></dfn> IDL
+ attribute, on setting, must be parsed the same way as the 'font'
+ property of CSS (but without supporting property-independent style
+ sheet syntax like 'inherit'), and the resulting font must be
+ assigned to the context, with the 'line-height' component forced to
+ 'normal', with the 'font-size' component converted to CSS pixels,
+ and with system fonts being computed to explicit values. If the new
+ value is syntactically incorrect (including using
+ property-independent style sheet syntax like 'inherit' or
+ 'initial'), then it must be ignored, without assigning a new font
+ value. <a href=#refsCSS>[CSS]</a></p>
- <p>On getting, the <a href=#serialization-of-a-color title="serialization of a
- color">serialization of the color</a> must be returned.</p>
+ <p>Font names must be interpreted in the context of the
+ <code><a href=#the-canvas-element>canvas</a></code> element's stylesheets; any fonts embedded using
+ <code title="">@font-face</code> must therefore be available once
+ they are loaded. (If a font is referenced before it is fully loaded,
+ then it must be treated as if it was an unknown font, falling back
+ to another as described by the relevant CSS specifications.) <a href=#refsCSSFONTS>[CSSFONTS]</a></p>
- <p>On setting, the new value must be <a href=#parsed-as-a-css-color-value>parsed as a CSS
- <color> value</a> and the color assigned. If the value
- cannot be parsed as a CSS <color> value then it must be
- ignored, and the attribute must retain its previous value. <a href=#refsCSSCOLOR>[CSSCOLOR]</a></p>
+ <!-- XXX Path objects don't have a canvas -->
- <p>The <dfn id=dom-context-2d-shadowoffsetx title=dom-context-2d-shadowOffsetX><code>shadowOffsetX</code></dfn>
- and <dfn id=dom-context-2d-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. They are
- not affected by the current transformation matrix.</p>
+ <p>Only vector fonts should be used by the user agent; if a user
+ agent were to use bitmap fonts then transformations would likely
+ make the font look very ugly.</p>
- <p>When the context is created, the shadow offset attributes must
- initially have the value <code>0</code>.</p>
+ <p>On getting, the <code title=dom-context-2d-font><a href=#dom-context-2d-font>font</a></code>
+ attribute must return the <a href=#serializing-a-css-value title="serializing a CSS
+ value">serialized form</a> of the current font of the context
+ (with no 'line-height' component). <a href=#refsCSSOM>[CSSOM]</a></p>
- <p>On getting, they must return their current value. On setting, the
- attribute being set must be set to the new value, except if the
- value is infinite or NaN, in which case the new value must be
- ignored.</p>
+ <div class=example>
- <p>The <dfn id=dom-context-2d-shadowblur title=dom-context-2d-shadowBlur><code>shadowBlur</code></dfn>
- attribute specifies the level of the blurring effect. (The units do
- not map to coordinate space units, and are not affected by the
- current transformation matrix.)</p>
+ <p>For example, after the following statement:</p>
- <p>When the context is created, the <code title=dom-context-2d-shadowBlur><a href=#dom-context-2d-shadowblur>shadowBlur</a></code> attribute must
- initially have the value <code>0</code>.</p>
+ <pre>context.font = 'italic 400 12px/2 Unknown Font, sans-serif';</pre>
- <p>On getting, the attribute must return its current value. On
- setting the attribute must be set to the new value, except if the
- value is negative, infinite or NaN, in which case the new value must
- be ignored.</p>
+ <p>...the expression <code title="">context.font</code> would
+ evaluate to the string "<code title="">italic 12px "Unknown Font", sans-serif</code>". The
+ "400" font-weight doesn't appear because that is the default
+ value. The line-height doesn't appear because it is forced to
+ "normal", the default value.</p>
- <p><dfn id=when-shadows-are-drawn title="when shadows are drawn">Shadows are only drawn
- if</dfn> the opacity component of the alpha component of the color
- of <code title=dom-context-2d-shadowColor><a href=#dom-context-2d-shadowcolor>shadowColor</a></code> is
- non-zero and either the <code title=dom-context-2d-shadowBlur><a href=#dom-context-2d-shadowblur>shadowBlur</a></code> is non-zero, or
- the <code title=dom-context-2d-shadowOffsetX><a href=#dom-context-2d-shadowoffsetx>shadowOffsetX</a></code>
- is non-zero, or the <code title=dom-context-2d-shadowOffsetY><a href=#dom-context-2d-shadowoffsety>shadowOffsetY</a></code> is
- non-zero.</p>
+ </div>
- <p class=critical>It is likely that this will change: browser
- vendors have indicated an interest in changing the processing model
- for shadows such that they only draw when the composition operator
- is "source-over" (the default). <a href=http://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2011-May/thread.html#31457>Read
- more...</a></p>
+ <p>When the object implementing the <code><a href=#canvastext>CanvasText</a></code>
+ interface is created, the font of the context must be set to 10px
+ sans-serif. When the 'font-size' component is set to lengths using
+ percentages, 'em' or 'ex' units, or the 'larger' or 'smaller'
+ keywords, these must be interpreted relative to the computed value
+ of the 'font-size' property of the corresponding <code><a href=#the-canvas-element>canvas</a></code>
+ element at the time that the attribute is set. When the
+ 'font-weight' component is set to the relative values 'bolder' and
+ 'lighter', these must be interpreted relative to the computed value
+ of the 'font-weight' property of the corresponding
+ <code><a href=#the-canvas-element>canvas</a></code> element at the time that the attribute is set.
+ If the computed values are undefined for a particular case (e.g.
+ because the <code><a href=#the-canvas-element>canvas</a></code> element is not <a href=#in-a-document>in a
+ <code>Document</code></a>), then the relative keywords must be
+ interpreted relative to the normal-weight 10px sans-serif
+ default.</p> <!-- XXX Path canvas issue again, twice -->
- <p><a href=#when-shadows-are-drawn>When shadows are drawn</a>, they must be rendered as follows:</p>
+ <p>The <dfn id=dom-context-2d-textalign title=dom-context-2d-textAlign><code>textAlign</code></dfn> IDL
+ attribute, on getting, must return the current value. On setting, if
+ the value is one of <code title="">start</code>, <code title="">end</code>, <code title="">left</code>, <code title="">right</code>, or <code title="">center</code>, then the
+ value must be changed to the new value. Otherwise, the new value
+ must be ignored. When the object implementing the
+ <code><a href=#canvastext>CanvasText</a></code> interface is created, the <code title=dom-context-2d-textAlign><a href=#dom-context-2d-textalign>textAlign</a></code> attribute must
+ initially have the value <code title="">start</code>.</p>
- <ol><li> <p>Let <var title="">A</var> be an infinite transparent black
- bitmap on which the source image for which a shadow is being
- created has been rendered.</p> </li>
+ <p>The <dfn id=dom-context-2d-textbaseline title=dom-context-2d-textBaseline><code>textBaseline</code></dfn>
+ IDL attribute, on getting, must return the current value. On
+ setting, if the value is one of <code title=dom-context-2d-textBaseline-top><a href=#dom-context-2d-textbaseline-top>top</a></code>, <code title=dom-context-2d-textBaseline-hanging><a href=#dom-context-2d-textbaseline-hanging>hanging</a></code>, <code title=dom-context-2d-textBaseline-middle><a href=#dom-context-2d-textbaseline-middle>middle</a></code>, <code title=dom-context-2d-textBaseline-alphabetic><a href=#dom-context-2d-textbaseline-alphabetic>alphabetic</a></code>,
+ <code title=dom-context-2d-textBaseline-ideographic><a href=#dom-context-2d-textbaseline-ideographic>ideographic</a></code>,
+ or <code title=dom-context-2d-textBaseline-bottom><a href=#dom-context-2d-textbaseline-bottom>bottom</a></code>,
+ then the value must be changed to the new value. Otherwise, the new
+ value must be ignored. When the object implementing the
+ <code><a href=#canvastext>CanvasText</a></code> interface is created, the <code title=dom-context-2d-textBaseline><a href=#dom-context-2d-textbaseline>textBaseline</a></code> attribute
+ must initially have the value <code title="">alphabetic</code>.</p>
- <li> <p>Let <var title="">B</var> be an infinite transparent black
- bitmap, with a coordinate space and an origin identical to <var title="">A</var>.</p> </li>
-
- <li> <p>Copy the alpha channel of <var title="">A</var> to <var title="">B</var>, offset by <code title=dom-context-2d-shadowOffsetX><a href=#dom-context-2d-shadowoffsetx>shadowOffsetX</a></code> in the
- positive <var title="">x</var> direction, and <code title=dom-context-2d-shadowOffsetY><a href=#dom-context-2d-shadowoffsety>shadowOffsetY</a></code> in the
- positive <var title="">y</var> direction.</p> </li>
-
- <li> <p>If <code title=dom-context-2d-shadowBlur><a href=#dom-context-2d-shadowblur>shadowBlur</a></code> is greater than
- 0:</p>
-
- <ol><li> <p>Let <var title="">σ</var> be half the value of
- <code title=dom-context-2d-shadowBlur><a href=#dom-context-2d-shadowblur>shadowBlur</a></code>.</li>
-
- <li> <p>Perform a 2D Gaussian Blur on <var title="">B</var>,
- using <var title="">σ</var> as the standard deviation.</p>
- <!-- wish i could find a reference for this --> </li>
-
- </ol><p>User agents may limit values of <var title="">σ</var> to
- an implementation-specific maximum value to avoid exceeding
- hardware limitations during the Gaussian blur operation.</p>
-
- </li>
-
- <li> <p>Set the red, green, and blue components of every pixel in
- <var title="">B</var> to the red, green, and blue components
- (respectively) of the color of <code title=dom-context-2d-shadowColor><a href=#dom-context-2d-shadowcolor>shadowColor</a></code>.</p> </li>
-
- <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 <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).</p>
-
-
- <h6 id=simple-shapes-(rectangles)><span class=secno>4.8.11.1.7 </span>Simple shapes (rectangles)</h6>
-
- <p>There are three methods that immediately draw rectangles to the
- bitmap. They each take four arguments; the first two give the <var title="">x</var> and <var title="">y</var> coordinates of the top
- left of the rectangle, and the second two give the width <var title="">w</var> and height <var title="">h</var> of the rectangle,
- respectively.</p>
-
- <div class=impl>
-
- <p>The <a href=#transformations title=dom-context-2d-transformation>current
- transformation matrix</a> must be applied to the following four
- coordinates, which form the path that must then be closed to get the
- specified rectangle: <span title="">(<var title="">x</var>, <var title="">y</var>)</span>, <span title="">(<span title=""><var title="">x</var>+<var title="">w</var></span>, <var title="">y</var>)</span>,
- <span title="">(<span title=""><var title="">x</var>+<var title="">w</var></span>,
- <span title=""><var title="">y</var>+<var title="">h</var></span>)</span>,
- <span title="">(<var title="">x</var>, <span title=""><var title="">y</var>+<var title="">h</var></span>)</span>.</p>
-
- <p>Shapes are painted without affecting the current default path,
- and are subject to the <a href=#clipping-region title="clipping region">clipping
- region</a>, and, with the exception of <code title=dom-context-2d-clearRect><a href=#dom-context-2d-clearrect>clearRect()</a></code>, also <a href=#shadows title=shadows>shadow effects</a>, <a href=#dom-context-2d-globalalpha title=dom-context-2d-globalAlpha>global alpha</a>, and <a href=#dom-context-2d-globalcompositeoperation title=dom-context-2d-globalCompositeOperation>global composition
- operators</a>.</p>
-
</div>
- <dl class=domintro><dt><var title="">context</var> . <code title=dom-context-2d-clearRect><a href=#dom-context-2d-clearrect>clearRect</a></code>(<var title="">x</var>, <var title="">y</var>, <var title="">w</var>, <var title="">h</var>)</dt>
+ <p>The <code title=dom-context-2d-textBaseline><a href=#dom-context-2d-textbaseline>textBaseline</a></code>
+ attribute's allowed keywords correspond to alignment points in the
+ font:</p>
- <dd>
+ <!-- this is filler to make sure the TCP packet boundary doesn't fall in the middle of one of the NCRs below -->
+ <!-- (because otherwise the parser in anolis screws it up) -->
+ <p><img alt="The top of the em square is roughly at the top of the glyphs in a font, the hanging baseline is where some glyphs like आ are anchored, the middle is half-way between the top of the em square and the bottom of the em square, the alphabetic baseline is where characters like Á, ÿ, f, and Ω are anchored, the ideographic baseline is where glyphs like 私 and 達 are anchored, and the bottom of the em square is roughly at the bottom of the glyphs in a font. The top and bottom of the bounding box can be far from these baselines, due to glyphs extending far outside the em square." height=300 src=http://images.whatwg.org/baselines.png width=738></p>
- <p>Clears all pixels on the canvas in the given rectangle to transparent black.</p>
+ <p>The keywords map to these alignment points as follows:</p>
- </dd>
+ <dl><dt><dfn id=dom-context-2d-textbaseline-top title=dom-context-2d-textBaseline-top><code>top</code></dfn>
+ <dd>The top of the em square</dd>
- <dt><var title="">context</var> . <code title=dom-context-2d-fillRect><a href=#dom-context-2d-fillrect>fillRect</a></code>(<var title="">x</var>, <var title="">y</var>, <var title="">w</var>, <var title="">h</var>)</dt>
+ <dt><dfn id=dom-context-2d-textbaseline-hanging title=dom-context-2d-textBaseline-hanging><code>hanging</code></dfn>
+ <dd>The hanging baseline</dd>
- <dd>
+ <dt><dfn id=dom-context-2d-textbaseline-middle title=dom-context-2d-textBaseline-middle><code>middle</code></dfn>
+ <dd>The middle of the em square</dd>
- <p>Paints the given rectangle onto the canvas, using the current fill style.</p>
+ <dt><dfn id=dom-context-2d-textbaseline-alphabetic title=dom-context-2d-textBaseline-alphabetic><code>alphabetic</code></dfn>
+ <dd>The alphabetic baseline</dd>
- </dd>
+ <dt><dfn id=dom-context-2d-textbaseline-ideographic title=dom-context-2d-textBaseline-ideographic><code>ideographic</code></dfn>
+ <dd>The ideographic baseline</dd>
- <dt><var title="">context</var> . <code title=dom-context-2d-strokeRect><a href=#dom-context-2d-strokerect>strokeRect</a></code>(<var title="">x</var>, <var title="">y</var>, <var title="">w</var>, <var title="">h</var>)</dt>
+ <dt><dfn id=dom-context-2d-textbaseline-bottom title=dom-context-2d-textBaseline-bottom><code>bottom</code></dfn>
+ <dd>The bottom of the em square</dd>
- <dd>
+ </dl><h6 id=building-paths><span class=secno>4.8.11.1.5 </span>Building paths</h6>
- <p>Paints the box that outlines the given rectangle onto the canvas, using the current stroke style.</p>
-
- </dd>
-
- </dl><div class=impl>
-
- <p>The <dfn id=dom-context-2d-clearrect title=dom-context-2d-clearRect><code>clearRect(<var title="">x</var>, <var title="">y</var>, <var title="">w</var>, <var title="">h</var>)</code></dfn> method must clear the pixels in the
- specified rectangle that also intersect the current clipping region
- to a fully transparent black, erasing any previous image. If either
- height or width are zero, this method has no effect.</p>
-
- <p>The <dfn id=dom-context-2d-fillrect title=dom-context-2d-fillRect><code>fillRect(<var title="">x</var>, <var title="">y</var>, <var title="">w</var>, <var title="">h</var>)</code></dfn> method must paint the specified
- rectangular area using the <code title=dom-context-2d-fillStyle><a href=#dom-context-2d-fillstyle>fillStyle</a></code>. If either height
- or width are zero, this method has no effect.</p>
-
- <p>The <dfn id=dom-context-2d-strokerect title=dom-context-2d-strokeRect><code>strokeRect(<var title="">x</var>, <var title="">y</var>, <var title="">w</var>, <var title="">h</var>)</code></dfn> method must stroke the specified
- rectangle's path using the <code title=dom-context-2d-strokeStyle><a href=#dom-context-2d-strokestyle>strokeStyle</a></code>, <code title=dom-context-2d-lineWidth><a href=#dom-context-2d-linewidth>lineWidth</a></code>, <code title=dom-context-2d-lineJoin><a href=#dom-context-2d-linejoin>lineJoin</a></code>, and (if
- appropriate) <code title=dom-context-2d-miterLimit><a href=#dom-context-2d-miterlimit>miterLimit</a></code> attributes. If
- both height and width are zero, this method has no effect, since
- there is no path to stroke (it's a point). If only one of the two is
- zero, then the method will draw a line instead (the path for the
- outline is just a straight line along the non-zero dimension).</p>
-
- </div>
-
-
- <h6 id=complex-shapes-(paths)><span class=secno>4.8.11.1.8 </span>Complex shapes (paths)</h6>
-
<p>Each object implementing the <code><a href=#canvaspathmethods>CanvasPathMethods</a></code>
interface has a <a href=#path>path</a>. A <dfn id=path>path</dfn> has a list of
zero or more subpaths. Each subpath consists of a list of one or
@@ -36435,8 +35834,401 @@
- <h6 id=the-current-default-path><span class=secno>4.8.11.1.9 </span>The current default path</h6>
+ <h6 id=fill-and-stroke-styles><span class=secno>4.8.11.1.6 </span>Fill and stroke styles</h6>
+
+ <dl class=domintro><dt><var title="">context</var> . <code title=dom-context-2d-fillStyle><a href=#dom-context-2d-fillstyle>fillStyle</a></code> [ = <var title="">value</var> ]</dt>
+
+ <dd>
+
+ <p>Returns the current style used for filling shapes.</p>
+
+ <p>Can be set, to change the fill style.</p>
+
+ <p>The style can be either a string containing a CSS color, or a
+ <code><a href=#canvasgradient>CanvasGradient</a></code> or <code><a href=#canvaspattern>CanvasPattern</a></code>
+ object. Invalid values are ignored.</p>
+
+ </dd>
+
+ <dt><var title="">context</var> . <code title=dom-context-2d-strokeStyle><a href=#dom-context-2d-strokestyle>strokeStyle</a></code> [ = <var title="">value</var> ]</dt>
+
+ <dd>
+
+ <p>Returns the current style used for stroking shapes.</p>
+
+ <p>Can be set, to change the stroke style.</p>
+
+ <p>The style can be either a string containing a CSS color, or a
+ <code><a href=#canvasgradient>CanvasGradient</a></code> or <code><a href=#canvaspattern>CanvasPattern</a></code>
+ object. Invalid values are ignored.</p>
+
+ </dd>
+
+ </dl><div class=impl>
+
+ <!-- v6 feature requests:
+
+ * Getting and setting colours by component to bypass the CSS value parsing.
+
+ Either:
+ context.fillStyle.red += 1;
+
+ Or:
+ var array = context.fillStyle;
+ array[1] += 1;
+ context.fillStyle = array;
+
+ * A more performant way of setting colours in general, e.g.:
+
+ context.setFillColor(r,g,b,a) // already supported by webkit
+
+ Or:
+
+ context.fillStyle = 0xRRGGBBAA; // set a 32bit int directly
+
+ * fill rule for deciding between winding and even-odd algorithms.
+ SVG has fill-rule: nonzero | evenodd
+ http://www.w3.org/TR/SVG/painting.html#FillProperties
+ see also mozFillRule: http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2011-June/032002.html
+
+ -->
+
+ <p>The <dfn id=dom-context-2d-fillstyle title=dom-context-2d-fillStyle><code>fillStyle</code></dfn>
+ attribute represents the color or style to use inside shapes, and
+ the <dfn id=dom-context-2d-strokestyle title=dom-context-2d-strokeStyle><code>strokeStyle</code></dfn>
+ attribute represents the color or style to use for the lines around
+ the shapes.</p>
+
+ <p>Both attributes can be either strings,
+ <code><a href=#canvasgradient>CanvasGradient</a></code>s, or <code><a href=#canvaspattern>CanvasPattern</a></code>s. On
+ setting, strings must be <a href=#parsed-as-a-css-color-value title="parsed as a CSS <color>
+ value">parsed as CSS <color> values</a> and the color
+ assigned, and <code><a href=#canvasgradient>CanvasGradient</a></code> and
+ <code><a href=#canvaspattern>CanvasPattern</a></code> objects must be assigned themselves. <a href=#refsCSSCOLOR>[CSSCOLOR]</a> If the value is a string but
+ cannot be <a href=#parsed-as-a-css-color-value>parsed as a CSS <color> value</a>, or is
+ neither a string, a <code><a href=#canvasgradient>CanvasGradient</a></code>, nor a
+ <code><a href=#canvaspattern>CanvasPattern</a></code>, then it must be ignored, and the
+ attribute must retain its previous value.</p>
+
+ <p>When set to a <code><a href=#canvaspattern>CanvasPattern</a></code> or
+ <code><a href=#canvasgradient>CanvasGradient</a></code> object, the assignment is
+ <a href=#live>live</a>, meaning that changes made to the object after the
+ assignment do affect subsequent stroking or filling of shapes.</p>
+
+ <p>On getting, if the value is a color, then the <a href=#serialization-of-a-color title="serialization of a color">serialization of the color</a>
+ must be returned. Otherwise, if it is not a color but a
+ <code><a href=#canvasgradient>CanvasGradient</a></code> or <code><a href=#canvaspattern>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>
+
+ <p>The <dfn id=serialization-of-a-color>serialization 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, if the alpha value is greater than zero then a
+ U+002E FULL STOP (representing the decimal point), if the alpha
+ value is greater than zero then one or more digits in the range 0-9
+ (U+0030 to U+0039) representing the fractional part of the alpha<!--
+ value with no trailing zeros (implied by next sentence)-->, and
+ finally a U+0029 RIGHT PARENTHESIS. User agents must express the
+ fractional part of the alpha value, if any, with the level of
+ precision necessary for the alpha value, when reparsed, to be
+ interpreted as the same alpha value.</p> <!-- if people complain
+ this is unreadable, expand it into a <dl> with two nested <ol>s -->
+
+ <p>When the context is created, the <code title=dom-context-2d-fillStyle><a href=#dom-context-2d-fillstyle>fillStyle</a></code> and <code title=dom-context-2d-strokeStyle><a href=#dom-context-2d-strokestyle>strokeStyle</a></code> attributes
+ must initially have the string value <code title="">#000000</code>.</p>
+
+ <p>When the value is a color, it must not be affected by the
+ transformation matrix when used to draw on the canvas.</p> <!-- so
+ singular matrices don't affect solid color fillStyles -->
+
+ </div>
+
+ <hr><p>There are two types of gradients, linear gradients and radial
+ gradients, both represented by objects implementing the opaque
+ <code><a href=#canvasgradient>CanvasGradient</a></code> interface.</p>
+
+ <p id=interpolation>Once a gradient has been created (see below),
+ stops are placed along it to define how the colors are distributed
+ along the gradient. <span class=impl>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.</span></p>
+
+ <dl class=domintro><dt><var title="">gradient</var> . <code title=dom-canvasgradient-addColorStop><a href=#dom-canvasgradient-addcolorstop>addColorStop</a></code>(<var title="">offset</var>, <var title="">color</var>)</dt>
+
+ <dd>
+
+ <p>Adds a color stop with the given color to the gradient at the
+ given offset. 0.0 is the offset at one end of the gradient, 1.0 is
+ the offset at the other end.</p>
+
+ <p>Throws an <code><a href=#indexsizeerror>IndexSizeError</a></code> exception if the offset
+ is out of range. Throws a <code><a href=#syntaxerror>SyntaxError</a></code> exception if the
+ color cannot be parsed.</p>
+
+ </dd>
+
+ <dt><var title="">gradient</var> = <var title="">context</var> . <code title=dom-context-2d-createLinearGradient><a href=#dom-context-2d-createlineargradient>createLinearGradient</a></code>(<var title="">x0</var>, <var title="">y0</var>, <var title="">x1</var>, <var title="">y1</var>)</dt>
+
+ <dd>
+
+ <p>Returns a <code><a href=#canvasgradient>CanvasGradient</a></code> object that represents a
+ linear gradient that paints along the line given by the
+ coordinates represented by the arguments.</p>
+
+ <p>If any of the arguments are not finite numbers, throws a
+ <code><a href=#notsupportederror>NotSupportedError</a></code> exception.</p>
+
+ </dd>
+
+ <dt><var title="">gradient</var> = <var title="">context</var> . <code title=dom-context-2d-createRadialGradient><a href=#dom-context-2d-createradialgradient>createRadialGradient</a></code>(<var title="">x0</var>, <var title="">y0</var>, <var title="">r0</var>, <var title="">x1</var>, <var title="">y1</var>, <var title="">r1</var>)</dt>
+
+ <dd>
+
+ <p>Returns a <code><a href=#canvasgradient>CanvasGradient</a></code> object that represents a
+ radial gradient that paints along the cone given by the circles
+ represented by the arguments.</p>
+
+ <p>If any of the arguments are not finite numbers, throws a
+ <code><a href=#notsupportederror>NotSupportedError</a></code> exception. If either of the radii
+ are negative, throws an <code><a href=#indexsizeerror>IndexSizeError</a></code> exception.</p>
+
+ </dd>
+
+ </dl><div class=impl>
+
+ <p>The <dfn id=dom-canvasgradient-addcolorstop title=dom-canvasgradient-addColorStop><code>addColorStop(<var title="">offset</var>, <var title="">color</var>)</code></dfn>
+ method on the <code><a href=#canvasgradient>CanvasGradient</a></code> interface adds a new stop
+ to a gradient. If the <var title="">offset</var> is less than 0,
+ greater than 1, infinite, or NaN, then an
+ <code><a href=#indexsizeerror>IndexSizeError</a></code> exception must be thrown. If the <var title="">color</var> cannot be <a href=#parsed-as-a-css-color-value>parsed as a CSS <color>
+ value</a>, then a <code><a href=#syntaxerror>SyntaxError</a></code> exception must be
+ thrown. 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 added at the same
+ offset 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 id=dom-context-2d-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
+ that represent the start point (<var title="">x0</var>, <var title="">y0</var>) and end point (<var title="">x1</var>, <var title="">y1</var>) of the gradient. If any of the arguments to <code title=dom-context-2d-createLinearGradient><a href=#dom-context-2d-createlineargradient>createLinearGradient()</a></code>
+ are infinite or NaN, the method must throw a
+ <code><a href=#notsupportederror>NotSupportedError</a></code> exception. Otherwise, the method must
+ return a linear <code><a href=#canvasgradient>CanvasGradient</a></code> initialized with the
+ specified line.</p>
+
+ <p>Linear gradients must be rendered such 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 <a href=#interpolation>interpolation and
+ extrapolation</a> described above). The points in the linear
+ gradient must be transformed as described by the <a href=#transformations title=dom-context-2d-transformation>current transformation
+ matrix</a> when rendering.</p>
+
+ <p>If <span title=""><var title="">x0</var> = <var title="">x1</var></span> and <span title=""><var title="">y0</var> = <var title="">y1</var></span>, then
+ the linear gradient must paint nothing.</p>
+
+ <p>The <dfn id=dom-context-2d-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 three representing the start circle with origin (<var title="">x0</var>, <var title="">y0</var>) and radius <var title="">r0</var>, and the last three representing the end circle
+ with origin (<var title="">x1</var>, <var title="">y1</var>) and
+ radius <var title="">r1</var>. The values are in coordinate space
+ units. If any of the arguments are infinite or NaN, a
+ <code><a href=#notsupportederror>NotSupportedError</a></code> exception must be thrown. If either
+ of <var title="">r0</var> or <var title="">r1</var> are negative, an
+ <code><a href=#indexsizeerror>IndexSizeError</a></code> exception must be thrown. Otherwise,
+ the method must return a radial <code><a href=#canvasgradient>CanvasGradient</a></code>
+ initialized with the two specified circles.</p>
+
+ <p>Radial gradients must be rendered by following these steps:</p>
+
+ <ol><li><p>If <span title=""><var title="">x<sub>0</sub></var> = <var title="">x<sub>1</sub></var></span> and <span title=""><var title="">y<sub>0</sub></var> = <var title="">y<sub>1</sub></var></span> and <span title=""><var title="">r<sub>0</sub></var> = <var title="">r<sub>1</sub></var></span>, then the radial gradient must
+ paint nothing. Abort these steps.</li>
+
+ <li>
+
+ <p>Let <span title="">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 title="">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 title="">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 at
+ that position on the gradient (with the colors coming from the <a href=#interpolation>interpolation and extrapolation</a>
+ described above).</p>
+
+ </li>
+
+ <li><p>For all values of <var title="">ω</var> where <span title="">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 <span title="">r(<var title="">ω</var>)</span> at position (<span title="">x(<var title="">ω</var>)</span>, <span title="">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.</li>
+
+ </ol><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).</p>
+
+ <p>The resulting radial gradient must then be transformed as
+ described by the <a href=#transformations title=dom-context-2d-transformation>current
+ transformation matrix</a> when rendering.</p>
+
+ <p>Gradients must be painted only where the relevant stroking or
+ filling effects requires that they be drawn.</p>
+
+ </div>
+
+ <hr><p>Patterns are represented by objects implementing the opaque
+ <code><a href=#canvaspattern>CanvasPattern</a></code> interface.</p>
+
+ <dl class=domintro><dt><var title="">pattern</var> = <var title="">context</var> . <code title=dom-context-2d-createPattern><a href=#dom-context-2d-createpattern>createPattern</a></code>(<var title="">image</var>, <var title="">repetition</var>)</dt>
+
+ <dd>
+
+ <p>Returns a <code><a href=#canvaspattern>CanvasPattern</a></code> object that uses the given image
+ and repeats in the direction(s) given by the <var title="">repetition</var> argument.</p>
+
+ <p>The allowed values for <var title="">repetition</var> are <code title="">repeat</code> (both directions), <code title="">repeat-x</code> (horizontal only), <code title="">repeat-y</code> (vertical only), and <code title="">no-repeat</code> (neither). If the <var title="">repetition</var> argument is empty, the value <code title="">repeat</code> is used.</p>
+
+ <p>If the image has no image data, throws an
+ <code><a href=#invalidstateerror>InvalidStateError</a></code> exception. If the second argument
+ isn't one of the allowed values, throws a <code><a href=#syntaxerror>SyntaxError</a></code>
+ exception. If the image isn't yet fully decoded, then the method
+ returns null.</p>
+
+ </dd>
+
+ </dl><div class=impl>
+
+ <p>To create objects of this type, the <dfn id=dom-context-2d-createpattern title=dom-context-2d-createPattern><code>createPattern(<var title="">image</var>, <var title="">repetition</var>)</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>,
+ <code><a href=#htmlcanvaselement>HTMLCanvasElement</a></code>, or <code><a href=#htmlvideoelement>HTMLVideoElement</a></code>
+ object). Modifying this image after calling the <code title=dom-context-2d-createPattern><a href=#dom-context-2d-createpattern>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 title="">no-repeat</code>. If the empty string is specified,
+ <code title="">repeat</code> must be assumed. If an unrecognized value
+ is given, then the user agent must throw a <code><a href=#syntaxerror>SyntaxError</a></code>
+ exception. User agents must recognize the four values described above
+ exactly (e.g. they must not do case folding). Except as specified
+ below, the method must return a <code><a href=#canvaspattern>CanvasPattern</a></code> object
+ suitably initialized.</p>
+
+ <p>The <var title="">image</var> argument is an instance of either
+ <code><a href=#htmlimageelement>HTMLImageElement</a></code>, <code><a href=#htmlcanvaselement>HTMLCanvasElement</a></code>, or
+ <code><a href=#htmlvideoelement>HTMLVideoElement</a></code>.</p> <!-- drawImage() has an equivalent
+ paragraph -->
+
+ <p>If the <var title="">image</var> argument is an
+ <code><a href=#htmlimageelement>HTMLImageElement</a></code> object that is not <a href=#img-good title=img-good>fully decodable</a>, or if the <var title="">image</var> argument is an <code><a href=#htmlvideoelement>HTMLVideoElement</a></code>
+ object whose <code title=dom-media-readyState><a href=#dom-media-readystate>readyState</a></code>
+ attribute is either <code title=dom-media-HAVE_NOTHING><a href=#dom-media-have_nothing>HAVE_NOTHING</a></code> or <code title=dom-media-HAVE_METADATA><a href=#dom-media-have_metadata>HAVE_METADATA</a></code>, then the
+ implementation must return null.</p> <!-- drawImage() has an
+ equivalent paragraph -->
+
+ <p>If the <var title="">image</var> argument is an
+ <code><a href=#htmlcanvaselement>HTMLCanvasElement</a></code> object with either a horizontal
+ dimension or a vertical dimension equal to zero, then the
+ implementation must throw an <code><a href=#invalidstateerror>InvalidStateError</a></code>
+ exception.</p>
+ <!-- drawImage() has an equivalent paragraph -->
+
+ <p>Patterns must be painted so that the top left of the first image
+ is anchored at the origin of the coordinate space, and images are
+ then repeated horizontally to the left and right, if the
+ <code>repeat-x</code> string was specified, or vertically up and
+ down, if the <code>repeat-y</code> string was specified, or in all
+ four directions all over the canvas, if the <code>repeat</code>
+ string was specified, to create the repeated pattern that is used
+ for rendering. The images are not scaled by this process; one CSS
+ pixel of the image must be painted on one coordinate space unit in
+ generating the repeated pattern. When rendered, however, patterns
+ must actually be painted only where the stroking or filling effect
+ requires that they be drawn, and the repeated pattern must be
+ affected by the current transformation matrix. Pixels not covered by
+ the repeating pattern (if the <code>repeat</code> string was not
+ specified) must be transparent black.</p>
+
+ <p>If the original image data is a bitmap image, the value painted
+ at a point in the area of the repetitions is computed by filtering
+ the original image data. The user agent may use any filtering
+ algorithm (for example bilinear interpolation or nearest-neighbor).
+ When the filtering algorithm requires a pixel value from outside the
+ original image data, it must instead use the value from wrapping the
+ pixel's coordinates to the original image's dimensions. (That is,
+ the filter uses 'repeat' behavior, regardless of the value of
+ <var title="">repetition</var>.)
+ <!-- drawImage() has a similar paragraph with different rules -->
+
+ <p>When the <code title=dom-context-2d-createPattern><a href=#dom-context-2d-createpattern>createPattern()</a></code> method
+ is passed an animated image as its <var title="">image</var>
+ argument, the user agent must use the poster frame of the animation,
+ or, if there is no poster frame, the first frame of the
+ animation.</p>
+ <!-- drawImage() has an equivalent paragraph -->
+
+ <p>When the <var title="">image</var> argument is an
+ <code><a href=#htmlvideoelement>HTMLVideoElement</a></code>, then the frame at the <a href=#current-playback-position>current
+ playback position</a> must be used as the source image, and the
+ source image's dimensions must be the <a href=#concept-video-intrinsic-width title=concept-video-intrinsic-width>intrinsic width</a> and
+ <a href=#concept-video-intrinsic-height title=concept-video-intrinsic-height>intrinsic height</a>
+ of the <a href=#media-resource>media resource</a> (i.e. after any aspect-ratio
+ correction has been applied).</p>
+ <!-- drawImage() has an equivalent paragraph -->
+
+ <!--
+ Requests for v5 features:
+ * apply transforms to patterns, so you don't have to create
+ transformed patterns manually by rendering them to an off-screen
+ canvas then using that canvas as the pattern.
+ -->
+
+ </div>
+
+ <div class=impl>
+
+ <hr><p>If a radial gradient or repeated pattern is used when the
+ transformation matrix is singular, the resulting style must be
+ transparent black (otherwise the gradient or pattern would be
+ collapsed to a point or line, leaving the other pixels undefined).
+ Linear gradients and solid colors always define all points even with
+ singular tranformation matrices.</p>
+
+ </div>
+
+
+
+ <h6 id=the-current-default-path><span class=secno>4.8.11.1.7 </span>The current default path</h6>
+
<p>The context always has a current default path. There is only one
current default path, it is not part of the <a href=#drawing-state>drawing
state</a>. The current default path is a <a href=#path>path</a>, as
@@ -36775,163 +36567,81 @@
- <h6 id=text-0><span class=secno>4.8.11.1.10 </span>Text</h6> <!-- a v3 feature -->
- <dl class=domintro><dt><var title="">context</var> . <code title=dom-context-2d-font><a href=#dom-context-2d-font>font</a></code> [ = <var title="">value</var> ]</dt>
+ <h6 id=drawing-rectangles-to-the-canvas><span class=secno>4.8.11.1.8 </span>Drawing rectangles to the canvas</h6>
- <dd>
+ <p>There are three methods that immediately draw rectangles to the
+ bitmap. They each take four arguments; the first two give the <var title="">x</var> and <var title="">y</var> coordinates of the top
+ left of the rectangle, and the second two give the width <var title="">w</var> and height <var title="">h</var> of the rectangle,
+ respectively.</p>
- <p>Returns the current font settings.</p>
+ <div class=impl>
- <p>Can be set, to change the font. The syntax is the same as for
- the CSS 'font' property; values that cannot be parsed as CSS font
- values are ignored.</p>
+ <p>The <a href=#transformations title=dom-context-2d-transformation>current
+ transformation matrix</a> must be applied to the following four
+ coordinates, which form the path that must then be closed to get the
+ specified rectangle: <span title="">(<var title="">x</var>, <var title="">y</var>)</span>, <span title="">(<span title=""><var title="">x</var>+<var title="">w</var></span>, <var title="">y</var>)</span>,
+ <span title="">(<span title=""><var title="">x</var>+<var title="">w</var></span>,
+ <span title=""><var title="">y</var>+<var title="">h</var></span>)</span>,
+ <span title="">(<var title="">x</var>, <span title=""><var title="">y</var>+<var title="">h</var></span>)</span>.</p>
- <p>Relative keywords and lengths are computed relative to the font
- of the <code><a href=#the-canvas-element>canvas</a></code> element.</p>
+ <p>Shapes are painted without affecting the current default path,
+ and are subject to the <a href=#clipping-region title="clipping region">clipping
+ region</a>, and, with the exception of <code title=dom-context-2d-clearRect><a href=#dom-context-2d-clearrect>clearRect()</a></code>, also <a href=#shadows title=shadows>shadow effects</a>, <a href=#dom-context-2d-globalalpha title=dom-context-2d-globalAlpha>global alpha</a>, and <a href=#dom-context-2d-globalcompositeoperation title=dom-context-2d-globalCompositeOperation>global composition
+ operators</a>.</p>
- </dd>
+ </div>
- <dt><var title="">context</var> . <code title=dom-context-2d-textAlign><a href=#dom-context-2d-textalign>textAlign</a></code> [ = <var title="">value</var> ]</dt>
+ <dl class=domintro><dt><var title="">context</var> . <code title=dom-context-2d-clearRect><a href=#dom-context-2d-clearrect>clearRect</a></code>(<var title="">x</var>, <var title="">y</var>, <var title="">w</var>, <var title="">h</var>)</dt>
<dd>
- <p>Returns the current text alignment settings.</p>
+ <p>Clears all pixels on the canvas in the given rectangle to transparent black.</p>
- <p>Can be set, to change the alignment. The possible values are
- <code title="">start</code>, <code title="">end</code>, <code title="">left</code>, <code title="">right</code>, and <code title="">center</code>. Other values are ignored. The default is
- <code title="">start</code>.</p>
-
</dd>
- <dt><var title="">context</var> . <code title=dom-context-2d-textBaseline><a href=#dom-context-2d-textbaseline>textBaseline</a></code> [ = <var title="">value</var> ]</dt>
+ <dt><var title="">context</var> . <code title=dom-context-2d-fillRect><a href=#dom-context-2d-fillrect>fillRect</a></code>(<var title="">x</var>, <var title="">y</var>, <var title="">w</var>, <var title="">h</var>)</dt>
<dd>
- <p>Returns the current baseline alignment settings.</p>
+ <p>Paints the given rectangle onto the canvas, using the current fill style.</p>
- <p>Can be set, to change the baseline alignment. The possible
- values and their meanings are given below. Other values are
- ignored. The default is <code title="">alphabetic</code>.</p>
-
</dd>
- </dl><div class=impl>
+ <dt><var title="">context</var> . <code title=dom-context-2d-strokeRect><a href=#dom-context-2d-strokerect>strokeRect</a></code>(<var title="">x</var>, <var title="">y</var>, <var title="">w</var>, <var title="">h</var>)</dt>
- <p>Objects that implement the <code><a href=#canvastext>CanvasText</a></code>
- interface have attributes (defined in this section) that control how
- text is laid out (rasterized or outlined) by the object.</p>
+ <dd>
- <p>The <dfn id=dom-context-2d-font title=dom-context-2d-font><code>font</code></dfn> IDL
- attribute, on setting, must be parsed the same way as the 'font'
- property of CSS (but without supporting property-independent style
- sheet syntax like 'inherit'), and the resulting font must be
- assigned to the context, with the 'line-height' component forced to
- 'normal', with the 'font-size' component converted to CSS pixels,
- and with system fonts being computed to explicit values. If the new
- value is syntactically incorrect (including using
- property-independent style sheet syntax like 'inherit' or
- 'initial'), then it must be ignored, without assigning a new font
- value. <a href=#refsCSS>[CSS]</a></p>
+ <p>Paints the box that outlines the given rectangle onto the canvas, using the current stroke style.</p>
- <p>Font names must be interpreted in the context of the
- <code><a href=#the-canvas-element>canvas</a></code> element's stylesheets; any fonts embedded using
- <code title="">@font-face</code> must therefore be available once
- they are loaded. (If a font is referenced before it is fully loaded,
- then it must be treated as if it was an unknown font, falling back
- to another as described by the relevant CSS specifications.) <a href=#refsCSSFONTS>[CSSFONTS]</a></p>
+ </dd>
- <!-- XXX Path objects don't have a canvas -->
+ </dl><div class=impl>
- <p>Only vector fonts should be used by the user agent; if a user
- agent were to use bitmap fonts then transformations would likely
- make the font look very ugly.</p>
+ <p>The <dfn id=dom-context-2d-clearrect title=dom-context-2d-clearRect><code>clearRect(<var title="">x</var>, <var title="">y</var>, <var title="">w</var>, <var title="">h</var>)</code></dfn> method must clear the pixels in the
+ specified rectangle that also intersect the current clipping region
+ to a fully transparent black, erasing any previous image. If either
+ height or width are zero, this method has no effect.</p>
- <p>On getting, the <code title=dom-context-2d-font><a href=#dom-context-2d-font>font</a></code>
- attribute must return the <a href=#serializing-a-css-value title="serializing a CSS
- value">serialized form</a> of the current font of the context
- (with no 'line-height' component). <a href=#refsCSSOM>[CSSOM]</a></p>
+ <p>The <dfn id=dom-context-2d-fillrect title=dom-context-2d-fillRect><code>fillRect(<var title="">x</var>, <var title="">y</var>, <var title="">w</var>, <var title="">h</var>)</code></dfn> method must paint the specified
+ rectangular area using the <code title=dom-context-2d-fillStyle><a href=#dom-context-2d-fillstyle>fillStyle</a></code>. If either height
+ or width are zero, this method has no effect.</p>
- <div class=example>
+ <p>The <dfn id=dom-context-2d-strokerect title=dom-context-2d-strokeRect><code>strokeRect(<var title="">x</var>, <var title="">y</var>, <var title="">w</var>, <var title="">h</var>)</code></dfn> method must stroke the specified
+ rectangle's path using the <code title=dom-context-2d-strokeStyle><a href=#dom-context-2d-strokestyle>strokeStyle</a></code>, <code title=dom-context-2d-lineWidth><a href=#dom-context-2d-linewidth>lineWidth</a></code>, <code title=dom-context-2d-lineJoin><a href=#dom-context-2d-linejoin>lineJoin</a></code>, and (if
+ appropriate) <code title=dom-context-2d-miterLimit><a href=#dom-context-2d-miterlimit>miterLimit</a></code> attributes. If
+ both height and width are zero, this method has no effect, since
+ there is no path to stroke (it's a point). If only one of the two is
+ zero, then the method will draw a line instead (the path for the
+ outline is just a straight line along the non-zero dimension).</p>
- <p>For example, after the following statement:</p>
-
- <pre>context.font = 'italic 400 12px/2 Unknown Font, sans-serif';</pre>
-
- <p>...the expression <code title="">context.font</code> would
- evaluate to the string "<code title="">italic 12px "Unknown Font", sans-serif</code>". The
- "400" font-weight doesn't appear because that is the default
- value. The line-height doesn't appear because it is forced to
- "normal", the default value.</p>
-
</div>
- <p>When the object implementing the <code><a href=#canvastext>CanvasText</a></code>
- interface is created, the font of the context must be set to 10px
- sans-serif. When the 'font-size' component is set to lengths using
- percentages, 'em' or 'ex' units, or the 'larger' or 'smaller'
- keywords, these must be interpreted relative to the computed value
- of the 'font-size' property of the corresponding <code><a href=#the-canvas-element>canvas</a></code>
- element at the time that the attribute is set. When the
- 'font-weight' component is set to the relative values 'bolder' and
- 'lighter', these must be interpreted relative to the computed value
- of the 'font-weight' property of the corresponding
- <code><a href=#the-canvas-element>canvas</a></code> element at the time that the attribute is set.
- If the computed values are undefined for a particular case (e.g.
- because the <code><a href=#the-canvas-element>canvas</a></code> element is not <a href=#in-a-document>in a
- <code>Document</code></a>), then the relative keywords must be
- interpreted relative to the normal-weight 10px sans-serif
- default.</p> <!-- XXX Path canvas issue again, twice -->
- <p>The <dfn id=dom-context-2d-textalign title=dom-context-2d-textAlign><code>textAlign</code></dfn> IDL
- attribute, on getting, must return the current value. On setting, if
- the value is one of <code title="">start</code>, <code title="">end</code>, <code title="">left</code>, <code title="">right</code>, or <code title="">center</code>, then the
- value must be changed to the new value. Otherwise, the new value
- must be ignored. When the object implementing the
- <code><a href=#canvastext>CanvasText</a></code> interface is created, the <code title=dom-context-2d-textAlign><a href=#dom-context-2d-textalign>textAlign</a></code> attribute must
- initially have the value <code title="">start</code>.</p>
- <p>The <dfn id=dom-context-2d-textbaseline title=dom-context-2d-textBaseline><code>textBaseline</code></dfn>
- IDL attribute, on getting, must return the current value. On
- setting, if the value is one of <code title=dom-context-2d-textBaseline-top><a href=#dom-context-2d-textbaseline-top>top</a></code>, <code title=dom-context-2d-textBaseline-hanging><a href=#dom-context-2d-textbaseline-hanging>hanging</a></code>, <code title=dom-context-2d-textBaseline-middle><a href=#dom-context-2d-textbaseline-middle>middle</a></code>, <code title=dom-context-2d-textBaseline-alphabetic><a href=#dom-context-2d-textbaseline-alphabetic>alphabetic</a></code>,
- <code title=dom-context-2d-textBaseline-ideographic><a href=#dom-context-2d-textbaseline-ideographic>ideographic</a></code>,
- or <code title=dom-context-2d-textBaseline-bottom><a href=#dom-context-2d-textbaseline-bottom>bottom</a></code>,
- then the value must be changed to the new value. Otherwise, the new
- value must be ignored. When the object implementing the
- <code><a href=#canvastext>CanvasText</a></code> interface is created, the <code title=dom-context-2d-textBaseline><a href=#dom-context-2d-textbaseline>textBaseline</a></code> attribute
- must initially have the value <code title="">alphabetic</code>.</p>
+ <h6 id=drawing-text-to-the-canvas><span class=secno>4.8.11.1.9 </span>Drawing text to the canvas</h6>
- </div>
-
- <p>The <code title=dom-context-2d-textBaseline><a href=#dom-context-2d-textbaseline>textBaseline</a></code>
- attribute's allowed keywords correspond to alignment points in the
- font:</p>
-
- <!-- this is filler to make sure the TCP packet boundary doesn't fall in the middle of one of the NCRs below -->
- <!-- (because otherwise the parser in anolis screws it up) -->
- <p><img alt="The top of the em square is roughly at the top of the glyphs in a font, the hanging baseline is where some glyphs like आ are anchored, the middle is half-way between the top of the em square and the bottom of the em square, the alphabetic baseline is where characters like Á, ÿ, f, and Ω are anchored, the ideographic baseline is where glyphs like 私 and 達 are anchored, and the bottom of the em square is roughly at the bottom of the glyphs in a font. The top and bottom of the bounding box can be far from these baselines, due to glyphs extending far outside the em square." height=300 src=http://images.whatwg.org/baselines.png width=738></p>
-
- <p>The keywords map to these alignment points as follows:</p>
-
- <dl><dt><dfn id=dom-context-2d-textbaseline-top title=dom-context-2d-textBaseline-top><code>top</code></dfn>
- <dd>The top of the em square</dd>
-
- <dt><dfn id=dom-context-2d-textbaseline-hanging title=dom-context-2d-textBaseline-hanging><code>hanging</code></dfn>
- <dd>The hanging baseline</dd>
-
- <dt><dfn id=dom-context-2d-textbaseline-middle title=dom-context-2d-textBaseline-middle><code>middle</code></dfn>
- <dd>The middle of the em square</dd>
-
- <dt><dfn id=dom-context-2d-textbaseline-alphabetic title=dom-context-2d-textBaseline-alphabetic><code>alphabetic</code></dfn>
- <dd>The alphabetic baseline</dd>
-
- <dt><dfn id=dom-context-2d-textbaseline-ideographic title=dom-context-2d-textBaseline-ideographic><code>ideographic</code></dfn>
- <dd>The ideographic baseline</dd>
-
- <dt><dfn id=dom-context-2d-textbaseline-bottom title=dom-context-2d-textBaseline-bottom><code>bottom</code></dfn>
- <dd>The bottom of the em square</dd>
-
- </dl><hr><dl class=domintro><dt><var title="">context</var> . <code title=dom-context-2d-fillText><a href=#dom-context-2d-filltext>fillText</a></code>(<var title="">text</var>, <var title="">x</var>, <var title="">y</var> [, <var title="">maxWidth</var> ] )</dt>
+ <dl class=domintro><dt><var title="">context</var> . <code title=dom-context-2d-fillText><a href=#dom-context-2d-filltext>fillText</a></code>(<var title="">text</var>, <var title="">x</var>, <var title="">y</var> [, <var title="">maxWidth</var> ] )</dt>
<dt><var title="">context</var> . <code title=dom-context-2d-strokeText><a href=#dom-context-2d-stroketext>strokeText</a></code>(<var title="">text</var>, <var title="">x</var>, <var title="">y</var> [, <var title="">maxWidth</var> ] )</dt>
<dd>
@@ -37310,7 +37020,7 @@
- <h6 id=images><span class=secno>4.8.11.1.11 </span>Images</h6>
+ <h6 id=drawing-images-to-the-canvas><span class=secno>4.8.11.1.10 </span>Drawing images to the canvas</h6>
<p>To draw images onto the canvas, the <dfn id=dom-context-2d-drawimage title=dom-context-2d-drawImage><code>drawImage</code></dfn> method
can be used.</p>
@@ -37454,7 +37164,7 @@
- <h6 id=pixel-manipulation><span class=secno>4.8.11.1.12 </span><dfn>Pixel manipulation</dfn></h6>
+ <h6 id=pixel-manipulation><span class=secno>4.8.11.1.11 </span><dfn>Pixel manipulation</dfn></h6>
<dl class=domintro><dt><var title="">imagedata</var> = <var title="">context</var> . <code title=dom-context-2d-createImageData><a href=#dom-context-2d-createimagedata>createImageData</a></code>(<var title="">sw</var>, <var title="">sh</var>)</dt>
@@ -37788,9 +37498,312 @@
</div>
+
+
+ <h6 id=compositing><span class=secno>4.8.11.1.12 </span>Compositing</h6>
+
+ <dl class=domintro><dt><var title="">context</var> . <code title=dom-context-2d-globalAlpha><a href=#dom-context-2d-globalalpha>globalAlpha</a></code> [ = <var title="">value</var> ]</dt>
+
+ <dd>
+
+ <p>Returns the current alpha value applied to rendering operations.</p>
+
+ <p>Can be set, to change the alpha value. Values outside of the
+ range 0.0 .. 1.0 are ignored.</p>
+
+ </dd>
+
+
+ <dt><var title="">context</var> . <code title=dom-context-2d-globalCompositeOperation><a href=#dom-context-2d-globalcompositeoperation>globalCompositeOperation</a></code> [ = <var title="">value</var> ]</dt>
+
+ <dd>
+
+ <p>Returns the current composition operation, from the list below.</p>
+
+ <p>Can be set, to change the composition operation. Unknown values
+ are ignored.</p>
+
+ </dd>
+
+ </dl><div class=impl>
+
+ <p>All drawing operations are affected by the global compositing
+ attributes, <code title=dom-context-2d-globalAlpha><a href=#dom-context-2d-globalalpha>globalAlpha</a></code> and <code title=dom-context-2d-globalCompositeOperation><a href=#dom-context-2d-globalcompositeoperation>globalCompositeOperation</a></code>.</p>
+
+ <!-- conformance criteria for painting are described in the "drawing
+ model" section below -->
+
+ <p>The <dfn id=dom-context-2d-globalalpha title=dom-context-2d-globalAlpha><code>globalAlpha</code></dfn>
+ attribute gives an alpha value that is applied to shapes and images
+ before they are composited onto the canvas. The value must be in the
+ range from 0.0 (fully transparent) to 1.0 (no additional
+ transparency). If an attempt is made to set the attribute to a value
+ outside this range, including Infinity and Not-a-Number (NaN)
+ values, the attribute must retain its previous value. When the
+ context is created, the <code title=dom-context-2d-globalAlpha><a href=#dom-context-2d-globalalpha>globalAlpha</a></code> attribute must
+ initially have the value 1.0.</p>
+
+ <p>The <dfn id=dom-context-2d-globalcompositeoperation title=dom-context-2d-globalCompositeOperation><code>globalCompositeOperation</code></dfn>
+ attribute sets how shapes and images are drawn onto the existing
+ bitmap, once they have had <code title=dom-context-2d-globalAlpha><a href=#dom-context-2d-globalalpha>globalAlpha</a></code> and the
+ current transformation matrix applied. It must be set to a value
+ from the following list. In the descriptions below, the source
+ image, <var title="">A</var>, is the shape or image being rendered,
+ and the destination image, <var title="">B</var>, is the current
+ state of the bitmap.</p>
+
+ </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>. <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.</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>. <span class=note>Display the
+ source image wherever both the source image and destination image
+ 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>. <span class=note>Display the
+ source image wherever the source image is opaque and the
+ destination image is transparent. Display transparency
+ 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>. <span class=note>Display the
+ source image wherever the source image is opaque. Display the
+ 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>. <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>. <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>. <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>. <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><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>. <span class=note>Display the
+ sum of the source image and destination image, with color values
+ approaching 255 (100%) 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). <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>. <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>
+
+ <dd class=impl>Vendor-specific extensions to the list of
+ composition operators should use this syntax.</dd>
+
+ </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 <a href=#case-sensitive>case-sensitive</a> match for one of the values given
+ above.</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>
+
+ <p>When the context is created, the <code title=dom-context-2d-globalCompositeOperation><a href=#dom-context-2d-globalcompositeoperation>globalCompositeOperation</a></code>
+ attribute must initially have the value
+ <code>source-over</code>.</p>
+
+ </div>
+
+
+
+
+ <h6 id=shadows><span class=secno>4.8.11.1.13 </span><dfn>Shadows</dfn></h6>
+
+ <p>All drawing operations are affected by the four global shadow
+ attributes.</p>
+
+ <dl class=domintro><dt><var title="">context</var> . <code title=dom-context-2d-shadowColor><a href=#dom-context-2d-shadowcolor>shadowColor</a></code> [ = <var title="">value</var> ]</dt>
+
+ <dd>
+
+ <p>Returns the current shadow color.</p>
+
+ <p>Can be set, to change the shadow color. Values that cannot be parsed as CSS colors are ignored.</p>
+
+ </dd>
+
+ <dt><var title="">context</var> . <code title=dom-context-2d-shadowOffsetX><a href=#dom-context-2d-shadowoffsetx>shadowOffsetX</a></code> [ = <var title="">value</var> ]</dt>
+ <dt><var title="">context</var> . <code title=dom-context-2d-shadowOffsetY><a href=#dom-context-2d-shadowoffsety>shadowOffsetY</a></code> [ = <var title="">value</var> ]</dt>
+
+ <dd>
+
+ <p>Returns the current shadow offset.</p>
+
+ <p>Can be set, to change the shadow offset. Values that are not finite numbers are ignored.</p>
+
+ </dd>
+
+ <dt><var title="">context</var> . <code title=dom-context-2d-shadowBlur><a href=#dom-context-2d-shadowblur>shadowBlur</a></code> [ = <var title="">value</var> ]</dt>
+
+ <dd>
+
+ <p>Returns the current level of blur applied to shadows.</p>
+
+ <p>Can be set, to change the blur level. Values that are not finite numbers greater than or equal to zero are ignored.</p>
+
+ </dd>
+
+ </dl><div class=impl>
+
+ <p>The <dfn id=dom-context-2d-shadowcolor title=dom-context-2d-shadowColor><code>shadowColor</code></dfn>
+ attribute sets the color of the shadow.</p>
+
+ <p>When the context is created, the <code title=dom-context-2d-shadowColor><a href=#dom-context-2d-shadowcolor>shadowColor</a></code> attribute
+ initially must be fully-transparent black.</p>
+
+ <p>On getting, the <a href=#serialization-of-a-color title="serialization of a
+ color">serialization of the color</a> must be returned.</p>
+
+ <p>On setting, the new value must be <a href=#parsed-as-a-css-color-value>parsed as a CSS
+ <color> value</a> and the color assigned. If the value
+ cannot be parsed as a CSS <color> value then it must be
+ ignored, and the attribute must retain its previous value. <a href=#refsCSSCOLOR>[CSSCOLOR]</a></p>
+
+ <p>The <dfn id=dom-context-2d-shadowoffsetx title=dom-context-2d-shadowOffsetX><code>shadowOffsetX</code></dfn>
+ and <dfn id=dom-context-2d-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. They are
+ not affected by the current transformation matrix.</p>
+
+ <p>When the context is created, the shadow offset attributes must
+ 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, except if the
+ value is infinite or NaN, in which case the new value must be
+ ignored.</p>
+
+ <p>The <dfn id=dom-context-2d-shadowblur title=dom-context-2d-shadowBlur><code>shadowBlur</code></dfn>
+ attribute specifies the level of the blurring effect. (The units do
+ not map to coordinate space units, and are not affected by the
+ current transformation matrix.)</p>
+
+ <p>When the context is created, the <code title=dom-context-2d-shadowBlur><a href=#dom-context-2d-shadowblur>shadowBlur</a></code> attribute must
+ initially have the value <code>0</code>.</p>
+
+ <p>On getting, the attribute must return its current value. On
+ setting the attribute must be set to the new value, except if the
+ value is negative, infinite or NaN, in which case the new value must
+ be ignored.</p>
+
+ <p><dfn id=when-shadows-are-drawn title="when shadows are drawn">Shadows are only drawn
+ if</dfn> the opacity component of the alpha component of the color
+ of <code title=dom-context-2d-shadowColor><a href=#dom-context-2d-shadowcolor>shadowColor</a></code> is
+ non-zero and either the <code title=dom-context-2d-shadowBlur><a href=#dom-context-2d-shadowblur>shadowBlur</a></code> is non-zero, or
+ the <code title=dom-context-2d-shadowOffsetX><a href=#dom-context-2d-shadowoffsetx>shadowOffsetX</a></code>
+ is non-zero, or the <code title=dom-context-2d-shadowOffsetY><a href=#dom-context-2d-shadowoffsety>shadowOffsetY</a></code> is
+ non-zero.</p>
+
+ <p class=critical>It is likely that this will change: browser
+ vendors have indicated an interest in changing the processing model
+ for shadows such that they only draw when the composition operator
+ is "source-over" (the default). <a href=http://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2011-May/thread.html#31457>Read
+ more...</a></p>
+
+ <p><a href=#when-shadows-are-drawn>When shadows are drawn</a>, they must be rendered as follows:</p>
+
+ <ol><li> <p>Let <var title="">A</var> be an infinite transparent black
+ bitmap on which the source image for which a shadow is being
+ created has been rendered.</p> </li>
+
+ <li> <p>Let <var title="">B</var> be an infinite transparent black
+ bitmap, with a coordinate space and an origin identical to <var title="">A</var>.</p> </li>
+
+ <li> <p>Copy the alpha channel of <var title="">A</var> to <var title="">B</var>, offset by <code title=dom-context-2d-shadowOffsetX><a href=#dom-context-2d-shadowoffsetx>shadowOffsetX</a></code> in the
+ positive <var title="">x</var> direction, and <code title=dom-context-2d-shadowOffsetY><a href=#dom-context-2d-shadowoffsety>shadowOffsetY</a></code> in the
+ positive <var title="">y</var> direction.</p> </li>
+
+ <li> <p>If <code title=dom-context-2d-shadowBlur><a href=#dom-context-2d-shadowblur>shadowBlur</a></code> is greater than
+ 0:</p>
+
+ <ol><li> <p>Let <var title="">σ</var> be half the value of
+ <code title=dom-context-2d-shadowBlur><a href=#dom-context-2d-shadowblur>shadowBlur</a></code>.</li>
+
+ <li> <p>Perform a 2D Gaussian Blur on <var title="">B</var>,
+ using <var title="">σ</var> as the standard deviation.</p>
+ <!-- wish i could find a reference for this --> </li>
+
+ </ol><p>User agents may limit values of <var title="">σ</var> to
+ an implementation-specific maximum value to avoid exceeding
+ hardware limitations during the Gaussian blur operation.</p>
+
+ </li>
+
+ <li> <p>Set the red, green, and blue components of every pixel in
+ <var title="">B</var> to the red, green, and blue components
+ (respectively) of the color of <code title=dom-context-2d-shadowColor><a href=#dom-context-2d-shadowcolor>shadowColor</a></code>.</p> </li>
+
+ <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 <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).</p>
+
+
+
<div class=impl>
- <h6 id=drawing-model><span class=secno>4.8.11.1.13 </span><dfn>Drawing model</dfn></h6>
+ <h6 id=drawing-model><span class=secno>4.8.11.1.14 </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>
@@ -37821,7 +37834,7 @@
</ol></div>
- <h6 id=best-practices><span class=secno>4.8.11.1.14 </span>Best practices</h6>
+ <h6 id=best-practices><span class=secno>4.8.11.1.15 </span>Best practices</h6>
<p><i>This section is non-normative.</i></p>
@@ -37883,7 +37896,7 @@
attribute.</p>
- <h6 id=examples><span class=secno>4.8.11.1.15 </span>Examples</h6>
+ <h6 id=examples><span class=secno>4.8.11.1.16 </span>Examples</h6>
<p><i>This section is non-normative.</i></p>
@@ -81188,7 +81201,7 @@
U+002F SOLIDUS (/).</p>
- <h4 id=text-1><span class=secno>12.1.3 </span>Text</h4>
+ <h4 id=text-0><span class=secno>12.1.3 </span>Text</h4>
<p><dfn id=syntax-text title=syntax-text>Text</dfn> is allowed inside elements,
attribute values, and comments. Extra constraints are placed on what
@@ -91312,7 +91325,7 @@
<!--TOPIC:Rendering-->
<div class=impl>
- <h4 id=images-0><span class=secno>14.4.2 </span>Images</h4>
+ <h4 id=images><span class=secno>14.4.2 </span>Images</h4>
<p>When an <code><a href=#the-img-element>img</a></code> element or an <code><a href=#the-input-element>input</a></code> element
when its <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in
Modified: index
===================================================================
--- index 2012-03-07 00:40:51 UTC (rev 7021)
+++ index 2012-03-07 22:53:20 UTC (rev 7022)
@@ -600,19 +600,20 @@
<ol>
<li><a href=#the-canvas-state><span class=secno>4.8.11.1.1 </span>The canvas state</a></li>
<li><a href=#transformations><span class=secno>4.8.11.1.2 </span>Transformations</a></li>
- <li><a href=#compositing><span class=secno>4.8.11.1.3 </span>Compositing</a></li>
- <li><a href=#colors-and-styles><span class=secno>4.8.11.1.4 </span>Colors and styles</a></li>
- <li><a href=#line-styles><span class=secno>4.8.11.1.5 </span>Line styles</a></li>
- <li><a href=#shadows><span class=secno>4.8.11.1.6 </span>Shadows</a></li>
- <li><a href=#simple-shapes-(rectangles)><span class=secno>4.8.11.1.7 </span>Simple shapes (rectangles)</a></li>
- <li><a href=#complex-shapes-(paths)><span class=secno>4.8.11.1.8 </span>Complex shapes (paths)</a></li>
- <li><a href=#the-current-default-path><span class=secno>4.8.11.1.9 </span>The current default path</a></li>
- <li><a href=#text-0><span class=secno>4.8.11.1.10 </span>Text</a></li>
- <li><a href=#images><span class=secno>4.8.11.1.11 </span>Images</a></li>
- <li><a href=#pixel-manipulation><span class=secno>4.8.11.1.12 </span>Pixel manipulation</a></li>
- <li><a href=#drawing-model><span class=secno>4.8.11.1.13 </span>Drawing model</a></li>
- <li><a href=#best-practices><span class=secno>4.8.11.1.14 </span>Best practices</a></li>
- <li><a href=#examples><span class=secno>4.8.11.1.15 </span>Examples</a></ol></li>
+ <li><a href=#line-styles><span class=secno>4.8.11.1.3 </span>Line styles</a></li>
+ <li><a href=#text-styles><span class=secno>4.8.11.1.4 </span>Text styles</a></li>
+ <li><a href=#building-paths><span class=secno>4.8.11.1.5 </span>Building paths</a></li>
+ <li><a href=#fill-and-stroke-styles><span class=secno>4.8.11.1.6 </span>Fill and stroke styles</a></li>
+ <li><a href=#the-current-default-path><span class=secno>4.8.11.1.7 </span>The current default path</a></li>
+ <li><a href=#drawing-rectangles-to-the-canvas><span class=secno>4.8.11.1.8 </span>Drawing rectangles to the canvas</a></li>
+ <li><a href=#drawing-text-to-the-canvas><span class=secno>4.8.11.1.9 </span>Drawing text to the canvas</a></li>
+ <li><a href=#drawing-images-to-the-canvas><span class=secno>4.8.11.1.10 </span>Drawing images to the canvas</a></li>
+ <li><a href=#pixel-manipulation><span class=secno>4.8.11.1.11 </span>Pixel manipulation</a></li>
+ <li><a href=#compositing><span class=secno>4.8.11.1.12 </span>Compositing</a></li>
+ <li><a href=#shadows><span class=secno>4.8.11.1.13 </span>Shadows</a></li>
+ <li><a href=#drawing-model><span class=secno>4.8.11.1.14 </span>Drawing model</a></li>
+ <li><a href=#best-practices><span class=secno>4.8.11.1.15 </span>Best practices</a></li>
+ <li><a href=#examples><span class=secno>4.8.11.1.16 </span>Examples</a></ol></li>
<li><a href=#color-spaces-and-color-correction><span class=secno>4.8.11.2 </span>Color spaces and color correction</a></li>
<li><a href=#security-with-canvas-elements><span class=secno>4.8.11.3 </span>Security with <code>canvas</code> elements</a></ol></li>
<li><a href=#the-map-element><span class=secno>4.8.12 </span>The <code>map</code> element</a></li>
@@ -1108,7 +1109,7 @@
<li><a href=#optional-tags><span class=secno>12.1.2.4 </span>Optional tags</a></li>
<li><a href=#element-restrictions><span class=secno>12.1.2.5 </span>Restrictions on content models</a></li>
<li><a href=#cdata-rcdata-restrictions><span class=secno>12.1.2.6 </span>Restrictions on the contents of raw text and RCDATA elements</a></ol></li>
- <li><a href=#text-1><span class=secno>12.1.3 </span>Text</a>
+ <li><a href=#text-0><span class=secno>12.1.3 </span>Text</a>
<ol>
<li><a href=#newlines><span class=secno>12.1.3.1 </span>Newlines</a></ol></li>
<li><a href=#character-references><span class=secno>12.1.4 </span>Character references</a></li>
@@ -1271,7 +1272,7 @@
<li><a href=#replaced-elements><span class=secno>14.4 </span>Replaced elements</a>
<ol>
<li><a href=#embedded-content-2><span class=secno>14.4.1 </span>Embedded content</a></li>
- <li><a href=#images-0><span class=secno>14.4.2 </span>Images</a></li>
+ <li><a href=#images><span class=secno>14.4.2 </span>Images</a></li>
<li><a href=#attributes-for-embedded-content-and-images><span class=secno>14.4.3 </span>Attributes for embedded content and images</a></li>
<li><a href=#image-maps-0><span class=secno>14.4.4 </span>Image maps</a></li>
<li><a href=#toolbars-0><span class=secno>14.4.5 </span>Toolbars</a></ol></li>
@@ -35242,560 +35243,10 @@
</div>
- <h6 id=compositing><span class=secno>4.8.11.1.3 </span>Compositing</h6>
- <dl class=domintro><dt><var title="">context</var> . <code title=dom-context-2d-globalAlpha><a href=#dom-context-2d-globalalpha>globalAlpha</a></code> [ = <var title="">value</var> ]</dt>
- <dd>
+ <h6 id=line-styles><span class=secno>4.8.11.1.3 </span>Line styles</h6>
- <p>Returns the current alpha value applied to rendering operations.</p>
-
- <p>Can be set, to change the alpha value. Values outside of the
- range 0.0 .. 1.0 are ignored.</p>
-
- </dd>
-
-
- <dt><var title="">context</var> . <code title=dom-context-2d-globalCompositeOperation><a href=#dom-context-2d-globalcompositeoperation>globalCompositeOperation</a></code> [ = <var title="">value</var> ]</dt>
-
- <dd>
-
- <p>Returns the current composition operation, from the list below.</p>
-
- <p>Can be set, to change the composition operation. Unknown values
- are ignored.</p>
-
- </dd>
-
- </dl><div class=impl>
-
- <p>All drawing operations are affected by the global compositing
- attributes, <code title=dom-context-2d-globalAlpha><a href=#dom-context-2d-globalalpha>globalAlpha</a></code> and <code title=dom-context-2d-globalCompositeOperation><a href=#dom-context-2d-globalcompositeoperation>globalCompositeOperation</a></code>.</p>
-
- <!-- conformance criteria for painting are described in the "drawing
- model" section below -->
-
- <p>The <dfn id=dom-context-2d-globalalpha title=dom-context-2d-globalAlpha><code>globalAlpha</code></dfn>
- attribute gives an alpha value that is applied to shapes and images
- before they are composited onto the canvas. The value must be in the
- range from 0.0 (fully transparent) to 1.0 (no additional
- transparency). If an attempt is made to set the attribute to a value
- outside this range, including Infinity and Not-a-Number (NaN)
- values, the attribute must retain its previous value. When the
- context is created, the <code title=dom-context-2d-globalAlpha><a href=#dom-context-2d-globalalpha>globalAlpha</a></code> attribute must
- initially have the value 1.0.</p>
-
- <p>The <dfn id=dom-context-2d-globalcompositeoperation title=dom-context-2d-globalCompositeOperation><code>globalCompositeOperation</code></dfn>
- attribute sets how shapes and images are drawn onto the existing
- bitmap, once they have had <code title=dom-context-2d-globalAlpha><a href=#dom-context-2d-globalalpha>globalAlpha</a></code> and the
- current transformation matrix applied. It must be set to a value
- from the following list. In the descriptions below, the source
- image, <var title="">A</var>, is the shape or image being rendered,
- and the destination image, <var title="">B</var>, is the current
- state of the bitmap.</p>
-
- </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>. <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.</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>. <span class=note>Display the
- source image wherever both the source image and destination image
- 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>. <span class=note>Display the
- source image wherever the source image is opaque and the
- destination image is transparent. Display transparency
- 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>. <span class=note>Display the
- source image wherever the source image is opaque. Display the
- 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>. <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>. <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>. <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>. <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><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>. <span class=note>Display the
- sum of the source image and destination image, with color values
- approaching 255 (100%) 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). <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>. <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>
-
- <dd class=impl>Vendor-specific extensions to the list of
- composition operators should use this syntax.</dd>
-
- </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 <a href=#case-sensitive>case-sensitive</a> match for one of the values given
- above.</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>
-
- <p>When the context is created, the <code title=dom-context-2d-globalCompositeOperation><a href=#dom-context-2d-globalcompositeoperation>globalCompositeOperation</a></code>
- attribute must initially have the value
- <code>source-over</code>.</p>
-
- </div>
-
-
- <h6 id=colors-and-styles><span class=secno>4.8.11.1.4 </span>Colors and styles</h6>
-
- <dl class=domintro><dt><var title="">context</var> . <code title=dom-context-2d-strokeStyle><a href=#dom-context-2d-strokestyle>strokeStyle</a></code> [ = <var title="">value</var> ]</dt>
-
- <dd>
-
- <p>Returns the current style used for stroking shapes.</p>
-
- <p>Can be set, to change the stroke style.</p>
-
- <p>The style can be either a string containing a CSS color, or a
- <code><a href=#canvasgradient>CanvasGradient</a></code> or <code><a href=#canvaspattern>CanvasPattern</a></code>
- object. Invalid values are ignored.</p>
-
- </dd>
-
- <dt><var title="">context</var> . <code title=dom-context-2d-fillStyle><a href=#dom-context-2d-fillstyle>fillStyle</a></code> [ = <var title="">value</var> ]</dt>
-
- <dd>
-
- <p>Returns the current style used for filling shapes.</p>
-
- <p>Can be set, to change the fill style.</p>
-
- <p>The style can be either a string containing a CSS color, or a
- <code><a href=#canvasgradient>CanvasGradient</a></code> or <code><a href=#canvaspattern>CanvasPattern</a></code>
- object. Invalid values are ignored.</p>
-
- </dd>
-
- </dl><div class=impl>
-
- <!-- v6 feature requests:
-
- * Getting and setting colours by component to bypass the CSS value parsing.
-
- Either:
- context.fillStyle.red += 1;
-
- Or:
- var array = context.fillStyle;
- array[1] += 1;
- context.fillStyle = array;
-
- * A more performant way of setting colours in general, e.g.:
-
- context.setFillColor(r,g,b,a) // already supported by webkit
-
- Or:
-
- context.fillStyle = 0xRRGGBBAA; // set a 32bit int directly
-
- * fill rule for deciding between winding and even-odd algorithms.
- SVG has fill-rule: nonzero | evenodd
- http://www.w3.org/TR/SVG/painting.html#FillProperties
- see also mozFillRule: http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2011-June/032002.html
-
- -->
-
- <p>The <dfn id=dom-context-2d-strokestyle title=dom-context-2d-strokeStyle><code>strokeStyle</code></dfn>
- attribute represents the color or style to use for the lines around
- shapes, and the <dfn id=dom-context-2d-fillstyle title=dom-context-2d-fillStyle><code>fillStyle</code></dfn>
- attribute represents the color or style to use inside the
- shapes.</p>
-
- <p>Both attributes can be either strings,
- <code><a href=#canvasgradient>CanvasGradient</a></code>s, or <code><a href=#canvaspattern>CanvasPattern</a></code>s. On
- setting, strings must be <a href=#parsed-as-a-css-color-value title="parsed as a CSS <color>
- value">parsed as CSS <color> values</a> and the color
- assigned, and <code><a href=#canvasgradient>CanvasGradient</a></code> and
- <code><a href=#canvaspattern>CanvasPattern</a></code> objects must be assigned themselves. <a href=#refsCSSCOLOR>[CSSCOLOR]</a> If the value is a string but
- cannot be <a href=#parsed-as-a-css-color-value>parsed as a CSS <color> value</a>, or is
- neither a string, a <code><a href=#canvasgradient>CanvasGradient</a></code>, nor a
- <code><a href=#canvaspattern>CanvasPattern</a></code>, then it must be ignored, and the
- attribute must retain its previous value.</p>
-
- <p>When set to a <code><a href=#canvaspattern>CanvasPattern</a></code> or
- <code><a href=#canvasgradient>CanvasGradient</a></code> object, the assignment is
- <a href=#live>live</a>, meaning that changes made to the object after the
- assignment do affect subsequent stroking or filling of shapes.</p>
-
- <p>On getting, if the value is a color, then the <a href=#serialization-of-a-color title="serialization of a color">serialization of the color</a>
- must be returned. Otherwise, if it is not a color but a
- <code><a href=#canvasgradient>CanvasGradient</a></code> or <code><a href=#canvaspattern>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>
-
- <p>The <dfn id=serialization-of-a-color>serialization 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, if the alpha value is greater than zero then a
- U+002E FULL STOP (representing the decimal point), if the alpha
- value is greater than zero then one or more digits in the range 0-9
- (U+0030 to U+0039) representing the fractional part of the alpha<!--
- value with no trailing zeros (implied by next sentence)-->, and
- finally a U+0029 RIGHT PARENTHESIS. User agents must express the
- fractional part of the alpha value, if any, with the level of
- precision necessary for the alpha value, when reparsed, to be
- interpreted as the same alpha value.</p> <!-- if people complain
- this is unreadable, expand it into a <dl> with two nested <ol>s -->
-
- <p>When the context is created, the <code title=dom-context-2d-strokeStyle><a href=#dom-context-2d-strokestyle>strokeStyle</a></code> and <code title=dom-context-2d-fillStyle><a href=#dom-context-2d-fillstyle>fillStyle</a></code> attributes must
- initially have the string value <code title="">#000000</code>.</p>
-
- <p>When the value is a color, it must not be affected by the
- transformation matrix when used to draw on the canvas.</p> <!-- so
- singular matrices don't affect solid color fillStyles -->
-
- </div>
-
- <hr><p>There are two types of gradients, linear gradients and radial
- gradients, both represented by objects implementing the opaque
- <code><a href=#canvasgradient>CanvasGradient</a></code> interface.</p>
-
- <p id=interpolation>Once a gradient has been created (see below),
- stops are placed along it to define how the colors are distributed
- along the gradient. <span class=impl>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.</span></p>
-
- <dl class=domintro><dt><var title="">gradient</var> . <code title=dom-canvasgradient-addColorStop><a href=#dom-canvasgradient-addcolorstop>addColorStop</a></code>(<var title="">offset</var>, <var title="">color</var>)</dt>
-
- <dd>
-
- <p>Adds a color stop with the given color to the gradient at the
- given offset. 0.0 is the offset at one end of the gradient, 1.0 is
- the offset at the other end.</p>
-
- <p>Throws an <code><a href=#indexsizeerror>IndexSizeError</a></code> exception if the offset
- is out of range. Throws a <code><a href=#syntaxerror>SyntaxError</a></code> exception if the
- color cannot be parsed.</p>
-
- </dd>
-
- <dt><var title="">gradient</var> = <var title="">context</var> . <code title=dom-context-2d-createLinearGradient><a href=#dom-context-2d-createlineargradient>createLinearGradient</a></code>(<var title="">x0</var>, <var title="">y0</var>, <var title="">x1</var>, <var title="">y1</var>)</dt>
-
- <dd>
-
- <p>Returns a <code><a href=#canvasgradient>CanvasGradient</a></code> object that represents a
- linear gradient that paints along the line given by the
- coordinates represented by the arguments.</p>
-
- <p>If any of the arguments are not finite numbers, throws a
- <code><a href=#notsupportederror>NotSupportedError</a></code> exception.</p>
-
- </dd>
-
- <dt><var title="">gradient</var> = <var title="">context</var> . <code title=dom-context-2d-createRadialGradient><a href=#dom-context-2d-createradialgradient>createRadialGradient</a></code>(<var title="">x0</var>, <var title="">y0</var>, <var title="">r0</var>, <var title="">x1</var>, <var title="">y1</var>, <var title="">r1</var>)</dt>
-
- <dd>
-
- <p>Returns a <code><a href=#canvasgradient>CanvasGradient</a></code> object that represents a
- radial gradient that paints along the cone given by the circles
- represented by the arguments.</p>
-
- <p>If any of the arguments are not finite numbers, throws a
- <code><a href=#notsupportederror>NotSupportedError</a></code> exception. If either of the radii
- are negative, throws an <code><a href=#indexsizeerror>IndexSizeError</a></code> exception.</p>
-
- </dd>
-
- </dl><div class=impl>
-
- <p>The <dfn id=dom-canvasgradient-addcolorstop title=dom-canvasgradient-addColorStop><code>addColorStop(<var title="">offset</var>, <var title="">color</var>)</code></dfn>
- method on the <code><a href=#canvasgradient>CanvasGradient</a></code> interface adds a new stop
- to a gradient. If the <var title="">offset</var> is less than 0,
- greater than 1, infinite, or NaN, then an
- <code><a href=#indexsizeerror>IndexSizeError</a></code> exception must be thrown. If the <var title="">color</var> cannot be <a href=#parsed-as-a-css-color-value>parsed as a CSS <color>
- value</a>, then a <code><a href=#syntaxerror>SyntaxError</a></code> exception must be
- thrown. 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 added at the same
- offset 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 id=dom-context-2d-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
- that represent the start point (<var title="">x0</var>, <var title="">y0</var>) and end point (<var title="">x1</var>, <var title="">y1</var>) of the gradient. If any of the arguments to <code title=dom-context-2d-createLinearGradient><a href=#dom-context-2d-createlineargradient>createLinearGradient()</a></code>
- are infinite or NaN, the method must throw a
- <code><a href=#notsupportederror>NotSupportedError</a></code> exception. Otherwise, the method must
- return a linear <code><a href=#canvasgradient>CanvasGradient</a></code> initialized with the
- specified line.</p>
-
- <p>Linear gradients must be rendered such 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 <a href=#interpolation>interpolation and
- extrapolation</a> described above). The points in the linear
- gradient must be transformed as described by the <a href=#transformations title=dom-context-2d-transformation>current transformation
- matrix</a> when rendering.</p>
-
- <p>If <span title=""><var title="">x0</var> = <var title="">x1</var></span> and <span title=""><var title="">y0</var> = <var title="">y1</var></span>, then
- the linear gradient must paint nothing.</p>
-
- <p>The <dfn id=dom-context-2d-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 three representing the start circle with origin (<var title="">x0</var>, <var title="">y0</var>) and radius <var title="">r0</var>, and the last three representing the end circle
- with origin (<var title="">x1</var>, <var title="">y1</var>) and
- radius <var title="">r1</var>. The values are in coordinate space
- units. If any of the arguments are infinite or NaN, a
- <code><a href=#notsupportederror>NotSupportedError</a></code> exception must be thrown. If either
- of <var title="">r0</var> or <var title="">r1</var> are negative, an
- <code><a href=#indexsizeerror>IndexSizeError</a></code> exception must be thrown. Otherwise,
- the method must return a radial <code><a href=#canvasgradient>CanvasGradient</a></code>
- initialized with the two specified circles.</p>
-
- <p>Radial gradients must be rendered by following these steps:</p>
-
- <ol><li><p>If <span title=""><var title="">x<sub>0</sub></var> = <var title="">x<sub>1</sub></var></span> and <span title=""><var title="">y<sub>0</sub></var> = <var title="">y<sub>1</sub></var></span> and <span title=""><var title="">r<sub>0</sub></var> = <var title="">r<sub>1</sub></var></span>, then the radial gradient must
- paint nothing. Abort these steps.</li>
-
- <li>
-
- <p>Let <span title="">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 title="">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 title="">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 at
- that position on the gradient (with the colors coming from the <a href=#interpolation>interpolation and extrapolation</a>
- described above).</p>
-
- </li>
-
- <li><p>For all values of <var title="">ω</var> where <span title="">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 <span title="">r(<var title="">ω</var>)</span> at position (<span title="">x(<var title="">ω</var>)</span>, <span title="">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.</li>
-
- </ol><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).</p>
-
- <p>The resulting radial gradient must then be transformed as
- described by the <a href=#transformations title=dom-context-2d-transformation>current
- transformation matrix</a> when rendering.</p>
-
- <p>Gradients must be painted only where the relevant stroking or
- filling effects requires that they be drawn.</p>
-
- </div>
-
- <hr><p>Patterns are represented by objects implementing the opaque
- <code><a href=#canvaspattern>CanvasPattern</a></code> interface.</p>
-
- <dl class=domintro><dt><var title="">pattern</var> = <var title="">context</var> . <code title=dom-context-2d-createPattern><a href=#dom-context-2d-createpattern>createPattern</a></code>(<var title="">image</var>, <var title="">repetition</var>)</dt>
-
- <dd>
-
- <p>Returns a <code><a href=#canvaspattern>CanvasPattern</a></code> object that uses the given image
- and repeats in the direction(s) given by the <var title="">repetition</var> argument.</p>
-
- <p>The allowed values for <var title="">repetition</var> are <code title="">repeat</code> (both directions), <code title="">repeat-x</code> (horizontal only), <code title="">repeat-y</code> (vertical only), and <code title="">no-repeat</code> (neither). If the <var title="">repetition</var> argument is empty, the value <code title="">repeat</code> is used.</p>
-
- <p>If the image has no image data, throws an
- <code><a href=#invalidstateerror>InvalidStateError</a></code> exception. If the second argument
- isn't one of the allowed values, throws a <code><a href=#syntaxerror>SyntaxError</a></code>
- exception. If the image isn't yet fully decoded, then the method
- returns null.</p>
-
- </dd>
-
- </dl><div class=impl>
-
- <p>To create objects of this type, the <dfn id=dom-context-2d-createpattern title=dom-context-2d-createPattern><code>createPattern(<var title="">image</var>, <var title="">repetition</var>)</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>,
- <code><a href=#htmlcanvaselement>HTMLCanvasElement</a></code>, or <code><a href=#htmlvideoelement>HTMLVideoElement</a></code>
- object). Modifying this image after calling the <code title=dom-context-2d-createPattern><a href=#dom-context-2d-createpattern>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 title="">no-repeat</code>. If the empty string is specified,
- <code title="">repeat</code> must be assumed. If an unrecognized value
- is given, then the user agent must throw a <code><a href=#syntaxerror>SyntaxError</a></code>
- exception. User agents must recognize the four values described above
- exactly (e.g. they must not do case folding). Except as specified
- below, the method must return a <code><a href=#canvaspattern>CanvasPattern</a></code> object
- suitably initialized.</p>
-
- <p>The <var title="">image</var> argument is an instance of either
- <code><a href=#htmlimageelement>HTMLImageElement</a></code>, <code><a href=#htmlcanvaselement>HTMLCanvasElement</a></code>, or
- <code><a href=#htmlvideoelement>HTMLVideoElement</a></code>.</p> <!-- drawImage() has an equivalent
- paragraph -->
-
- <p>If the <var title="">image</var> argument is an
- <code><a href=#htmlimageelement>HTMLImageElement</a></code> object that is not <a href=#img-good title=img-good>fully decodable</a>, or if the <var title="">image</var> argument is an <code><a href=#htmlvideoelement>HTMLVideoElement</a></code>
- object whose <code title=dom-media-readyState><a href=#dom-media-readystate>readyState</a></code>
- attribute is either <code title=dom-media-HAVE_NOTHING><a href=#dom-media-have_nothing>HAVE_NOTHING</a></code> or <code title=dom-media-HAVE_METADATA><a href=#dom-media-have_metadata>HAVE_METADATA</a></code>, then the
- implementation must return null.</p> <!-- drawImage() has an
- equivalent paragraph -->
-
- <p>If the <var title="">image</var> argument is an
- <code><a href=#htmlcanvaselement>HTMLCanvasElement</a></code> object with either a horizontal
- dimension or a vertical dimension equal to zero, then the
- implementation must throw an <code><a href=#invalidstateerror>InvalidStateError</a></code>
- exception.</p>
- <!-- drawImage() has an equivalent paragraph -->
-
- <p>Patterns must be painted so that the top left of the first image
- is anchored at the origin of the coordinate space, and images are
- then repeated horizontally to the left and right, if the
- <code>repeat-x</code> string was specified, or vertically up and
- down, if the <code>repeat-y</code> string was specified, or in all
- four directions all over the canvas, if the <code>repeat</code>
- string was specified, to create the repeated pattern that is used
- for rendering. The images are not scaled by this process; one CSS
- pixel of the image must be painted on one coordinate space unit in
- generating the repeated pattern. When rendered, however, patterns
- must actually be painted only where the stroking or filling effect
- requires that they be drawn, and the repeated pattern must be
- affected by the current transformation matrix. Pixels not covered by
- the repeating pattern (if the <code>repeat</code> string was not
- specified) must be transparent black.</p>
-
- <p>If the original image data is a bitmap image, the value painted
- at a point in the area of the repetitions is computed by filtering
- the original image data. The user agent may use any filtering
- algorithm (for example bilinear interpolation or nearest-neighbor).
- When the filtering algorithm requires a pixel value from outside the
- original image data, it must instead use the value from wrapping the
- pixel's coordinates to the original image's dimensions. (That is,
- the filter uses 'repeat' behavior, regardless of the value of
- <var title="">repetition</var>.)
- <!-- drawImage() has a similar paragraph with different rules -->
-
- <p>When the <code title=dom-context-2d-createPattern><a href=#dom-context-2d-createpattern>createPattern()</a></code> method
- is passed an animated image as its <var title="">image</var>
- argument, the user agent must use the poster frame of the animation,
- or, if there is no poster frame, the first frame of the
- animation.</p>
- <!-- drawImage() has an equivalent paragraph -->
-
- <p>When the <var title="">image</var> argument is an
- <code><a href=#htmlvideoelement>HTMLVideoElement</a></code>, then the frame at the <a href=#current-playback-position>current
- playback position</a> must be used as the source image, and the
- source image's dimensions must be the <a href=#concept-video-intrinsic-width title=concept-video-intrinsic-width>intrinsic width</a> and
- <a href=#concept-video-intrinsic-height title=concept-video-intrinsic-height>intrinsic height</a>
- of the <a href=#media-resource>media resource</a> (i.e. after any aspect-ratio
- correction has been applied).</p>
- <!-- drawImage() has an equivalent paragraph -->
-
- <!--
- Requests for v5 features:
- * apply transforms to patterns, so you don't have to create
- transformed patterns manually by rendering them to an off-screen
- canvas then using that canvas as the pattern.
- -->
-
- </div>
-
- <div class=impl>
-
- <hr><p>If a radial gradient or repeated pattern is used when the
- transformation matrix is singular, the resulting style must be
- transparent black (otherwise the gradient or pattern would be
- collapsed to a point or line, leaving the other pixels undefined).
- Linear gradients and solid colors always define all points even with
- singular tranformation matrices.</p>
-
- </div>
-
-
-
- <h6 id=line-styles><span class=secno>4.8.11.1.5 </span>Line styles</h6>
-
<dl class=domintro><dt><var title="">context</var> . <code title=dom-context-2d-lineWidth><a href=#dom-context-2d-linewidth>lineWidth</a></code> [ = <var title="">value</var> ]</dt>
<dd>
@@ -35977,216 +35428,164 @@
</div>
- <h6 id=shadows><span class=secno>4.8.11.1.6 </span><dfn>Shadows</dfn></h6>
+ <h6 id=text-styles><span class=secno>4.8.11.1.4 </span>Text styles</h6>
- <p>All drawing operations are affected by the four global shadow
- attributes.</p>
+ <dl class=domintro><dt><var title="">context</var> . <code title=dom-context-2d-font><a href=#dom-context-2d-font>font</a></code> [ = <var title="">value</var> ]</dt>
- <dl class=domintro><dt><var title="">context</var> . <code title=dom-context-2d-shadowColor><a href=#dom-context-2d-shadowcolor>shadowColor</a></code> [ = <var title="">value</var> ]</dt>
-
<dd>
- <p>Returns the current shadow color.</p>
+ <p>Returns the current font settings.</p>
- <p>Can be set, to change the shadow color. Values that cannot be parsed as CSS colors are ignored.</p>
+ <p>Can be set, to change the font. The syntax is the same as for
+ the CSS 'font' property; values that cannot be parsed as CSS font
+ values are ignored.</p>
+ <p>Relative keywords and lengths are computed relative to the font
+ of the <code><a href=#the-canvas-element>canvas</a></code> element.</p>
+
</dd>
- <dt><var title="">context</var> . <code title=dom-context-2d-shadowOffsetX><a href=#dom-context-2d-shadowoffsetx>shadowOffsetX</a></code> [ = <var title="">value</var> ]</dt>
- <dt><var title="">context</var> . <code title=dom-context-2d-shadowOffsetY><a href=#dom-context-2d-shadowoffsety>shadowOffsetY</a></code> [ = <var title="">value</var> ]</dt>
+ <dt><var title="">context</var> . <code title=dom-context-2d-textAlign><a href=#dom-context-2d-textalign>textAlign</a></code> [ = <var title="">value</var> ]</dt>
<dd>
- <p>Returns the current shadow offset.</p>
+ <p>Returns the current text alignment settings.</p>
- <p>Can be set, to change the shadow offset. Values that are not finite numbers are ignored.</p>
+ <p>Can be set, to change the alignment. The possible values are
+ <code title="">start</code>, <code title="">end</code>, <code title="">left</code>, <code title="">right</code>, and <code title="">center</code>. Other values are ignored. The default is
+ <code title="">start</code>.</p>
</dd>
- <dt><var title="">context</var> . <code title=dom-context-2d-shadowBlur><a href=#dom-context-2d-shadowblur>shadowBlur</a></code> [ = <var title="">value</var> ]</dt>
+ <dt><var title="">context</var> . <code title=dom-context-2d-textBaseline><a href=#dom-context-2d-textbaseline>textBaseline</a></code> [ = <var title="">value</var> ]</dt>
<dd>
- <p>Returns the current level of blur applied to shadows.</p>
+ <p>Returns the current baseline alignment settings.</p>
- <p>Can be set, to change the blur level. Values that are not finite numbers greater than or equal to zero are ignored.</p>
+ <p>Can be set, to change the baseline alignment. The possible
+ values and their meanings are given below. Other values are
+ ignored. The default is <code title="">alphabetic</code>.</p>
</dd>
</dl><div class=impl>
- <p>The <dfn id=dom-context-2d-shadowcolor title=dom-context-2d-shadowColor><code>shadowColor</code></dfn>
- attribute sets the color of the shadow.</p>
+ <p>Objects that implement the <code><a href=#canvastext>CanvasText</a></code>
+ interface have attributes (defined in this section) that control how
+ text is laid out (rasterized or outlined) by the object.</p>
- <p>When the context is created, the <code title=dom-context-2d-shadowColor><a href=#dom-context-2d-shadowcolor>shadowColor</a></code> attribute
- initially must be fully-transparent black.</p>
+ <p>The <dfn id=dom-context-2d-font title=dom-context-2d-font><code>font</code></dfn> IDL
+ attribute, on setting, must be parsed the same way as the 'font'
+ property of CSS (but without supporting property-independent style
+ sheet syntax like 'inherit'), and the resulting font must be
+ assigned to the context, with the 'line-height' component forced to
+ 'normal', with the 'font-size' component converted to CSS pixels,
+ and with system fonts being computed to explicit values. If the new
+ value is syntactically incorrect (including using
+ property-independent style sheet syntax like 'inherit' or
+ 'initial'), then it must be ignored, without assigning a new font
+ value. <a href=#refsCSS>[CSS]</a></p>
- <p>On getting, the <a href=#serialization-of-a-color title="serialization of a
- color">serialization of the color</a> must be returned.</p>
+ <p>Font names must be interpreted in the context of the
+ <code><a href=#the-canvas-element>canvas</a></code> element's stylesheets; any fonts embedded using
+ <code title="">@font-face</code> must therefore be available once
+ they are loaded. (If a font is referenced before it is fully loaded,
+ then it must be treated as if it was an unknown font, falling back
+ to another as described by the relevant CSS specifications.) <a href=#refsCSSFONTS>[CSSFONTS]</a></p>
- <p>On setting, the new value must be <a href=#parsed-as-a-css-color-value>parsed as a CSS
- <color> value</a> and the color assigned. If the value
- cannot be parsed as a CSS <color> value then it must be
- ignored, and the attribute must retain its previous value. <a href=#refsCSSCOLOR>[CSSCOLOR]</a></p>
+ <!-- XXX Path objects don't have a canvas -->
- <p>The <dfn id=dom-context-2d-shadowoffsetx title=dom-context-2d-shadowOffsetX><code>shadowOffsetX</code></dfn>
- and <dfn id=dom-context-2d-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. They are
- not affected by the current transformation matrix.</p>
+ <p>Only vector fonts should be used by the user agent; if a user
+ agent were to use bitmap fonts then transformations would likely
+ make the font look very ugly.</p>
- <p>When the context is created, the shadow offset attributes must
- initially have the value <code>0</code>.</p>
+ <p>On getting, the <code title=dom-context-2d-font><a href=#dom-context-2d-font>font</a></code>
+ attribute must return the <a href=#serializing-a-css-value title="serializing a CSS
+ value">serialized form</a> of the current font of the context
+ (with no 'line-height' component). <a href=#refsCSSOM>[CSSOM]</a></p>
- <p>On getting, they must return their current value. On setting, the
- attribute being set must be set to the new value, except if the
- value is infinite or NaN, in which case the new value must be
- ignored.</p>
+ <div class=example>
- <p>The <dfn id=dom-context-2d-shadowblur title=dom-context-2d-shadowBlur><code>shadowBlur</code></dfn>
- attribute specifies the level of the blurring effect. (The units do
- not map to coordinate space units, and are not affected by the
- current transformation matrix.)</p>
+ <p>For example, after the following statement:</p>
- <p>When the context is created, the <code title=dom-context-2d-shadowBlur><a href=#dom-context-2d-shadowblur>shadowBlur</a></code> attribute must
- initially have the value <code>0</code>.</p>
+ <pre>context.font = 'italic 400 12px/2 Unknown Font, sans-serif';</pre>
- <p>On getting, the attribute must return its current value. On
- setting the attribute must be set to the new value, except if the
- value is negative, infinite or NaN, in which case the new value must
- be ignored.</p>
+ <p>...the expression <code title="">context.font</code> would
+ evaluate to the string "<code title="">italic 12px "Unknown Font", sans-serif</code>". The
+ "400" font-weight doesn't appear because that is the default
+ value. The line-height doesn't appear because it is forced to
+ "normal", the default value.</p>
- <p><dfn id=when-shadows-are-drawn title="when shadows are drawn">Shadows are only drawn
- if</dfn> the opacity component of the alpha component of the color
- of <code title=dom-context-2d-shadowColor><a href=#dom-context-2d-shadowcolor>shadowColor</a></code> is
- non-zero and either the <code title=dom-context-2d-shadowBlur><a href=#dom-context-2d-shadowblur>shadowBlur</a></code> is non-zero, or
- the <code title=dom-context-2d-shadowOffsetX><a href=#dom-context-2d-shadowoffsetx>shadowOffsetX</a></code>
- is non-zero, or the <code title=dom-context-2d-shadowOffsetY><a href=#dom-context-2d-shadowoffsety>shadowOffsetY</a></code> is
- non-zero.</p>
+ </div>
- <p class=critical>It is likely that this will change: browser
- vendors have indicated an interest in changing the processing model
- for shadows such that they only draw when the composition operator
- is "source-over" (the default). <a href=http://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2011-May/thread.html#31457>Read
- more...</a></p>
+ <p>When the object implementing the <code><a href=#canvastext>CanvasText</a></code>
+ interface is created, the font of the context must be set to 10px
+ sans-serif. When the 'font-size' component is set to lengths using
+ percentages, 'em' or 'ex' units, or the 'larger' or 'smaller'
+ keywords, these must be interpreted relative to the computed value
+ of the 'font-size' property of the corresponding <code><a href=#the-canvas-element>canvas</a></code>
+ element at the time that the attribute is set. When the
+ 'font-weight' component is set to the relative values 'bolder' and
+ 'lighter', these must be interpreted relative to the computed value
+ of the 'font-weight' property of the corresponding
+ <code><a href=#the-canvas-element>canvas</a></code> element at the time that the attribute is set.
+ If the computed values are undefined for a particular case (e.g.
+ because the <code><a href=#the-canvas-element>canvas</a></code> element is not <a href=#in-a-document>in a
+ <code>Document</code></a>), then the relative keywords must be
+ interpreted relative to the normal-weight 10px sans-serif
+ default.</p> <!-- XXX Path canvas issue again, twice -->
- <p><a href=#when-shadows-are-drawn>When shadows are drawn</a>, they must be rendered as follows:</p>
+ <p>The <dfn id=dom-context-2d-textalign title=dom-context-2d-textAlign><code>textAlign</code></dfn> IDL
+ attribute, on getting, must return the current value. On setting, if
+ the value is one of <code title="">start</code>, <code title="">end</code>, <code title="">left</code>, <code title="">right</code>, or <code title="">center</code>, then the
+ value must be changed to the new value. Otherwise, the new value
+ must be ignored. When the object implementing the
+ <code><a href=#canvastext>CanvasText</a></code> interface is created, the <code title=dom-context-2d-textAlign><a href=#dom-context-2d-textalign>textAlign</a></code> attribute must
+ initially have the value <code title="">start</code>.</p>
- <ol><li> <p>Let <var title="">A</var> be an infinite transparent black
- bitmap on which the source image for which a shadow is being
- created has been rendered.</p> </li>
+ <p>The <dfn id=dom-context-2d-textbaseline title=dom-context-2d-textBaseline><code>textBaseline</code></dfn>
+ IDL attribute, on getting, must return the current value. On
+ setting, if the value is one of <code title=dom-context-2d-textBaseline-top><a href=#dom-context-2d-textbaseline-top>top</a></code>, <code title=dom-context-2d-textBaseline-hanging><a href=#dom-context-2d-textbaseline-hanging>hanging</a></code>, <code title=dom-context-2d-textBaseline-middle><a href=#dom-context-2d-textbaseline-middle>middle</a></code>, <code title=dom-context-2d-textBaseline-alphabetic><a href=#dom-context-2d-textbaseline-alphabetic>alphabetic</a></code>,
+ <code title=dom-context-2d-textBaseline-ideographic><a href=#dom-context-2d-textbaseline-ideographic>ideographic</a></code>,
+ or <code title=dom-context-2d-textBaseline-bottom><a href=#dom-context-2d-textbaseline-bottom>bottom</a></code>,
+ then the value must be changed to the new value. Otherwise, the new
+ value must be ignored. When the object implementing the
+ <code><a href=#canvastext>CanvasText</a></code> interface is created, the <code title=dom-context-2d-textBaseline><a href=#dom-context-2d-textbaseline>textBaseline</a></code> attribute
+ must initially have the value <code title="">alphabetic</code>.</p>
- <li> <p>Let <var title="">B</var> be an infinite transparent black
- bitmap, with a coordinate space and an origin identical to <var title="">A</var>.</p> </li>
-
- <li> <p>Copy the alpha channel of <var title="">A</var> to <var title="">B</var>, offset by <code title=dom-context-2d-shadowOffsetX><a href=#dom-context-2d-shadowoffsetx>shadowOffsetX</a></code> in the
- positive <var title="">x</var> direction, and <code title=dom-context-2d-shadowOffsetY><a href=#dom-context-2d-shadowoffsety>shadowOffsetY</a></code> in the
- positive <var title="">y</var> direction.</p> </li>
-
- <li> <p>If <code title=dom-context-2d-shadowBlur><a href=#dom-context-2d-shadowblur>shadowBlur</a></code> is greater than
- 0:</p>
-
- <ol><li> <p>Let <var title="">σ</var> be half the value of
- <code title=dom-context-2d-shadowBlur><a href=#dom-context-2d-shadowblur>shadowBlur</a></code>.</li>
-
- <li> <p>Perform a 2D Gaussian Blur on <var title="">B</var>,
- using <var title="">σ</var> as the standard deviation.</p>
- <!-- wish i could find a reference for this --> </li>
-
- </ol><p>User agents may limit values of <var title="">σ</var> to
- an implementation-specific maximum value to avoid exceeding
- hardware limitations during the Gaussian blur operation.</p>
-
- </li>
-
- <li> <p>Set the red, green, and blue components of every pixel in
- <var title="">B</var> to the red, green, and blue components
- (respectively) of the color of <code title=dom-context-2d-shadowColor><a href=#dom-context-2d-shadowcolor>shadowColor</a></code>.</p> </li>
-
- <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 <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).</p>
-
-
- <h6 id=simple-shapes-(rectangles)><span class=secno>4.8.11.1.7 </span>Simple shapes (rectangles)</h6>
-
- <p>There are three methods that immediately draw rectangles to the
- bitmap. They each take four arguments; the first two give the <var title="">x</var> and <var title="">y</var> coordinates of the top
- left of the rectangle, and the second two give the width <var title="">w</var> and height <var title="">h</var> of the rectangle,
- respectively.</p>
-
- <div class=impl>
-
- <p>The <a href=#transformations title=dom-context-2d-transformation>current
- transformation matrix</a> must be applied to the following four
- coordinates, which form the path that must then be closed to get the
- specified rectangle: <span title="">(<var title="">x</var>, <var title="">y</var>)</span>, <span title="">(<span title=""><var title="">x</var>+<var title="">w</var></span>, <var title="">y</var>)</span>,
- <span title="">(<span title=""><var title="">x</var>+<var title="">w</var></span>,
- <span title=""><var title="">y</var>+<var title="">h</var></span>)</span>,
- <span title="">(<var title="">x</var>, <span title=""><var title="">y</var>+<var title="">h</var></span>)</span>.</p>
-
- <p>Shapes are painted without affecting the current default path,
- and are subject to the <a href=#clipping-region title="clipping region">clipping
- region</a>, and, with the exception of <code title=dom-context-2d-clearRect><a href=#dom-context-2d-clearrect>clearRect()</a></code>, also <a href=#shadows title=shadows>shadow effects</a>, <a href=#dom-context-2d-globalalpha title=dom-context-2d-globalAlpha>global alpha</a>, and <a href=#dom-context-2d-globalcompositeoperation title=dom-context-2d-globalCompositeOperation>global composition
- operators</a>.</p>
-
</div>
- <dl class=domintro><dt><var title="">context</var> . <code title=dom-context-2d-clearRect><a href=#dom-context-2d-clearrect>clearRect</a></code>(<var title="">x</var>, <var title="">y</var>, <var title="">w</var>, <var title="">h</var>)</dt>
+ <p>The <code title=dom-context-2d-textBaseline><a href=#dom-context-2d-textbaseline>textBaseline</a></code>
+ attribute's allowed keywords correspond to alignment points in the
+ font:</p>
- <dd>
+ <!-- this is filler to make sure the TCP packet boundary doesn't fall in the middle of one of the NCRs below -->
+ <!-- (because otherwise the parser in anolis screws it up) -->
+ <p><img alt="The top of the em square is roughly at the top of the glyphs in a font, the hanging baseline is where some glyphs like आ are anchored, the middle is half-way between the top of the em square and the bottom of the em square, the alphabetic baseline is where characters like Á, ÿ, f, and Ω are anchored, the ideographic baseline is where glyphs like 私 and 達 are anchored, and the bottom of the em square is roughly at the bottom of the glyphs in a font. The top and bottom of the bounding box can be far from these baselines, due to glyphs extending far outside the em square." height=300 src=http://images.whatwg.org/baselines.png width=738></p>
- <p>Clears all pixels on the canvas in the given rectangle to transparent black.</p>
+ <p>The keywords map to these alignment points as follows:</p>
- </dd>
+ <dl><dt><dfn id=dom-context-2d-textbaseline-top title=dom-context-2d-textBaseline-top><code>top</code></dfn>
+ <dd>The top of the em square</dd>
- <dt><var title="">context</var> . <code title=dom-context-2d-fillRect><a href=#dom-context-2d-fillrect>fillRect</a></code>(<var title="">x</var>, <var title="">y</var>, <var title="">w</var>, <var title="">h</var>)</dt>
+ <dt><dfn id=dom-context-2d-textbaseline-hanging title=dom-context-2d-textBaseline-hanging><code>hanging</code></dfn>
+ <dd>The hanging baseline</dd>
- <dd>
+ <dt><dfn id=dom-context-2d-textbaseline-middle title=dom-context-2d-textBaseline-middle><code>middle</code></dfn>
+ <dd>The middle of the em square</dd>
- <p>Paints the given rectangle onto the canvas, using the current fill style.</p>
+ <dt><dfn id=dom-context-2d-textbaseline-alphabetic title=dom-context-2d-textBaseline-alphabetic><code>alphabetic</code></dfn>
+ <dd>The alphabetic baseline</dd>
- </dd>
+ <dt><dfn id=dom-context-2d-textbaseline-ideographic title=dom-context-2d-textBaseline-ideographic><code>ideographic</code></dfn>
+ <dd>The ideographic baseline</dd>
- <dt><var title="">context</var> . <code title=dom-context-2d-strokeRect><a href=#dom-context-2d-strokerect>strokeRect</a></code>(<var title="">x</var>, <var title="">y</var>, <var title="">w</var>, <var title="">h</var>)</dt>
+ <dt><dfn id=dom-context-2d-textbaseline-bottom title=dom-context-2d-textBaseline-bottom><code>bottom</code></dfn>
+ <dd>The bottom of the em square</dd>
- <dd>
+ </dl><h6 id=building-paths><span class=secno>4.8.11.1.5 </span>Building paths</h6>
- <p>Paints the box that outlines the given rectangle onto the canvas, using the current stroke style.</p>
-
- </dd>
-
- </dl><div class=impl>
-
- <p>The <dfn id=dom-context-2d-clearrect title=dom-context-2d-clearRect><code>clearRect(<var title="">x</var>, <var title="">y</var>, <var title="">w</var>, <var title="">h</var>)</code></dfn> method must clear the pixels in the
- specified rectangle that also intersect the current clipping region
- to a fully transparent black, erasing any previous image. If either
- height or width are zero, this method has no effect.</p>
-
- <p>The <dfn id=dom-context-2d-fillrect title=dom-context-2d-fillRect><code>fillRect(<var title="">x</var>, <var title="">y</var>, <var title="">w</var>, <var title="">h</var>)</code></dfn> method must paint the specified
- rectangular area using the <code title=dom-context-2d-fillStyle><a href=#dom-context-2d-fillstyle>fillStyle</a></code>. If either height
- or width are zero, this method has no effect.</p>
-
- <p>The <dfn id=dom-context-2d-strokerect title=dom-context-2d-strokeRect><code>strokeRect(<var title="">x</var>, <var title="">y</var>, <var title="">w</var>, <var title="">h</var>)</code></dfn> method must stroke the specified
- rectangle's path using the <code title=dom-context-2d-strokeStyle><a href=#dom-context-2d-strokestyle>strokeStyle</a></code>, <code title=dom-context-2d-lineWidth><a href=#dom-context-2d-linewidth>lineWidth</a></code>, <code title=dom-context-2d-lineJoin><a href=#dom-context-2d-linejoin>lineJoin</a></code>, and (if
- appropriate) <code title=dom-context-2d-miterLimit><a href=#dom-context-2d-miterlimit>miterLimit</a></code> attributes. If
- both height and width are zero, this method has no effect, since
- there is no path to stroke (it's a point). If only one of the two is
- zero, then the method will draw a line instead (the path for the
- outline is just a straight line along the non-zero dimension).</p>
-
- </div>
-
-
- <h6 id=complex-shapes-(paths)><span class=secno>4.8.11.1.8 </span>Complex shapes (paths)</h6>
-
<p>Each object implementing the <code><a href=#canvaspathmethods>CanvasPathMethods</a></code>
interface has a <a href=#path>path</a>. A <dfn id=path>path</dfn> has a list of
zero or more subpaths. Each subpath consists of a list of one or
@@ -36435,8 +35834,401 @@
- <h6 id=the-current-default-path><span class=secno>4.8.11.1.9 </span>The current default path</h6>
+ <h6 id=fill-and-stroke-styles><span class=secno>4.8.11.1.6 </span>Fill and stroke styles</h6>
+
+ <dl class=domintro><dt><var title="">context</var> . <code title=dom-context-2d-fillStyle><a href=#dom-context-2d-fillstyle>fillStyle</a></code> [ = <var title="">value</var> ]</dt>
+
+ <dd>
+
+ <p>Returns the current style used for filling shapes.</p>
+
+ <p>Can be set, to change the fill style.</p>
+
+ <p>The style can be either a string containing a CSS color, or a
+ <code><a href=#canvasgradient>CanvasGradient</a></code> or <code><a href=#canvaspattern>CanvasPattern</a></code>
+ object. Invalid values are ignored.</p>
+
+ </dd>
+
+ <dt><var title="">context</var> . <code title=dom-context-2d-strokeStyle><a href=#dom-context-2d-strokestyle>strokeStyle</a></code> [ = <var title="">value</var> ]</dt>
+
+ <dd>
+
+ <p>Returns the current style used for stroking shapes.</p>
+
+ <p>Can be set, to change the stroke style.</p>
+
+ <p>The style can be either a string containing a CSS color, or a
+ <code><a href=#canvasgradient>CanvasGradient</a></code> or <code><a href=#canvaspattern>CanvasPattern</a></code>
+ object. Invalid values are ignored.</p>
+
+ </dd>
+
+ </dl><div class=impl>
+
+ <!-- v6 feature requests:
+
+ * Getting and setting colours by component to bypass the CSS value parsing.
+
+ Either:
+ context.fillStyle.red += 1;
+
+ Or:
+ var array = context.fillStyle;
+ array[1] += 1;
+ context.fillStyle = array;
+
+ * A more performant way of setting colours in general, e.g.:
+
+ context.setFillColor(r,g,b,a) // already supported by webkit
+
+ Or:
+
+ context.fillStyle = 0xRRGGBBAA; // set a 32bit int directly
+
+ * fill rule for deciding between winding and even-odd algorithms.
+ SVG has fill-rule: nonzero | evenodd
+ http://www.w3.org/TR/SVG/painting.html#FillProperties
+ see also mozFillRule: http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2011-June/032002.html
+
+ -->
+
+ <p>The <dfn id=dom-context-2d-fillstyle title=dom-context-2d-fillStyle><code>fillStyle</code></dfn>
+ attribute represents the color or style to use inside shapes, and
+ the <dfn id=dom-context-2d-strokestyle title=dom-context-2d-strokeStyle><code>strokeStyle</code></dfn>
+ attribute represents the color or style to use for the lines around
+ the shapes.</p>
+
+ <p>Both attributes can be either strings,
+ <code><a href=#canvasgradient>CanvasGradient</a></code>s, or <code><a href=#canvaspattern>CanvasPattern</a></code>s. On
+ setting, strings must be <a href=#parsed-as-a-css-color-value title="parsed as a CSS <color>
+ value">parsed as CSS <color> values</a> and the color
+ assigned, and <code><a href=#canvasgradient>CanvasGradient</a></code> and
+ <code><a href=#canvaspattern>CanvasPattern</a></code> objects must be assigned themselves. <a href=#refsCSSCOLOR>[CSSCOLOR]</a> If the value is a string but
+ cannot be <a href=#parsed-as-a-css-color-value>parsed as a CSS <color> value</a>, or is
+ neither a string, a <code><a href=#canvasgradient>CanvasGradient</a></code>, nor a
+ <code><a href=#canvaspattern>CanvasPattern</a></code>, then it must be ignored, and the
+ attribute must retain its previous value.</p>
+
+ <p>When set to a <code><a href=#canvaspattern>CanvasPattern</a></code> or
+ <code><a href=#canvasgradient>CanvasGradient</a></code> object, the assignment is
+ <a href=#live>live</a>, meaning that changes made to the object after the
+ assignment do affect subsequent stroking or filling of shapes.</p>
+
+ <p>On getting, if the value is a color, then the <a href=#serialization-of-a-color title="serialization of a color">serialization of the color</a>
+ must be returned. Otherwise, if it is not a color but a
+ <code><a href=#canvasgradient>CanvasGradient</a></code> or <code><a href=#canvaspattern>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>
+
+ <p>The <dfn id=serialization-of-a-color>serialization 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, if the alpha value is greater than zero then a
+ U+002E FULL STOP (representing the decimal point), if the alpha
+ value is greater than zero then one or more digits in the range 0-9
+ (U+0030 to U+0039) representing the fractional part of the alpha<!--
+ value with no trailing zeros (implied by next sentence)-->, and
+ finally a U+0029 RIGHT PARENTHESIS. User agents must express the
+ fractional part of the alpha value, if any, with the level of
+ precision necessary for the alpha value, when reparsed, to be
+ interpreted as the same alpha value.</p> <!-- if people complain
+ this is unreadable, expand it into a <dl> with two nested <ol>s -->
+
+ <p>When the context is created, the <code title=dom-context-2d-fillStyle><a href=#dom-context-2d-fillstyle>fillStyle</a></code> and <code title=dom-context-2d-strokeStyle><a href=#dom-context-2d-strokestyle>strokeStyle</a></code> attributes
+ must initially have the string value <code title="">#000000</code>.</p>
+
+ <p>When the value is a color, it must not be affected by the
+ transformation matrix when used to draw on the canvas.</p> <!-- so
+ singular matrices don't affect solid color fillStyles -->
+
+ </div>
+
+ <hr><p>There are two types of gradients, linear gradients and radial
+ gradients, both represented by objects implementing the opaque
+ <code><a href=#canvasgradient>CanvasGradient</a></code> interface.</p>
+
+ <p id=interpolation>Once a gradient has been created (see below),
+ stops are placed along it to define how the colors are distributed
+ along the gradient. <span class=impl>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.</span></p>
+
+ <dl class=domintro><dt><var title="">gradient</var> . <code title=dom-canvasgradient-addColorStop><a href=#dom-canvasgradient-addcolorstop>addColorStop</a></code>(<var title="">offset</var>, <var title="">color</var>)</dt>
+
+ <dd>
+
+ <p>Adds a color stop with the given color to the gradient at the
+ given offset. 0.0 is the offset at one end of the gradient, 1.0 is
+ the offset at the other end.</p>
+
+ <p>Throws an <code><a href=#indexsizeerror>IndexSizeError</a></code> exception if the offset
+ is out of range. Throws a <code><a href=#syntaxerror>SyntaxError</a></code> exception if the
+ color cannot be parsed.</p>
+
+ </dd>
+
+ <dt><var title="">gradient</var> = <var title="">context</var> . <code title=dom-context-2d-createLinearGradient><a href=#dom-context-2d-createlineargradient>createLinearGradient</a></code>(<var title="">x0</var>, <var title="">y0</var>, <var title="">x1</var>, <var title="">y1</var>)</dt>
+
+ <dd>
+
+ <p>Returns a <code><a href=#canvasgradient>CanvasGradient</a></code> object that represents a
+ linear gradient that paints along the line given by the
+ coordinates represented by the arguments.</p>
+
+ <p>If any of the arguments are not finite numbers, throws a
+ <code><a href=#notsupportederror>NotSupportedError</a></code> exception.</p>
+
+ </dd>
+
+ <dt><var title="">gradient</var> = <var title="">context</var> . <code title=dom-context-2d-createRadialGradient><a href=#dom-context-2d-createradialgradient>createRadialGradient</a></code>(<var title="">x0</var>, <var title="">y0</var>, <var title="">r0</var>, <var title="">x1</var>, <var title="">y1</var>, <var title="">r1</var>)</dt>
+
+ <dd>
+
+ <p>Returns a <code><a href=#canvasgradient>CanvasGradient</a></code> object that represents a
+ radial gradient that paints along the cone given by the circles
+ represented by the arguments.</p>
+
+ <p>If any of the arguments are not finite numbers, throws a
+ <code><a href=#notsupportederror>NotSupportedError</a></code> exception. If either of the radii
+ are negative, throws an <code><a href=#indexsizeerror>IndexSizeError</a></code> exception.</p>
+
+ </dd>
+
+ </dl><div class=impl>
+
+ <p>The <dfn id=dom-canvasgradient-addcolorstop title=dom-canvasgradient-addColorStop><code>addColorStop(<var title="">offset</var>, <var title="">color</var>)</code></dfn>
+ method on the <code><a href=#canvasgradient>CanvasGradient</a></code> interface adds a new stop
+ to a gradient. If the <var title="">offset</var> is less than 0,
+ greater than 1, infinite, or NaN, then an
+ <code><a href=#indexsizeerror>IndexSizeError</a></code> exception must be thrown. If the <var title="">color</var> cannot be <a href=#parsed-as-a-css-color-value>parsed as a CSS <color>
+ value</a>, then a <code><a href=#syntaxerror>SyntaxError</a></code> exception must be
+ thrown. 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 added at the same
+ offset 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 id=dom-context-2d-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
+ that represent the start point (<var title="">x0</var>, <var title="">y0</var>) and end point (<var title="">x1</var>, <var title="">y1</var>) of the gradient. If any of the arguments to <code title=dom-context-2d-createLinearGradient><a href=#dom-context-2d-createlineargradient>createLinearGradient()</a></code>
+ are infinite or NaN, the method must throw a
+ <code><a href=#notsupportederror>NotSupportedError</a></code> exception. Otherwise, the method must
+ return a linear <code><a href=#canvasgradient>CanvasGradient</a></code> initialized with the
+ specified line.</p>
+
+ <p>Linear gradients must be rendered such 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 <a href=#interpolation>interpolation and
+ extrapolation</a> described above). The points in the linear
+ gradient must be transformed as described by the <a href=#transformations title=dom-context-2d-transformation>current transformation
+ matrix</a> when rendering.</p>
+
+ <p>If <span title=""><var title="">x0</var> = <var title="">x1</var></span> and <span title=""><var title="">y0</var> = <var title="">y1</var></span>, then
+ the linear gradient must paint nothing.</p>
+
+ <p>The <dfn id=dom-context-2d-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 three representing the start circle with origin (<var title="">x0</var>, <var title="">y0</var>) and radius <var title="">r0</var>, and the last three representing the end circle
+ with origin (<var title="">x1</var>, <var title="">y1</var>) and
+ radius <var title="">r1</var>. The values are in coordinate space
+ units. If any of the arguments are infinite or NaN, a
+ <code><a href=#notsupportederror>NotSupportedError</a></code> exception must be thrown. If either
+ of <var title="">r0</var> or <var title="">r1</var> are negative, an
+ <code><a href=#indexsizeerror>IndexSizeError</a></code> exception must be thrown. Otherwise,
+ the method must return a radial <code><a href=#canvasgradient>CanvasGradient</a></code>
+ initialized with the two specified circles.</p>
+
+ <p>Radial gradients must be rendered by following these steps:</p>
+
+ <ol><li><p>If <span title=""><var title="">x<sub>0</sub></var> = <var title="">x<sub>1</sub></var></span> and <span title=""><var title="">y<sub>0</sub></var> = <var title="">y<sub>1</sub></var></span> and <span title=""><var title="">r<sub>0</sub></var> = <var title="">r<sub>1</sub></var></span>, then the radial gradient must
+ paint nothing. Abort these steps.</li>
+
+ <li>
+
+ <p>Let <span title="">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 title="">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 title="">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 at
+ that position on the gradient (with the colors coming from the <a href=#interpolation>interpolation and extrapolation</a>
+ described above).</p>
+
+ </li>
+
+ <li><p>For all values of <var title="">ω</var> where <span title="">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 <span title="">r(<var title="">ω</var>)</span> at position (<span title="">x(<var title="">ω</var>)</span>, <span title="">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.</li>
+
+ </ol><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).</p>
+
+ <p>The resulting radial gradient must then be transformed as
+ described by the <a href=#transformations title=dom-context-2d-transformation>current
+ transformation matrix</a> when rendering.</p>
+
+ <p>Gradients must be painted only where the relevant stroking or
+ filling effects requires that they be drawn.</p>
+
+ </div>
+
+ <hr><p>Patterns are represented by objects implementing the opaque
+ <code><a href=#canvaspattern>CanvasPattern</a></code> interface.</p>
+
+ <dl class=domintro><dt><var title="">pattern</var> = <var title="">context</var> . <code title=dom-context-2d-createPattern><a href=#dom-context-2d-createpattern>createPattern</a></code>(<var title="">image</var>, <var title="">repetition</var>)</dt>
+
+ <dd>
+
+ <p>Returns a <code><a href=#canvaspattern>CanvasPattern</a></code> object that uses the given image
+ and repeats in the direction(s) given by the <var title="">repetition</var> argument.</p>
+
+ <p>The allowed values for <var title="">repetition</var> are <code title="">repeat</code> (both directions), <code title="">repeat-x</code> (horizontal only), <code title="">repeat-y</code> (vertical only), and <code title="">no-repeat</code> (neither). If the <var title="">repetition</var> argument is empty, the value <code title="">repeat</code> is used.</p>
+
+ <p>If the image has no image data, throws an
+ <code><a href=#invalidstateerror>InvalidStateError</a></code> exception. If the second argument
+ isn't one of the allowed values, throws a <code><a href=#syntaxerror>SyntaxError</a></code>
+ exception. If the image isn't yet fully decoded, then the method
+ returns null.</p>
+
+ </dd>
+
+ </dl><div class=impl>
+
+ <p>To create objects of this type, the <dfn id=dom-context-2d-createpattern title=dom-context-2d-createPattern><code>createPattern(<var title="">image</var>, <var title="">repetition</var>)</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>,
+ <code><a href=#htmlcanvaselement>HTMLCanvasElement</a></code>, or <code><a href=#htmlvideoelement>HTMLVideoElement</a></code>
+ object). Modifying this image after calling the <code title=dom-context-2d-createPattern><a href=#dom-context-2d-createpattern>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 title="">no-repeat</code>. If the empty string is specified,
+ <code title="">repeat</code> must be assumed. If an unrecognized value
+ is given, then the user agent must throw a <code><a href=#syntaxerror>SyntaxError</a></code>
+ exception. User agents must recognize the four values described above
+ exactly (e.g. they must not do case folding). Except as specified
+ below, the method must return a <code><a href=#canvaspattern>CanvasPattern</a></code> object
+ suitably initialized.</p>
+
+ <p>The <var title="">image</var> argument is an instance of either
+ <code><a href=#htmlimageelement>HTMLImageElement</a></code>, <code><a href=#htmlcanvaselement>HTMLCanvasElement</a></code>, or
+ <code><a href=#htmlvideoelement>HTMLVideoElement</a></code>.</p> <!-- drawImage() has an equivalent
+ paragraph -->
+
+ <p>If the <var title="">image</var> argument is an
+ <code><a href=#htmlimageelement>HTMLImageElement</a></code> object that is not <a href=#img-good title=img-good>fully decodable</a>, or if the <var title="">image</var> argument is an <code><a href=#htmlvideoelement>HTMLVideoElement</a></code>
+ object whose <code title=dom-media-readyState><a href=#dom-media-readystate>readyState</a></code>
+ attribute is either <code title=dom-media-HAVE_NOTHING><a href=#dom-media-have_nothing>HAVE_NOTHING</a></code> or <code title=dom-media-HAVE_METADATA><a href=#dom-media-have_metadata>HAVE_METADATA</a></code>, then the
+ implementation must return null.</p> <!-- drawImage() has an
+ equivalent paragraph -->
+
+ <p>If the <var title="">image</var> argument is an
+ <code><a href=#htmlcanvaselement>HTMLCanvasElement</a></code> object with either a horizontal
+ dimension or a vertical dimension equal to zero, then the
+ implementation must throw an <code><a href=#invalidstateerror>InvalidStateError</a></code>
+ exception.</p>
+ <!-- drawImage() has an equivalent paragraph -->
+
+ <p>Patterns must be painted so that the top left of the first image
+ is anchored at the origin of the coordinate space, and images are
+ then repeated horizontally to the left and right, if the
+ <code>repeat-x</code> string was specified, or vertically up and
+ down, if the <code>repeat-y</code> string was specified, or in all
+ four directions all over the canvas, if the <code>repeat</code>
+ string was specified, to create the repeated pattern that is used
+ for rendering. The images are not scaled by this process; one CSS
+ pixel of the image must be painted on one coordinate space unit in
+ generating the repeated pattern. When rendered, however, patterns
+ must actually be painted only where the stroking or filling effect
+ requires that they be drawn, and the repeated pattern must be
+ affected by the current transformation matrix. Pixels not covered by
+ the repeating pattern (if the <code>repeat</code> string was not
+ specified) must be transparent black.</p>
+
+ <p>If the original image data is a bitmap image, the value painted
+ at a point in the area of the repetitions is computed by filtering
+ the original image data. The user agent may use any filtering
+ algorithm (for example bilinear interpolation or nearest-neighbor).
+ When the filtering algorithm requires a pixel value from outside the
+ original image data, it must instead use the value from wrapping the
+ pixel's coordinates to the original image's dimensions. (That is,
+ the filter uses 'repeat' behavior, regardless of the value of
+ <var title="">repetition</var>.)
+ <!-- drawImage() has a similar paragraph with different rules -->
+
+ <p>When the <code title=dom-context-2d-createPattern><a href=#dom-context-2d-createpattern>createPattern()</a></code> method
+ is passed an animated image as its <var title="">image</var>
+ argument, the user agent must use the poster frame of the animation,
+ or, if there is no poster frame, the first frame of the
+ animation.</p>
+ <!-- drawImage() has an equivalent paragraph -->
+
+ <p>When the <var title="">image</var> argument is an
+ <code><a href=#htmlvideoelement>HTMLVideoElement</a></code>, then the frame at the <a href=#current-playback-position>current
+ playback position</a> must be used as the source image, and the
+ source image's dimensions must be the <a href=#concept-video-intrinsic-width title=concept-video-intrinsic-width>intrinsic width</a> and
+ <a href=#concept-video-intrinsic-height title=concept-video-intrinsic-height>intrinsic height</a>
+ of the <a href=#media-resource>media resource</a> (i.e. after any aspect-ratio
+ correction has been applied).</p>
+ <!-- drawImage() has an equivalent paragraph -->
+
+ <!--
+ Requests for v5 features:
+ * apply transforms to patterns, so you don't have to create
+ transformed patterns manually by rendering them to an off-screen
+ canvas then using that canvas as the pattern.
+ -->
+
+ </div>
+
+ <div class=impl>
+
+ <hr><p>If a radial gradient or repeated pattern is used when the
+ transformation matrix is singular, the resulting style must be
+ transparent black (otherwise the gradient or pattern would be
+ collapsed to a point or line, leaving the other pixels undefined).
+ Linear gradients and solid colors always define all points even with
+ singular tranformation matrices.</p>
+
+ </div>
+
+
+
+ <h6 id=the-current-default-path><span class=secno>4.8.11.1.7 </span>The current default path</h6>
+
<p>The context always has a current default path. There is only one
current default path, it is not part of the <a href=#drawing-state>drawing
state</a>. The current default path is a <a href=#path>path</a>, as
@@ -36775,163 +36567,81 @@
- <h6 id=text-0><span class=secno>4.8.11.1.10 </span>Text</h6> <!-- a v3 feature -->
- <dl class=domintro><dt><var title="">context</var> . <code title=dom-context-2d-font><a href=#dom-context-2d-font>font</a></code> [ = <var title="">value</var> ]</dt>
+ <h6 id=drawing-rectangles-to-the-canvas><span class=secno>4.8.11.1.8 </span>Drawing rectangles to the canvas</h6>
- <dd>
+ <p>There are three methods that immediately draw rectangles to the
+ bitmap. They each take four arguments; the first two give the <var title="">x</var> and <var title="">y</var> coordinates of the top
+ left of the rectangle, and the second two give the width <var title="">w</var> and height <var title="">h</var> of the rectangle,
+ respectively.</p>
- <p>Returns the current font settings.</p>
+ <div class=impl>
- <p>Can be set, to change the font. The syntax is the same as for
- the CSS 'font' property; values that cannot be parsed as CSS font
- values are ignored.</p>
+ <p>The <a href=#transformations title=dom-context-2d-transformation>current
+ transformation matrix</a> must be applied to the following four
+ coordinates, which form the path that must then be closed to get the
+ specified rectangle: <span title="">(<var title="">x</var>, <var title="">y</var>)</span>, <span title="">(<span title=""><var title="">x</var>+<var title="">w</var></span>, <var title="">y</var>)</span>,
+ <span title="">(<span title=""><var title="">x</var>+<var title="">w</var></span>,
+ <span title=""><var title="">y</var>+<var title="">h</var></span>)</span>,
+ <span title="">(<var title="">x</var>, <span title=""><var title="">y</var>+<var title="">h</var></span>)</span>.</p>
- <p>Relative keywords and lengths are computed relative to the font
- of the <code><a href=#the-canvas-element>canvas</a></code> element.</p>
+ <p>Shapes are painted without affecting the current default path,
+ and are subject to the <a href=#clipping-region title="clipping region">clipping
+ region</a>, and, with the exception of <code title=dom-context-2d-clearRect><a href=#dom-context-2d-clearrect>clearRect()</a></code>, also <a href=#shadows title=shadows>shadow effects</a>, <a href=#dom-context-2d-globalalpha title=dom-context-2d-globalAlpha>global alpha</a>, and <a href=#dom-context-2d-globalcompositeoperation title=dom-context-2d-globalCompositeOperation>global composition
+ operators</a>.</p>
- </dd>
+ </div>
- <dt><var title="">context</var> . <code title=dom-context-2d-textAlign><a href=#dom-context-2d-textalign>textAlign</a></code> [ = <var title="">value</var> ]</dt>
+ <dl class=domintro><dt><var title="">context</var> . <code title=dom-context-2d-clearRect><a href=#dom-context-2d-clearrect>clearRect</a></code>(<var title="">x</var>, <var title="">y</var>, <var title="">w</var>, <var title="">h</var>)</dt>
<dd>
- <p>Returns the current text alignment settings.</p>
+ <p>Clears all pixels on the canvas in the given rectangle to transparent black.</p>
- <p>Can be set, to change the alignment. The possible values are
- <code title="">start</code>, <code title="">end</code>, <code title="">left</code>, <code title="">right</code>, and <code title="">center</code>. Other values are ignored. The default is
- <code title="">start</code>.</p>
-
</dd>
- <dt><var title="">context</var> . <code title=dom-context-2d-textBaseline><a href=#dom-context-2d-textbaseline>textBaseline</a></code> [ = <var title="">value</var> ]</dt>
+ <dt><var title="">context</var> . <code title=dom-context-2d-fillRect><a href=#dom-context-2d-fillrect>fillRect</a></code>(<var title="">x</var>, <var title="">y</var>, <var title="">w</var>, <var title="">h</var>)</dt>
<dd>
- <p>Returns the current baseline alignment settings.</p>
+ <p>Paints the given rectangle onto the canvas, using the current fill style.</p>
- <p>Can be set, to change the baseline alignment. The possible
- values and their meanings are given below. Other values are
- ignored. The default is <code title="">alphabetic</code>.</p>
-
</dd>
- </dl><div class=impl>
+ <dt><var title="">context</var> . <code title=dom-context-2d-strokeRect><a href=#dom-context-2d-strokerect>strokeRect</a></code>(<var title="">x</var>, <var title="">y</var>, <var title="">w</var>, <var title="">h</var>)</dt>
- <p>Objects that implement the <code><a href=#canvastext>CanvasText</a></code>
- interface have attributes (defined in this section) that control how
- text is laid out (rasterized or outlined) by the object.</p>
+ <dd>
- <p>The <dfn id=dom-context-2d-font title=dom-context-2d-font><code>font</code></dfn> IDL
- attribute, on setting, must be parsed the same way as the 'font'
- property of CSS (but without supporting property-independent style
- sheet syntax like 'inherit'), and the resulting font must be
- assigned to the context, with the 'line-height' component forced to
- 'normal', with the 'font-size' component converted to CSS pixels,
- and with system fonts being computed to explicit values. If the new
- value is syntactically incorrect (including using
- property-independent style sheet syntax like 'inherit' or
- 'initial'), then it must be ignored, without assigning a new font
- value. <a href=#refsCSS>[CSS]</a></p>
+ <p>Paints the box that outlines the given rectangle onto the canvas, using the current stroke style.</p>
- <p>Font names must be interpreted in the context of the
- <code><a href=#the-canvas-element>canvas</a></code> element's stylesheets; any fonts embedded using
- <code title="">@font-face</code> must therefore be available once
- they are loaded. (If a font is referenced before it is fully loaded,
- then it must be treated as if it was an unknown font, falling back
- to another as described by the relevant CSS specifications.) <a href=#refsCSSFONTS>[CSSFONTS]</a></p>
+ </dd>
- <!-- XXX Path objects don't have a canvas -->
+ </dl><div class=impl>
- <p>Only vector fonts should be used by the user agent; if a user
- agent were to use bitmap fonts then transformations would likely
- make the font look very ugly.</p>
+ <p>The <dfn id=dom-context-2d-clearrect title=dom-context-2d-clearRect><code>clearRect(<var title="">x</var>, <var title="">y</var>, <var title="">w</var>, <var title="">h</var>)</code></dfn> method must clear the pixels in the
+ specified rectangle that also intersect the current clipping region
+ to a fully transparent black, erasing any previous image. If either
+ height or width are zero, this method has no effect.</p>
- <p>On getting, the <code title=dom-context-2d-font><a href=#dom-context-2d-font>font</a></code>
- attribute must return the <a href=#serializing-a-css-value title="serializing a CSS
- value">serialized form</a> of the current font of the context
- (with no 'line-height' component). <a href=#refsCSSOM>[CSSOM]</a></p>
+ <p>The <dfn id=dom-context-2d-fillrect title=dom-context-2d-fillRect><code>fillRect(<var title="">x</var>, <var title="">y</var>, <var title="">w</var>, <var title="">h</var>)</code></dfn> method must paint the specified
+ rectangular area using the <code title=dom-context-2d-fillStyle><a href=#dom-context-2d-fillstyle>fillStyle</a></code>. If either height
+ or width are zero, this method has no effect.</p>
- <div class=example>
+ <p>The <dfn id=dom-context-2d-strokerect title=dom-context-2d-strokeRect><code>strokeRect(<var title="">x</var>, <var title="">y</var>, <var title="">w</var>, <var title="">h</var>)</code></dfn> method must stroke the specified
+ rectangle's path using the <code title=dom-context-2d-strokeStyle><a href=#dom-context-2d-strokestyle>strokeStyle</a></code>, <code title=dom-context-2d-lineWidth><a href=#dom-context-2d-linewidth>lineWidth</a></code>, <code title=dom-context-2d-lineJoin><a href=#dom-context-2d-linejoin>lineJoin</a></code>, and (if
+ appropriate) <code title=dom-context-2d-miterLimit><a href=#dom-context-2d-miterlimit>miterLimit</a></code> attributes. If
+ both height and width are zero, this method has no effect, since
+ there is no path to stroke (it's a point). If only one of the two is
+ zero, then the method will draw a line instead (the path for the
+ outline is just a straight line along the non-zero dimension).</p>
- <p>For example, after the following statement:</p>
-
- <pre>context.font = 'italic 400 12px/2 Unknown Font, sans-serif';</pre>
-
- <p>...the expression <code title="">context.font</code> would
- evaluate to the string "<code title="">italic 12px "Unknown Font", sans-serif</code>". The
- "400" font-weight doesn't appear because that is the default
- value. The line-height doesn't appear because it is forced to
- "normal", the default value.</p>
-
</div>
- <p>When the object implementing the <code><a href=#canvastext>CanvasText</a></code>
- interface is created, the font of the context must be set to 10px
- sans-serif. When the 'font-size' component is set to lengths using
- percentages, 'em' or 'ex' units, or the 'larger' or 'smaller'
- keywords, these must be interpreted relative to the computed value
- of the 'font-size' property of the corresponding <code><a href=#the-canvas-element>canvas</a></code>
- element at the time that the attribute is set. When the
- 'font-weight' component is set to the relative values 'bolder' and
- 'lighter', these must be interpreted relative to the computed value
- of the 'font-weight' property of the corresponding
- <code><a href=#the-canvas-element>canvas</a></code> element at the time that the attribute is set.
- If the computed values are undefined for a particular case (e.g.
- because the <code><a href=#the-canvas-element>canvas</a></code> element is not <a href=#in-a-document>in a
- <code>Document</code></a>), then the relative keywords must be
- interpreted relative to the normal-weight 10px sans-serif
- default.</p> <!-- XXX Path canvas issue again, twice -->
- <p>The <dfn id=dom-context-2d-textalign title=dom-context-2d-textAlign><code>textAlign</code></dfn> IDL
- attribute, on getting, must return the current value. On setting, if
- the value is one of <code title="">start</code>, <code title="">end</code>, <code title="">left</code>, <code title="">right</code>, or <code title="">center</code>, then the
- value must be changed to the new value. Otherwise, the new value
- must be ignored. When the object implementing the
- <code><a href=#canvastext>CanvasText</a></code> interface is created, the <code title=dom-context-2d-textAlign><a href=#dom-context-2d-textalign>textAlign</a></code> attribute must
- initially have the value <code title="">start</code>.</p>
- <p>The <dfn id=dom-context-2d-textbaseline title=dom-context-2d-textBaseline><code>textBaseline</code></dfn>
- IDL attribute, on getting, must return the current value. On
- setting, if the value is one of <code title=dom-context-2d-textBaseline-top><a href=#dom-context-2d-textbaseline-top>top</a></code>, <code title=dom-context-2d-textBaseline-hanging><a href=#dom-context-2d-textbaseline-hanging>hanging</a></code>, <code title=dom-context-2d-textBaseline-middle><a href=#dom-context-2d-textbaseline-middle>middle</a></code>, <code title=dom-context-2d-textBaseline-alphabetic><a href=#dom-context-2d-textbaseline-alphabetic>alphabetic</a></code>,
- <code title=dom-context-2d-textBaseline-ideographic><a href=#dom-context-2d-textbaseline-ideographic>ideographic</a></code>,
- or <code title=dom-context-2d-textBaseline-bottom><a href=#dom-context-2d-textbaseline-bottom>bottom</a></code>,
- then the value must be changed to the new value. Otherwise, the new
- value must be ignored. When the object implementing the
- <code><a href=#canvastext>CanvasText</a></code> interface is created, the <code title=dom-context-2d-textBaseline><a href=#dom-context-2d-textbaseline>textBaseline</a></code> attribute
- must initially have the value <code title="">alphabetic</code>.</p>
+ <h6 id=drawing-text-to-the-canvas><span class=secno>4.8.11.1.9 </span>Drawing text to the canvas</h6>
- </div>
-
- <p>The <code title=dom-context-2d-textBaseline><a href=#dom-context-2d-textbaseline>textBaseline</a></code>
- attribute's allowed keywords correspond to alignment points in the
- font:</p>
-
- <!-- this is filler to make sure the TCP packet boundary doesn't fall in the middle of one of the NCRs below -->
- <!-- (because otherwise the parser in anolis screws it up) -->
- <p><img alt="The top of the em square is roughly at the top of the glyphs in a font, the hanging baseline is where some glyphs like आ are anchored, the middle is half-way between the top of the em square and the bottom of the em square, the alphabetic baseline is where characters like Á, ÿ, f, and Ω are anchored, the ideographic baseline is where glyphs like 私 and 達 are anchored, and the bottom of the em square is roughly at the bottom of the glyphs in a font. The top and bottom of the bounding box can be far from these baselines, due to glyphs extending far outside the em square." height=300 src=http://images.whatwg.org/baselines.png width=738></p>
-
- <p>The keywords map to these alignment points as follows:</p>
-
- <dl><dt><dfn id=dom-context-2d-textbaseline-top title=dom-context-2d-textBaseline-top><code>top</code></dfn>
- <dd>The top of the em square</dd>
-
- <dt><dfn id=dom-context-2d-textbaseline-hanging title=dom-context-2d-textBaseline-hanging><code>hanging</code></dfn>
- <dd>The hanging baseline</dd>
-
- <dt><dfn id=dom-context-2d-textbaseline-middle title=dom-context-2d-textBaseline-middle><code>middle</code></dfn>
- <dd>The middle of the em square</dd>
-
- <dt><dfn id=dom-context-2d-textbaseline-alphabetic title=dom-context-2d-textBaseline-alphabetic><code>alphabetic</code></dfn>
- <dd>The alphabetic baseline</dd>
-
- <dt><dfn id=dom-context-2d-textbaseline-ideographic title=dom-context-2d-textBaseline-ideographic><code>ideographic</code></dfn>
- <dd>The ideographic baseline</dd>
-
- <dt><dfn id=dom-context-2d-textbaseline-bottom title=dom-context-2d-textBaseline-bottom><code>bottom</code></dfn>
- <dd>The bottom of the em square</dd>
-
- </dl><hr><dl class=domintro><dt><var title="">context</var> . <code title=dom-context-2d-fillText><a href=#dom-context-2d-filltext>fillText</a></code>(<var title="">text</var>, <var title="">x</var>, <var title="">y</var> [, <var title="">maxWidth</var> ] )</dt>
+ <dl class=domintro><dt><var title="">context</var> . <code title=dom-context-2d-fillText><a href=#dom-context-2d-filltext>fillText</a></code>(<var title="">text</var>, <var title="">x</var>, <var title="">y</var> [, <var title="">maxWidth</var> ] )</dt>
<dt><var title="">context</var> . <code title=dom-context-2d-strokeText><a href=#dom-context-2d-stroketext>strokeText</a></code>(<var title="">text</var>, <var title="">x</var>, <var title="">y</var> [, <var title="">maxWidth</var> ] )</dt>
<dd>
@@ -37310,7 +37020,7 @@
- <h6 id=images><span class=secno>4.8.11.1.11 </span>Images</h6>
+ <h6 id=drawing-images-to-the-canvas><span class=secno>4.8.11.1.10 </span>Drawing images to the canvas</h6>
<p>To draw images onto the canvas, the <dfn id=dom-context-2d-drawimage title=dom-context-2d-drawImage><code>drawImage</code></dfn> method
can be used.</p>
@@ -37454,7 +37164,7 @@
- <h6 id=pixel-manipulation><span class=secno>4.8.11.1.12 </span><dfn>Pixel manipulation</dfn></h6>
+ <h6 id=pixel-manipulation><span class=secno>4.8.11.1.11 </span><dfn>Pixel manipulation</dfn></h6>
<dl class=domintro><dt><var title="">imagedata</var> = <var title="">context</var> . <code title=dom-context-2d-createImageData><a href=#dom-context-2d-createimagedata>createImageData</a></code>(<var title="">sw</var>, <var title="">sh</var>)</dt>
@@ -37788,9 +37498,312 @@
</div>
+
+
+ <h6 id=compositing><span class=secno>4.8.11.1.12 </span>Compositing</h6>
+
+ <dl class=domintro><dt><var title="">context</var> . <code title=dom-context-2d-globalAlpha><a href=#dom-context-2d-globalalpha>globalAlpha</a></code> [ = <var title="">value</var> ]</dt>
+
+ <dd>
+
+ <p>Returns the current alpha value applied to rendering operations.</p>
+
+ <p>Can be set, to change the alpha value. Values outside of the
+ range 0.0 .. 1.0 are ignored.</p>
+
+ </dd>
+
+
+ <dt><var title="">context</var> . <code title=dom-context-2d-globalCompositeOperation><a href=#dom-context-2d-globalcompositeoperation>globalCompositeOperation</a></code> [ = <var title="">value</var> ]</dt>
+
+ <dd>
+
+ <p>Returns the current composition operation, from the list below.</p>
+
+ <p>Can be set, to change the composition operation. Unknown values
+ are ignored.</p>
+
+ </dd>
+
+ </dl><div class=impl>
+
+ <p>All drawing operations are affected by the global compositing
+ attributes, <code title=dom-context-2d-globalAlpha><a href=#dom-context-2d-globalalpha>globalAlpha</a></code> and <code title=dom-context-2d-globalCompositeOperation><a href=#dom-context-2d-globalcompositeoperation>globalCompositeOperation</a></code>.</p>
+
+ <!-- conformance criteria for painting are described in the "drawing
+ model" section below -->
+
+ <p>The <dfn id=dom-context-2d-globalalpha title=dom-context-2d-globalAlpha><code>globalAlpha</code></dfn>
+ attribute gives an alpha value that is applied to shapes and images
+ before they are composited onto the canvas. The value must be in the
+ range from 0.0 (fully transparent) to 1.0 (no additional
+ transparency). If an attempt is made to set the attribute to a value
+ outside this range, including Infinity and Not-a-Number (NaN)
+ values, the attribute must retain its previous value. When the
+ context is created, the <code title=dom-context-2d-globalAlpha><a href=#dom-context-2d-globalalpha>globalAlpha</a></code> attribute must
+ initially have the value 1.0.</p>
+
+ <p>The <dfn id=dom-context-2d-globalcompositeoperation title=dom-context-2d-globalCompositeOperation><code>globalCompositeOperation</code></dfn>
+ attribute sets how shapes and images are drawn onto the existing
+ bitmap, once they have had <code title=dom-context-2d-globalAlpha><a href=#dom-context-2d-globalalpha>globalAlpha</a></code> and the
+ current transformation matrix applied. It must be set to a value
+ from the following list. In the descriptions below, the source
+ image, <var title="">A</var>, is the shape or image being rendered,
+ and the destination image, <var title="">B</var>, is the current
+ state of the bitmap.</p>
+
+ </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>. <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.</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>. <span class=note>Display the
+ source image wherever both the source image and destination image
+ 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>. <span class=note>Display the
+ source image wherever the source image is opaque and the
+ destination image is transparent. Display transparency
+ 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>. <span class=note>Display the
+ source image wherever the source image is opaque. Display the
+ 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>. <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>. <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>. <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>. <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><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>. <span class=note>Display the
+ sum of the source image and destination image, with color values
+ approaching 255 (100%) 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). <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>. <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>
+
+ <dd class=impl>Vendor-specific extensions to the list of
+ composition operators should use this syntax.</dd>
+
+ </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 <a href=#case-sensitive>case-sensitive</a> match for one of the values given
+ above.</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>
+
+ <p>When the context is created, the <code title=dom-context-2d-globalCompositeOperation><a href=#dom-context-2d-globalcompositeoperation>globalCompositeOperation</a></code>
+ attribute must initially have the value
+ <code>source-over</code>.</p>
+
+ </div>
+
+
+
+
+ <h6 id=shadows><span class=secno>4.8.11.1.13 </span><dfn>Shadows</dfn></h6>
+
+ <p>All drawing operations are affected by the four global shadow
+ attributes.</p>
+
+ <dl class=domintro><dt><var title="">context</var> . <code title=dom-context-2d-shadowColor><a href=#dom-context-2d-shadowcolor>shadowColor</a></code> [ = <var title="">value</var> ]</dt>
+
+ <dd>
+
+ <p>Returns the current shadow color.</p>
+
+ <p>Can be set, to change the shadow color. Values that cannot be parsed as CSS colors are ignored.</p>
+
+ </dd>
+
+ <dt><var title="">context</var> . <code title=dom-context-2d-shadowOffsetX><a href=#dom-context-2d-shadowoffsetx>shadowOffsetX</a></code> [ = <var title="">value</var> ]</dt>
+ <dt><var title="">context</var> . <code title=dom-context-2d-shadowOffsetY><a href=#dom-context-2d-shadowoffsety>shadowOffsetY</a></code> [ = <var title="">value</var> ]</dt>
+
+ <dd>
+
+ <p>Returns the current shadow offset.</p>
+
+ <p>Can be set, to change the shadow offset. Values that are not finite numbers are ignored.</p>
+
+ </dd>
+
+ <dt><var title="">context</var> . <code title=dom-context-2d-shadowBlur><a href=#dom-context-2d-shadowblur>shadowBlur</a></code> [ = <var title="">value</var> ]</dt>
+
+ <dd>
+
+ <p>Returns the current level of blur applied to shadows.</p>
+
+ <p>Can be set, to change the blur level. Values that are not finite numbers greater than or equal to zero are ignored.</p>
+
+ </dd>
+
+ </dl><div class=impl>
+
+ <p>The <dfn id=dom-context-2d-shadowcolor title=dom-context-2d-shadowColor><code>shadowColor</code></dfn>
+ attribute sets the color of the shadow.</p>
+
+ <p>When the context is created, the <code title=dom-context-2d-shadowColor><a href=#dom-context-2d-shadowcolor>shadowColor</a></code> attribute
+ initially must be fully-transparent black.</p>
+
+ <p>On getting, the <a href=#serialization-of-a-color title="serialization of a
+ color">serialization of the color</a> must be returned.</p>
+
+ <p>On setting, the new value must be <a href=#parsed-as-a-css-color-value>parsed as a CSS
+ <color> value</a> and the color assigned. If the value
+ cannot be parsed as a CSS <color> value then it must be
+ ignored, and the attribute must retain its previous value. <a href=#refsCSSCOLOR>[CSSCOLOR]</a></p>
+
+ <p>The <dfn id=dom-context-2d-shadowoffsetx title=dom-context-2d-shadowOffsetX><code>shadowOffsetX</code></dfn>
+ and <dfn id=dom-context-2d-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. They are
+ not affected by the current transformation matrix.</p>
+
+ <p>When the context is created, the shadow offset attributes must
+ 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, except if the
+ value is infinite or NaN, in which case the new value must be
+ ignored.</p>
+
+ <p>The <dfn id=dom-context-2d-shadowblur title=dom-context-2d-shadowBlur><code>shadowBlur</code></dfn>
+ attribute specifies the level of the blurring effect. (The units do
+ not map to coordinate space units, and are not affected by the
+ current transformation matrix.)</p>
+
+ <p>When the context is created, the <code title=dom-context-2d-shadowBlur><a href=#dom-context-2d-shadowblur>shadowBlur</a></code> attribute must
+ initially have the value <code>0</code>.</p>
+
+ <p>On getting, the attribute must return its current value. On
+ setting the attribute must be set to the new value, except if the
+ value is negative, infinite or NaN, in which case the new value must
+ be ignored.</p>
+
+ <p><dfn id=when-shadows-are-drawn title="when shadows are drawn">Shadows are only drawn
+ if</dfn> the opacity component of the alpha component of the color
+ of <code title=dom-context-2d-shadowColor><a href=#dom-context-2d-shadowcolor>shadowColor</a></code> is
+ non-zero and either the <code title=dom-context-2d-shadowBlur><a href=#dom-context-2d-shadowblur>shadowBlur</a></code> is non-zero, or
+ the <code title=dom-context-2d-shadowOffsetX><a href=#dom-context-2d-shadowoffsetx>shadowOffsetX</a></code>
+ is non-zero, or the <code title=dom-context-2d-shadowOffsetY><a href=#dom-context-2d-shadowoffsety>shadowOffsetY</a></code> is
+ non-zero.</p>
+
+ <p class=critical>It is likely that this will change: browser
+ vendors have indicated an interest in changing the processing model
+ for shadows such that they only draw when the composition operator
+ is "source-over" (the default). <a href=http://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2011-May/thread.html#31457>Read
+ more...</a></p>
+
+ <p><a href=#when-shadows-are-drawn>When shadows are drawn</a>, they must be rendered as follows:</p>
+
+ <ol><li> <p>Let <var title="">A</var> be an infinite transparent black
+ bitmap on which the source image for which a shadow is being
+ created has been rendered.</p> </li>
+
+ <li> <p>Let <var title="">B</var> be an infinite transparent black
+ bitmap, with a coordinate space and an origin identical to <var title="">A</var>.</p> </li>
+
+ <li> <p>Copy the alpha channel of <var title="">A</var> to <var title="">B</var>, offset by <code title=dom-context-2d-shadowOffsetX><a href=#dom-context-2d-shadowoffsetx>shadowOffsetX</a></code> in the
+ positive <var title="">x</var> direction, and <code title=dom-context-2d-shadowOffsetY><a href=#dom-context-2d-shadowoffsety>shadowOffsetY</a></code> in the
+ positive <var title="">y</var> direction.</p> </li>
+
+ <li> <p>If <code title=dom-context-2d-shadowBlur><a href=#dom-context-2d-shadowblur>shadowBlur</a></code> is greater than
+ 0:</p>
+
+ <ol><li> <p>Let <var title="">σ</var> be half the value of
+ <code title=dom-context-2d-shadowBlur><a href=#dom-context-2d-shadowblur>shadowBlur</a></code>.</li>
+
+ <li> <p>Perform a 2D Gaussian Blur on <var title="">B</var>,
+ using <var title="">σ</var> as the standard deviation.</p>
+ <!-- wish i could find a reference for this --> </li>
+
+ </ol><p>User agents may limit values of <var title="">σ</var> to
+ an implementation-specific maximum value to avoid exceeding
+ hardware limitations during the Gaussian blur operation.</p>
+
+ </li>
+
+ <li> <p>Set the red, green, and blue components of every pixel in
+ <var title="">B</var> to the red, green, and blue components
+ (respectively) of the color of <code title=dom-context-2d-shadowColor><a href=#dom-context-2d-shadowcolor>shadowColor</a></code>.</p> </li>
+
+ <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 <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).</p>
+
+
+
<div class=impl>
- <h6 id=drawing-model><span class=secno>4.8.11.1.13 </span><dfn>Drawing model</dfn></h6>
+ <h6 id=drawing-model><span class=secno>4.8.11.1.14 </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>
@@ -37821,7 +37834,7 @@
</ol></div>
- <h6 id=best-practices><span class=secno>4.8.11.1.14 </span>Best practices</h6>
+ <h6 id=best-practices><span class=secno>4.8.11.1.15 </span>Best practices</h6>
<p><i>This section is non-normative.</i></p>
@@ -37883,7 +37896,7 @@
attribute.</p>
- <h6 id=examples><span class=secno>4.8.11.1.15 </span>Examples</h6>
+ <h6 id=examples><span class=secno>4.8.11.1.16 </span>Examples</h6>
<p><i>This section is non-normative.</i></p>
@@ -81188,7 +81201,7 @@
U+002F SOLIDUS (/).</p>
- <h4 id=text-1><span class=secno>12.1.3 </span>Text</h4>
+ <h4 id=text-0><span class=secno>12.1.3 </span>Text</h4>
<p><dfn id=syntax-text title=syntax-text>Text</dfn> is allowed inside elements,
attribute values, and comments. Extra constraints are placed on what
@@ -91312,7 +91325,7 @@
<!--TOPIC:Rendering-->
<div class=impl>
- <h4 id=images-0><span class=secno>14.4.2 </span>Images</h4>
+ <h4 id=images><span class=secno>14.4.2 </span>Images</h4>
<p>When an <code><a href=#the-img-element>img</a></code> element or an <code><a href=#the-input-element>input</a></code> element
when its <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in
Modified: source
===================================================================
--- source 2012-03-07 00:40:51 UTC (rev 7021)
+++ source 2012-03-07 22:53:20 UTC (rev 7022)
@@ -40991,667 +40991,8 @@
</div>
- <h6>Compositing</h6>
- <dl class="domintro">
- <dt><var title="">context</var> . <code title="dom-context-2d-globalAlpha">globalAlpha</code> [ = <var title="">value</var> ]</dt>
-
- <dd>
-
- <p>Returns the current alpha value applied to rendering operations.</p>
-
- <p>Can be set, to change the alpha value. Values outside of the
- range 0.0 .. 1.0 are ignored.</p>
-
- </dd>
-
-
- <dt><var title="">context</var> . <code title="dom-context-2d-globalCompositeOperation">globalCompositeOperation</code> [ = <var title="">value</var> ]</dt>
-
- <dd>
-
- <p>Returns the current composition operation, from the list below.</p>
-
- <p>Can be set, to change the composition operation. Unknown values
- are ignored.</p>
-
- </dd>
-
- </dl>
-
- <div class="impl">
-
- <p>All drawing operations are affected by the global compositing
- attributes, <code
- title="dom-context-2d-globalAlpha">globalAlpha</code> and <code
- title="dom-context-2d-globalCompositeOperation">globalCompositeOperation</code>.</p>
-
- <!-- conformance criteria for painting are described in the "drawing
- model" section below -->
-
- <p>The <dfn
- title="dom-context-2d-globalAlpha"><code>globalAlpha</code></dfn>
- attribute gives an alpha value that is applied to shapes and images
- before they are composited onto the canvas. The value must be in the
- range from 0.0 (fully transparent) to 1.0 (no additional
- transparency). If an attempt is made to set the attribute to a value
- outside this range, including Infinity and Not-a-Number (NaN)
- values, the attribute must retain its previous value. When the
- context is created, the <code
- title="dom-context-2d-globalAlpha">globalAlpha</code> attribute must
- initially have the value 1.0.</p>
-
- <p>The <dfn
- title="dom-context-2d-globalCompositeOperation"><code>globalCompositeOperation</code></dfn>
- attribute sets how shapes and images are drawn onto the existing
- bitmap, once they have had <code
- title="dom-context-2d-globalAlpha">globalAlpha</code> and the
- current transformation matrix applied. It must be set to a value
- from the following list. In the descriptions below, the source
- image, <var title="">A</var>, is the shape or image being rendered,
- and the destination image, <var title="">B</var>, is the current
- state of the bitmap.</p>
-
- </div>
-
- <dl>
-
- <dt><dfn title="gcop-source-atop"><code>source-atop</code></dfn></dt>
-
- <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.</span></dd>
-
- <dt><dfn title="gcop-source-in"><code>source-in</code></dfn></dt>
-
- <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.</span></dd>
-
- <dt><dfn title="gcop-source-out"><code>source-out</code></dfn></dt>
-
- <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.</span></dd>
-
- <dt><dfn title="gcop-source-over"><code>source-over</code></dfn> (default)</dt>
-
- <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.</span></dd>
-
-
- <dt><dfn title="gcop-destination-atop"><code>destination-atop</code></dfn></dt>
-
- <dd><var title="">B</var> atop <var title="">A</var>. <span class="note">Same as <code
- title="gcop-source-atop">source-atop</code> but using the
- destination image instead of the source image and vice versa.</span></dd>
-
- <dt><dfn title="gcop-destination-in"><code>destination-in</code></dfn></dt>
-
- <dd><var title="">B</var> in <var title="">A</var>. <span class="note">Same as <code
- title="gcop-source-in">source-in</code> but using the destination
- image instead of the source image and vice versa.</span></dd>
-
- <dt><dfn title="gcop-destination-out"><code>destination-out</code></dfn></dt>
-
- <dd><var title="">B</var> out <var title="">A</var>. <span class="note">Same as <code
- title="gcop-source-out">source-out</code> but using the destination
- image instead of the source image and vice versa.</span></dd>
-
- <dt><dfn title="gcop-destination-over"><code>destination-over</code></dfn></dt>
-
- <dd><var title="">B</var> over <var title="">A</var>. <span class="note">Same as <code
- title="gcop-source-over">source-over</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><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 title="gcop-lighter"><code>lighter</code></dfn></dt>
-
- <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 255 (100%) as a limit.</span></dd>
-
-
- <dt><dfn title="gcop-copy"><code>copy</code></dfn></dt>
-
- <dd><var title="">A</var> (<var title="">B</var> is
- ignored). <span class="note">Display the source image instead of the destination
- image.</span></dd>
-
-
- <dt><dfn title="gcop-xor"><code>xor</code></dfn></dt>
-
- <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>
-
- <dd class="impl">Vendor-specific extensions to the list of
- composition operators should use this syntax.</dd>
-
- </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 <span>drawing model</span>, at which point the
- <span>clipping region</span> 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>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">globalCompositeOperation</code>
- unaffected.</p>
-
- <p>When the context is created, the <code
- title="dom-context-2d-globalCompositeOperation">globalCompositeOperation</code>
- attribute must initially have the value
- <code>source-over</code>.</p>
-
- </div>
-
-
- <h6>Colors and styles</h6>
-
- <dl class="domintro">
-
- <dt><var title="">context</var> . <code title="dom-context-2d-strokeStyle">strokeStyle</code> [ = <var title="">value</var> ]</dt>
-
- <dd>
-
- <p>Returns the current style used for stroking shapes.</p>
-
- <p>Can be set, to change the stroke style.</p>
-
- <p>The style can be either a string containing a CSS color, or a
- <code>CanvasGradient</code> or <code>CanvasPattern</code>
- object. Invalid values are ignored.</p>
-
- </dd>
-
- <dt><var title="">context</var> . <code title="dom-context-2d-fillStyle">fillStyle</code> [ = <var title="">value</var> ]</dt>
-
- <dd>
-
- <p>Returns the current style used for filling shapes.</p>
-
- <p>Can be set, to change the fill style.</p>
-
- <p>The style can be either a string containing a CSS color, or a
- <code>CanvasGradient</code> or <code>CanvasPattern</code>
- object. Invalid values are ignored.</p>
-
- </dd>
-
- </dl>
-
- <div class="impl">
-
- <!-- v6 feature requests:
-
- * Getting and setting colours by component to bypass the CSS value parsing.
-
- Either:
- context.fillStyle.red += 1;
-
- Or:
- var array = context.fillStyle;
- array[1] += 1;
- context.fillStyle = array;
-
- * A more performant way of setting colours in general, e.g.:
-
- context.setFillColor(r,g,b,a) // already supported by webkit
-
- Or:
-
- context.fillStyle = 0xRRGGBBAA; // set a 32bit int directly
-
- * fill rule for deciding between winding and even-odd algorithms.
- SVG has fill-rule: nonzero | evenodd
- http://www.w3.org/TR/SVG/painting.html#FillProperties
- see also mozFillRule: http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2011-June/032002.html
-
- -->
-
- <p>The <dfn
- title="dom-context-2d-strokeStyle"><code>strokeStyle</code></dfn>
- attribute represents the color or style to use for the lines around
- shapes, and the <dfn
- title="dom-context-2d-fillStyle"><code>fillStyle</code></dfn>
- attribute represents the color or style to use inside the
- shapes.</p>
-
- <p>Both attributes can be either strings,
- <code>CanvasGradient</code>s, or <code>CanvasPattern</code>s. On
- setting, strings must be <span title="parsed as a CSS <color>
- value">parsed as CSS <color> values</span> and the color
- assigned, and <code>CanvasGradient</code> and
- <code>CanvasPattern</code> objects must be assigned themselves. <a
- href="#refsCSSCOLOR">[CSSCOLOR]</a> If the value is a string but
- cannot be <span>parsed as a CSS <color> value</span>, or is
- neither a string, a <code>CanvasGradient</code>, nor a
- <code>CanvasPattern</code>, then it must be ignored, and the
- attribute must retain its previous value.</p>
-
- <p>When set to a <code>CanvasPattern</code> or
- <code>CanvasGradient</code> object, the assignment is
- <span>live</span>, meaning that changes made to the object after the
- assignment do affect subsequent stroking or filling of shapes.</p>
-
- <p>On getting, if the value is a color, then the <span
- title="serialization of a color">serialization 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>serialization 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, if the alpha value is greater than zero then a
- U+002E FULL STOP (representing the decimal point), if the alpha
- value is greater than zero then one or more digits in the range 0-9
- (U+0030 to U+0039) representing the fractional part of the alpha<!--
- value with no trailing zeros (implied by next sentence)-->, and
- finally a U+0029 RIGHT PARENTHESIS. User agents must express the
- fractional part of the alpha value, if any, with the level of
- precision necessary for the alpha value, when reparsed, to be
- interpreted as the same alpha value.</p> <!-- if people complain
- this is unreadable, expand it into a <dl> with two nested <ol>s -->
-
- <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
- initially have the string value <code title="">#000000</code>.</p>
-
- <p>When the value is a color, it must not be affected by the
- transformation matrix when used to draw on the canvas.</p> <!-- so
- singular matrices don't affect solid color fillStyles -->
-
- </div>
-
- <hr>
-
- <p>There are two types of gradients, linear gradients and radial
- gradients, both represented by objects implementing the opaque
- <code>CanvasGradient</code> interface.</p>
-
- <p id="interpolation">Once a gradient has been created (see below),
- stops are placed along it to define how the colors are distributed
- along the gradient. <span class="impl">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.</span></p>
-
- <dl class="domintro">
-
- <dt><var title="">gradient</var> . <code title="dom-canvasgradient-addColorStop">addColorStop</code>(<var title="">offset</var>, <var title="">color</var>)</dt>
-
- <dd>
-
- <p>Adds a color stop with the given color to the gradient at the
- given offset. 0.0 is the offset at one end of the gradient, 1.0 is
- the offset at the other end.</p>
-
- <p>Throws an <code>IndexSizeError</code> exception if the offset
- is out of range. Throws a <code>SyntaxError</code> exception if the
- color cannot be parsed.</p>
-
- </dd>
-
- <dt><var title="">gradient</var> = <var title="">context</var> . <code title="dom-context-2d-createLinearGradient">createLinearGradient</code>(<var title="">x0</var>, <var title="">y0</var>, <var title="">x1</var>, <var title="">y1</var>)</dt>
-
- <dd>
-
- <p>Returns a <code>CanvasGradient</code> object that represents a
- linear gradient that paints along the line given by the
- coordinates represented by the arguments.</p>
-
- <p>If any of the arguments are not finite numbers, throws a
- <code>NotSupportedError</code> exception.</p>
-
- </dd>
-
- <dt><var title="">gradient</var> = <var title="">context</var> . <code title="dom-context-2d-createRadialGradient">createRadialGradient</code>(<var title="">x0</var>, <var title="">y0</var>, <var title="">r0</var>, <var title="">x1</var>, <var title="">y1</var>, <var title="">r1</var>)</dt>
-
- <dd>
-
- <p>Returns a <code>CanvasGradient</code> object that represents a
- radial gradient that paints along the cone given by the circles
- represented by the arguments.</p>
-
- <p>If any of the arguments are not finite numbers, throws a
- <code>NotSupportedError</code> exception. If either of the radii
- are negative, throws an <code>IndexSizeError</code> exception.</p>
-
- </dd>
-
- </dl>
-
- <div class="impl">
-
- <p>The <dfn
- title="dom-canvasgradient-addColorStop"><code>addColorStop(<var
- title="">offset</var>, <var title="">color</var>)</code></dfn>
- method on the <code>CanvasGradient</code> interface adds a new stop
- to a gradient. If the <var title="">offset</var> is less than 0,
- greater than 1, infinite, or NaN, then an
- <code>IndexSizeError</code> exception must be thrown. If the <var
- title="">color</var> cannot be <span>parsed as a CSS <color>
- value</span>, then a <code>SyntaxError</code> exception must be
- thrown. 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 added at the same
- offset 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="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
- that represent the start point (<var title="">x0</var>, <var
- title="">y0</var>) and end point (<var title="">x1</var>, <var
- title="">y1</var>) of the gradient. If any of the arguments to <code
- title="dom-context-2d-createLinearGradient">createLinearGradient()</code>
- are infinite or NaN, the method must throw a
- <code>NotSupportedError</code> exception. Otherwise, the method must
- return a linear <code>CanvasGradient</code> initialized with the
- specified line.</p>
-
- <p>Linear gradients must be rendered such 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 <a href="#interpolation">interpolation and
- extrapolation</a> described above). The points in the linear
- gradient must be transformed as described by the <span
- title="dom-context-2d-transformation">current transformation
- matrix</span> when rendering.</p>
-
- <p>If <span title=""><var title="">x0</var> = <var
- title="">x1</var></span> and <span title=""><var
- title="">y0</var> = <var title="">y1</var></span>, then
- the linear gradient must paint nothing.</p>
-
- <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
- first three representing the start circle with origin (<var
- title="">x0</var>, <var title="">y0</var>) and radius <var
- title="">r0</var>, and the last three representing the end circle
- with origin (<var title="">x1</var>, <var title="">y1</var>) and
- radius <var title="">r1</var>. The values are in coordinate space
- units. If any of the arguments are infinite or NaN, a
- <code>NotSupportedError</code> exception must be thrown. If either
- of <var title="">r0</var> or <var title="">r1</var> are negative, an
- <code>IndexSizeError</code> exception must be thrown. Otherwise,
- the method must return a radial <code>CanvasGradient</code>
- initialized with the two specified circles.</p>
-
- <p>Radial gradients must be rendered by following these steps:</p>
-
- <ol>
-
- <li><p>If <span title=""><var
- title="">x<sub>0</sub></var> = <var
- title="">x<sub>1</sub></var></span> and <span title=""><var
- title="">y<sub>0</sub></var> = <var
- title="">y<sub>1</sub></var></span> and <span title=""><var
- title="">r<sub>0</sub></var> = <var
- title="">r<sub>1</sub></var></span>, then the radial gradient must
- paint nothing. Abort these steps.</p></li>
-
- <li>
-
- <p>Let <span title="">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 title="">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 title="">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 at
- that position on the gradient (with the colors coming from the <a
- href="#interpolation">interpolation and extrapolation</a>
- described above).</p>
-
- </li>
-
- <li><p>For all values of <var title="">ω</var> where <span
- title="">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 <span title="">r(<var
- title="">ω</var>)</span> at position (<span title="">x(<var
- title="">ω</var>)</span>, <span title="">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 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).</p>
-
- <p>The resulting radial gradient must then be transformed as
- described by the <span title="dom-context-2d-transformation">current
- transformation matrix</span> when rendering.</p>
-
- <p>Gradients must be painted only where the relevant stroking or
- filling effects requires that they be drawn.</p>
-
- </div>
-
- <hr>
-
- <p>Patterns are represented by objects implementing the opaque
- <code>CanvasPattern</code> interface.</p>
-
- <dl class="domintro">
-
- <dt><var title="">pattern</var> = <var title="">context</var> . <code title="dom-context-2d-createPattern">createPattern</code>(<var title="">image</var>, <var title="">repetition</var>)</dt>
-
- <dd>
-
- <p>Returns a <code>CanvasPattern</code> object that uses the given image
- and repeats in the direction(s) given by the <var
- title="">repetition</var> argument.</p>
-
- <p>The allowed values for <var title="">repetition</var> are <code
- title="">repeat</code> (both directions), <code
- title="">repeat-x</code> (horizontal only), <code
- title="">repeat-y</code> (vertical only), and <code
- title="">no-repeat</code> (neither). If the <var
- title="">repetition</var> argument is empty, the value <code
- title="">repeat</code> is used.</p>
-
- <p>If the image has no image data, throws an
- <code>InvalidStateError</code> exception. If the second argument
- isn't one of the allowed values, throws a <code>SyntaxError</code>
- exception. If the image isn't yet fully decoded, then the method
- returns null.</p>
-
- </dd>
-
- </dl>
-
- <div class="impl">
-
- <p>To create objects of this type, the <dfn
- title="dom-context-2d-createPattern"><code>createPattern(<var
- title="">image</var>, <var title="">repetition</var>)</code></dfn>
- method is used. The first argument gives the image to use as the
- pattern (either an <code>HTMLImageElement</code>,
- <code>HTMLCanvasElement</code>, or <code>HTMLVideoElement</code>
- object). Modifying this image after calling the <code
- title="dom-context-2d-createPattern">createPattern()</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 title="">no-repeat</code>. If the empty string is specified,
- <code title="">repeat</code> must be assumed. If an unrecognized value
- is given, then the user agent must throw a <code>SyntaxError</code>
- exception. User agents must recognize the four values described above
- exactly (e.g. they must not do case folding). Except as specified
- below, the method must return a <code>CanvasPattern</code> object
- suitably initialized.</p>
-
- <p>The <var title="">image</var> argument is an instance of either
- <code>HTMLImageElement</code>, <code>HTMLCanvasElement</code>, or
- <code>HTMLVideoElement</code>.</p> <!-- drawImage() has an equivalent
- paragraph -->
-
- <p>If the <var title="">image</var> argument is an
- <code>HTMLImageElement</code> object that is not <span
- title="img-good">fully decodable</span>, or if the <var
- title="">image</var> argument is an <code>HTMLVideoElement</code>
- object whose <code title="dom-media-readyState">readyState</code>
- attribute is either <code
- title="dom-media-HAVE_NOTHING">HAVE_NOTHING</code> or <code
- title="dom-media-HAVE_METADATA">HAVE_METADATA</code>, then the
- implementation must return null.</p> <!-- drawImage() has an
- equivalent paragraph -->
-
- <p>If the <var title="">image</var> argument is an
- <code>HTMLCanvasElement</code> object with either a horizontal
- dimension or a vertical dimension equal to zero, then the
- implementation must throw an <code>InvalidStateError</code>
- exception.</p>
- <!-- drawImage() has an equivalent paragraph -->
-
- <p>Patterns must be painted so that the top left of the first image
- is anchored at the origin of the coordinate space, and images are
- then repeated horizontally to the left and right, if the
- <code>repeat-x</code> string was specified, or vertically up and
- down, if the <code>repeat-y</code> string was specified, or in all
- four directions all over the canvas, if the <code>repeat</code>
- string was specified, to create the repeated pattern that is used
- for rendering. The images are not scaled by this process; one CSS
- pixel of the image must be painted on one coordinate space unit in
- generating the repeated pattern. When rendered, however, patterns
- must actually be painted only where the stroking or filling effect
- requires that they be drawn, and the repeated pattern must be
- affected by the current transformation matrix. Pixels not covered by
- the repeating pattern (if the <code>repeat</code> string was not
- specified) must be transparent black.</p>
-
- <p>If the original image data is a bitmap image, the value painted
- at a point in the area of the repetitions is computed by filtering
- the original image data. The user agent may use any filtering
- algorithm (for example bilinear interpolation or nearest-neighbor).
- When the filtering algorithm requires a pixel value from outside the
- original image data, it must instead use the value from wrapping the
- pixel's coordinates to the original image's dimensions. (That is,
- the filter uses 'repeat' behavior, regardless of the value of
- <var title="">repetition</var>.)
- <!-- drawImage() has a similar paragraph with different rules -->
-
- <p>When the <code
- title="dom-context-2d-createPattern">createPattern()</code> method
- is passed an animated image as its <var title="">image</var>
- argument, the user agent must use the poster frame of the animation,
- or, if there is no poster frame, the first frame of the
- animation.</p>
- <!-- drawImage() has an equivalent paragraph -->
-
- <p>When the <var title="">image</var> argument is an
- <code>HTMLVideoElement</code>, then the frame at the <span>current
- playback position</span> must be used as the source image, and the
- source image's dimensions must be the <span
- title="concept-video-intrinsic-width">intrinsic width</span> and
- <span title="concept-video-intrinsic-height">intrinsic height</span>
- of the <span>media resource</span> (i.e. after any aspect-ratio
- correction has been applied).</p>
- <!-- drawImage() has an equivalent paragraph -->
-
- <!--
- Requests for v5 features:
- * apply transforms to patterns, so you don't have to create
- transformed patterns manually by rendering them to an off-screen
- canvas then using that canvas as the pattern.
- -->
-
- </div>
-
- <div class="impl">
-
- <hr>
-
- <p>If a radial gradient or repeated pattern is used when the
- transformation matrix is singular, the resulting style must be
- transparent black (otherwise the gradient or pattern would be
- collapsed to a point or line, leaving the other pixels undefined).
- Linear gradients and solid colors always define all points even with
- singular tranformation matrices.</p>
-
- </div>
-
-
-
<h6>Line styles</h6>
<dl class="domintro">
@@ -41854,41 +41195,48 @@
</div>
- <h6><dfn>Shadows</dfn></h6>
+ <h6>Text styles</h6>
- <p>All drawing operations are affected by the four global shadow
- attributes.</p>
-
<dl class="domintro">
- <dt><var title="">context</var> . <code title="dom-context-2d-shadowColor">shadowColor</code> [ = <var title="">value</var> ]</dt>
+ <dt><var title="">context</var> . <code title="dom-context-2d-font">font</code> [ = <var title="">value</var> ]</dt>
<dd>
- <p>Returns the current shadow color.</p>
+ <p>Returns the current font settings.</p>
- <p>Can be set, to change the shadow color. Values that cannot be parsed as CSS colors are ignored.</p>
+ <p>Can be set, to change the font. The syntax is the same as for
+ the CSS 'font' property; values that cannot be parsed as CSS font
+ values are ignored.</p>
+ <p>Relative keywords and lengths are computed relative to the font
+ of the <code>canvas</code> element.</p>
+
</dd>
- <dt><var title="">context</var> . <code title="dom-context-2d-shadowOffsetX">shadowOffsetX</code> [ = <var title="">value</var> ]</dt>
- <dt><var title="">context</var> . <code title="dom-context-2d-shadowOffsetY">shadowOffsetY</code> [ = <var title="">value</var> ]</dt>
+ <dt><var title="">context</var> . <code title="dom-context-2d-textAlign">textAlign</code> [ = <var title="">value</var> ]</dt>
<dd>
- <p>Returns the current shadow offset.</p>
+ <p>Returns the current text alignment settings.</p>
- <p>Can be set, to change the shadow offset. Values that are not finite numbers are ignored.</p>
+ <p>Can be set, to change the alignment. The possible values are
+ <code title="">start</code>, <code title="">end</code>, <code
+ title="">left</code>, <code title="">right</code>, and <code
+ title="">center</code>. Other values are ignored. The default is
+ <code title="">start</code>.</p>
</dd>
- <dt><var title="">context</var> . <code title="dom-context-2d-shadowBlur">shadowBlur</code> [ = <var title="">value</var> ]</dt>
+ <dt><var title="">context</var> . <code title="dom-context-2d-textBaseline">textBaseline</code> [ = <var title="">value</var> ]</dt>
<dd>
- <p>Returns the current level of blur applied to shadows.</p>
+ <p>Returns the current baseline alignment settings.</p>
- <p>Can be set, to change the blur level. Values that are not finite numbers greater than or equal to zero are ignored.</p>
+ <p>Can be set, to change the baseline alignment. The possible
+ values and their meanings are given below. Other values are
+ ignored. The default is <code title="">alphabetic</code>.</p>
</dd>
@@ -41896,230 +41244,141 @@
<div class="impl">
- <p>The <dfn
- title="dom-context-2d-shadowColor"><code>shadowColor</code></dfn>
- attribute sets the color of the shadow.</p>
+ <p>Objects that implement the <code>CanvasText</code>
+ interface have attributes (defined in this section) that control how
+ text is laid out (rasterized or outlined) by the object.</p>
- <p>When the context is created, the <code
- title="dom-context-2d-shadowColor">shadowColor</code> attribute
- initially must be fully-transparent black.</p>
+ <p>The <dfn title="dom-context-2d-font"><code>font</code></dfn> IDL
+ attribute, on setting, must be parsed the same way as the 'font'
+ property of CSS (but without supporting property-independent style
+ sheet syntax like 'inherit'), and the resulting font must be
+ assigned to the context, with the 'line-height' component forced to
+ 'normal', with the 'font-size' component converted to CSS pixels,
+ and with system fonts being computed to explicit values. If the new
+ value is syntactically incorrect (including using
+ property-independent style sheet syntax like 'inherit' or
+ 'initial'), then it must be ignored, without assigning a new font
+ value. <a href="#refsCSS">[CSS]</a></p>
- <p>On getting, the <span title="serialization of a
- color">serialization of the color</span> must be returned.</p>
+ <p>Font names must be interpreted in the context of the
+ <code>canvas</code> element's stylesheets; any fonts embedded using
+ <code title="">@font-face</code> must therefore be available once
+ they are loaded. (If a font is referenced before it is fully loaded,
+ then it must be treated as if it was an unknown font, falling back
+ to another as described by the relevant CSS specifications.) <a
+ href="#refsCSSFONTS">[CSSFONTS]</a></p>
- <p>On setting, the new value must be <span>parsed as a CSS
- <color> value</span> and the color assigned. If the value
- cannot be parsed as a CSS <color> value then it must be
- ignored, and the attribute must retain its previous value. <a
- href="#refsCSSCOLOR">[CSSCOLOR]</a></p>
+ <!-- XXX Path objects don't have a canvas -->
- <p>The <dfn
- title="dom-context-2d-shadowOffsetX"><code>shadowOffsetX</code></dfn>
- and <dfn
- 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. They are
- not affected by the current transformation matrix.</p>
+ <p>Only vector fonts should be used by the user agent; if a user
+ agent were to use bitmap fonts then transformations would likely
+ make the font look very ugly.</p>
- <p>When the context is created, the shadow offset attributes must
- initially have the value <code>0</code>.</p>
+ <p>On getting, the <code title="dom-context-2d-font">font</code>
+ attribute must return the <span title="serializing a CSS
+ value">serialized form</span> of the current font of the context
+ (with no 'line-height' component). <a
+ href="#refsCSSOM">[CSSOM]</a></p>
- <p>On getting, they must return their current value. On setting, the
- attribute being set must be set to the new value, except if the
- value is infinite or NaN, in which case the new value must be
- ignored.</p>
+ <div class="example">
- <p>The <dfn
- title="dom-context-2d-shadowBlur"><code>shadowBlur</code></dfn>
- attribute specifies the level of the blurring effect. (The units do
- not map to coordinate space units, and are not affected by the
- current transformation matrix.)</p>
+ <p>For example, after the following statement:</p>
- <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>
+ <pre>context.font = 'italic 400 12px/2 Unknown Font, sans-serif';</pre>
- <p>On getting, the attribute must return its current value. On
- setting the attribute must be set to the new value, except if the
- value is negative, infinite or NaN, in which case the new value must
- be ignored.</p>
+ <p>...the expression <code title="">context.font</code> would
+ evaluate to the string "<code
+ title="">italic 12px "Unknown Font", sans-serif</code>". The
+ "400" font-weight doesn't appear because that is the default
+ value. The line-height doesn't appear because it is forced to
+ "normal", the default value.</p>
- <p><dfn title="when shadows are drawn">Shadows are only drawn
- if</dfn> the opacity component of the alpha component of the color
- of <code title="dom-context-2d-shadowColor">shadowColor</code> is
- non-zero and either the <code
- title="dom-context-2d-shadowBlur">shadowBlur</code> is non-zero, or
- the <code title="dom-context-2d-shadowOffsetX">shadowOffsetX</code>
- is non-zero, or the <code
- title="dom-context-2d-shadowOffsetY">shadowOffsetY</code> is
- non-zero.</p>
-
- <p class="critical">It is likely that this will change: browser
- vendors have indicated an interest in changing the processing model
- for shadows such that they only draw when the composition operator
- is "source-over" (the default). <a
- href="http://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2011-May/thread.html#31457">Read
- more...</a></p>
-
- <p><span>When shadows are drawn</span>, they must be rendered as follows:</p>
-
- <ol>
-
- <li> <p>Let <var title="">A</var> be an infinite transparent black
- bitmap on which the source image for which a shadow is being
- created has been rendered.</p> </li>
-
- <li> <p>Let <var title="">B</var> be an infinite transparent black
- bitmap, with a coordinate space and an origin identical to <var
- title="">A</var>.</p> </li>
-
- <li> <p>Copy the alpha channel of <var title="">A</var> to <var
- title="">B</var>, offset by <code
- title="dom-context-2d-shadowOffsetX">shadowOffsetX</code> in the
- positive <var title="">x</var> direction, and <code
- title="dom-context-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>Let <var title="">σ</var> be half the value of
- <code
- title="dom-context-2d-shadowBlur">shadowBlur</code>.</p></li>
-
- <li> <p>Perform a 2D Gaussian Blur on <var title="">B</var>,
- using <var title="">σ</var> as the standard deviation.</p>
- <!-- wish i could find a reference for this --> </li>
-
- </ol>
-
- <p>User agents may limit values of <var title="">σ</var> to
- an implementation-specific maximum value to avoid exceeding
- hardware limitations during the Gaussian blur operation.</p>
-
- </li>
-
- <li> <p>Set the red, green, and blue components of every pixel in
- <var title="">B</var> 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 <var
- title="">B</var> by the alpha component of the color of <code
- title="dom-context-2d-shadowColor">shadowColor</code>.</p> </li>
-
- <li> <p>The shadow is in the bitmap <var title="">B</var>, and is
- rendered as part of the <span>drawing model</span> described below.</p> </li>
-
- </ol>
-
</div>
- <p>If the current composition operation is <code
- title="gcop-copy">copy</code>, shadows effectively won't render
- (since the shape will overwrite the shadow).</p>
+ <p>When the object implementing the <code>CanvasText</code>
+ interface is created, the font of the context must be set to 10px
+ sans-serif. When the 'font-size' component is set to lengths using
+ percentages, 'em' or 'ex' units, or the 'larger' or 'smaller'
+ keywords, these must be interpreted relative to the computed value
+ of the 'font-size' property of the corresponding <code>canvas</code>
+ element at the time that the attribute is set. When the
+ 'font-weight' component is set to the relative values 'bolder' and
+ 'lighter', these must be interpreted relative to the computed value
+ of the 'font-weight' property of the corresponding
+ <code>canvas</code> element at the time that the attribute is set.
+ If the computed values are undefined for a particular case (e.g.
+ because the <code>canvas</code> element is not <span>in a
+ <code>Document</code></span>), then the relative keywords must be
+ interpreted relative to the normal-weight 10px sans-serif
+ default.</p> <!-- XXX Path canvas issue again, twice -->
+ <p>The <dfn
+ title="dom-context-2d-textAlign"><code>textAlign</code></dfn> IDL
+ attribute, on getting, must return the current value. On setting, if
+ the value is one of <code title="">start</code>, <code
+ title="">end</code>, <code title="">left</code>, <code
+ title="">right</code>, or <code title="">center</code>, then the
+ value must be changed to the new value. Otherwise, the new value
+ must be ignored. When the object implementing the
+ <code>CanvasText</code> interface is created, the <code
+ title="dom-context-2d-textAlign">textAlign</code> attribute must
+ initially have the value <code title="">start</code>.</p>
- <h6>Simple shapes (rectangles)</h6>
+ <p>The <dfn
+ title="dom-context-2d-textBaseline"><code>textBaseline</code></dfn>
+ IDL attribute, on getting, must return the current value. On
+ setting, if the value is one of <code
+ title="dom-context-2d-textBaseline-top">top</code>, <code
+ title="dom-context-2d-textBaseline-hanging">hanging</code>, <code
+ title="dom-context-2d-textBaseline-middle">middle</code>, <code
+ title="dom-context-2d-textBaseline-alphabetic">alphabetic</code>,
+ <code
+ title="dom-context-2d-textBaseline-ideographic">ideographic</code>,
+ or <code title="dom-context-2d-textBaseline-bottom">bottom</code>,
+ then the value must be changed to the new value. Otherwise, the new
+ value must be ignored. When the object implementing the
+ <code>CanvasText</code> interface is created, the <code
+ title="dom-context-2d-textBaseline">textBaseline</code> attribute
+ must initially have the value <code title="">alphabetic</code>.</p>
- <p>There are three methods that immediately draw rectangles to the
- bitmap. They each take four arguments; the first two give the <var
- title="">x</var> and <var title="">y</var> coordinates of the top
- left of the rectangle, and the second two give the width <var
- title="">w</var> and height <var title="">h</var> of the rectangle,
- respectively.</p>
-
- <div class="impl">
-
- <p>The <span title="dom-context-2d-transformation">current
- transformation matrix</span> must be applied to the following four
- coordinates, which form the path that must then be closed to get the
- specified rectangle: <span title="">(<var title="">x</var>, <var
- title="">y</var>)</span>, <span title="">(<span title=""><var title="">x</var>+<var
- title="">w</var></span>, <var title="">y</var>)</span>,
- <span title="">(<span title=""><var title="">x</var>+<var title="">w</var></span>,
- <span title=""><var title="">y</var>+<var title="">h</var></span>)</span>,
- <span title="">(<var title="">x</var>, <span title=""><var title="">y</var>+<var
- title="">h</var></span>)</span>.</p>
-
- <p>Shapes are painted without affecting the current default path,
- and are subject to the <span title="clipping region">clipping
- region</span>, and, with the exception of <code
- title="dom-context-2d-clearRect">clearRect()</code>, also <span
- title="shadows">shadow effects</span>, <span
- title="dom-context-2d-globalAlpha">global alpha</span>, and <span
- title="dom-context-2d-globalCompositeOperation">global composition
- operators</span>.</p>
-
</div>
- <dl class="domintro">
+ <p>The <code title="dom-context-2d-textBaseline">textBaseline</code>
+ attribute's allowed keywords correspond to alignment points in the
+ font:</p>
- <dt><var title="">context</var> . <code title="dom-context-2d-clearRect">clearRect</code>(<var title="">x</var>, <var title="">y</var>, <var title="">w</var>, <var title="">h</var>)</dt>
+ <!-- this is filler to make sure the TCP packet boundary doesn't fall in the middle of one of the NCRs below -->
+ <!-- (because otherwise the parser in anolis screws it up) -->
+ <p><img src="images/baselines.png" width="738" height="300" alt="The top of the em square is roughly at the top of the glyphs in a font, the hanging baseline is where some glyphs like आ are anchored, the middle is half-way between the top of the em square and the bottom of the em square, the alphabetic baseline is where characters like Á, ÿ, f, and Ω are anchored, the ideographic baseline is where glyphs like 私 and 達 are anchored, and the bottom of the em square is roughly at the bottom of the glyphs in a font. The top and bottom of the bounding box can be far from these baselines, due to glyphs extending far outside the em square."></p>
- <dd>
+ <p>The keywords map to these alignment points as follows:</p>
- <p>Clears all pixels on the canvas in the given rectangle to transparent black.</p>
+ <dl>
- </dd>
+ <dt><dfn title="dom-context-2d-textBaseline-top"><code>top</code></dfn>
+ <dd>The top of the em square</dd>
- <dt><var title="">context</var> . <code title="dom-context-2d-fillRect">fillRect</code>(<var title="">x</var>, <var title="">y</var>, <var title="">w</var>, <var title="">h</var>)</dt>
+ <dt><dfn title="dom-context-2d-textBaseline-hanging"><code>hanging</code></dfn>
+ <dd>The hanging baseline</dd>
- <dd>
+ <dt><dfn title="dom-context-2d-textBaseline-middle"><code>middle</code></dfn>
+ <dd>The middle of the em square</dd>
- <p>Paints the given rectangle onto the canvas, using the current fill style.</p>
+ <dt><dfn title="dom-context-2d-textBaseline-alphabetic"><code>alphabetic</code></dfn>
+ <dd>The alphabetic baseline</dd>
- </dd>
+ <dt><dfn title="dom-context-2d-textBaseline-ideographic"><code>ideographic</code></dfn>
+ <dd>The ideographic baseline</dd>
- <dt><var title="">context</var> . <code title="dom-context-2d-strokeRect">strokeRect</code>(<var title="">x</var>, <var title="">y</var>, <var title="">w</var>, <var title="">h</var>)</dt>
+ <dt><dfn title="dom-context-2d-textBaseline-bottom"><code>bottom</code></dfn>
+ <dd>The bottom of the em square</dd>
- <dd>
-
- <p>Paints the box that outlines the given rectangle onto the canvas, using the current stroke style.</p>
-
- </dd>
-
</dl>
- <div class="impl">
- <p>The <dfn title="dom-context-2d-clearRect"><code>clearRect(<var
- title="">x</var>, <var title="">y</var>, <var title="">w</var>, <var
- title="">h</var>)</code></dfn> method must clear the pixels in the
- specified rectangle that also intersect the current clipping region
- to a fully transparent black, erasing any previous image. If either
- height or width are zero, this method has no effect.</p>
- <p>The <dfn title="dom-context-2d-fillRect"><code>fillRect(<var
- title="">x</var>, <var title="">y</var>, <var title="">w</var>, <var
- title="">h</var>)</code></dfn> method must paint the specified
- rectangular area using the <code
- title="dom-context-2d-fillStyle">fillStyle</code>. If either height
- or width are zero, this method has no effect.</p>
+ <h6>Building paths</h6>
- <p>The <dfn title="dom-context-2d-strokeRect"><code>strokeRect(<var
- title="">x</var>, <var title="">y</var>, <var title="">w</var>, <var
- title="">h</var>)</code></dfn> method must stroke the specified
- rectangle's path using the <code
- title="dom-context-2d-strokeStyle">strokeStyle</code>, <code
- title="dom-context-2d-lineWidth">lineWidth</code>, <code
- title="dom-context-2d-lineJoin">lineJoin</code>, and (if
- appropriate) <code
- title="dom-context-2d-miterLimit">miterLimit</code> attributes. If
- both height and width are zero, this method has no effect, since
- there is no path to stroke (it's a point). If only one of the two is
- zero, then the method will draw a line instead (the path for the
- outline is just a straight line along the non-zero dimension).</p>
-
- </div>
-
-
- <h6>Complex shapes (paths)</h6>
-
<p>Each object implementing the <code>CanvasPathMethods</code>
interface has a <span>path</span>. A <dfn>path</dfn> has a list of
zero or more subpaths. Each subpath consists of a list of one or
@@ -42426,6 +41685,489 @@
+
+ <h6>Fill and stroke styles</h6>
+
+ <dl class="domintro">
+
+ <dt><var title="">context</var> . <code title="dom-context-2d-fillStyle">fillStyle</code> [ = <var title="">value</var> ]</dt>
+
+ <dd>
+
+ <p>Returns the current style used for filling shapes.</p>
+
+ <p>Can be set, to change the fill style.</p>
+
+ <p>The style can be either a string containing a CSS color, or a
+ <code>CanvasGradient</code> or <code>CanvasPattern</code>
+ object. Invalid values are ignored.</p>
+
+ </dd>
+
+ <dt><var title="">context</var> . <code title="dom-context-2d-strokeStyle">strokeStyle</code> [ = <var title="">value</var> ]</dt>
+
+ <dd>
+
+ <p>Returns the current style used for stroking shapes.</p>
+
+ <p>Can be set, to change the stroke style.</p>
+
+ <p>The style can be either a string containing a CSS color, or a
+ <code>CanvasGradient</code> or <code>CanvasPattern</code>
+ object. Invalid values are ignored.</p>
+
+ </dd>
+
+ </dl>
+
+ <div class="impl">
+
+ <!-- v6 feature requests:
+
+ * Getting and setting colours by component to bypass the CSS value parsing.
+
+ Either:
+ context.fillStyle.red += 1;
+
+ Or:
+ var array = context.fillStyle;
+ array[1] += 1;
+ context.fillStyle = array;
+
+ * A more performant way of setting colours in general, e.g.:
+
+ context.setFillColor(r,g,b,a) // already supported by webkit
+
+ Or:
+
+ context.fillStyle = 0xRRGGBBAA; // set a 32bit int directly
+
+ * fill rule for deciding between winding and even-odd algorithms.
+ SVG has fill-rule: nonzero | evenodd
+ http://www.w3.org/TR/SVG/painting.html#FillProperties
+ see also mozFillRule: http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2011-June/032002.html
+
+ -->
+
+ <p>The <dfn
+ title="dom-context-2d-fillStyle"><code>fillStyle</code></dfn>
+ attribute represents the color or style to use inside shapes, and
+ the <dfn
+ title="dom-context-2d-strokeStyle"><code>strokeStyle</code></dfn>
+ attribute represents the color or style to use for the lines around
+ the shapes.</p>
+
+ <p>Both attributes can be either strings,
+ <code>CanvasGradient</code>s, or <code>CanvasPattern</code>s. On
+ setting, strings must be <span title="parsed as a CSS <color>
+ value">parsed as CSS <color> values</span> and the color
+ assigned, and <code>CanvasGradient</code> and
+ <code>CanvasPattern</code> objects must be assigned themselves. <a
+ href="#refsCSSCOLOR">[CSSCOLOR]</a> If the value is a string but
+ cannot be <span>parsed as a CSS <color> value</span>, or is
+ neither a string, a <code>CanvasGradient</code>, nor a
+ <code>CanvasPattern</code>, then it must be ignored, and the
+ attribute must retain its previous value.</p>
+
+ <p>When set to a <code>CanvasPattern</code> or
+ <code>CanvasGradient</code> object, the assignment is
+ <span>live</span>, meaning that changes made to the object after the
+ assignment do affect subsequent stroking or filling of shapes.</p>
+
+ <p>On getting, if the value is a color, then the <span
+ title="serialization of a color">serialization 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>serialization 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, if the alpha value is greater than zero then a
+ U+002E FULL STOP (representing the decimal point), if the alpha
+ value is greater than zero then one or more digits in the range 0-9
+ (U+0030 to U+0039) representing the fractional part of the alpha<!--
+ value with no trailing zeros (implied by next sentence)-->, and
+ finally a U+0029 RIGHT PARENTHESIS. User agents must express the
+ fractional part of the alpha value, if any, with the level of
+ precision necessary for the alpha value, when reparsed, to be
+ interpreted as the same alpha value.</p> <!-- if people complain
+ this is unreadable, expand it into a <dl> with two nested <ol>s -->
+
+ <p>When the context is created, the <code
+ title="dom-context-2d-fillStyle">fillStyle</code> and <code
+ title="dom-context-2d-strokeStyle">strokeStyle</code> attributes
+ must initially have the string value <code
+ title="">#000000</code>.</p>
+
+ <p>When the value is a color, it must not be affected by the
+ transformation matrix when used to draw on the canvas.</p> <!-- so
+ singular matrices don't affect solid color fillStyles -->
+
+ </div>
+
+ <hr>
+
+ <p>There are two types of gradients, linear gradients and radial
+ gradients, both represented by objects implementing the opaque
+ <code>CanvasGradient</code> interface.</p>
+
+ <p id="interpolation">Once a gradient has been created (see below),
+ stops are placed along it to define how the colors are distributed
+ along the gradient. <span class="impl">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.</span></p>
+
+ <dl class="domintro">
+
+ <dt><var title="">gradient</var> . <code title="dom-canvasgradient-addColorStop">addColorStop</code>(<var title="">offset</var>, <var title="">color</var>)</dt>
+
+ <dd>
+
+ <p>Adds a color stop with the given color to the gradient at the
+ given offset. 0.0 is the offset at one end of the gradient, 1.0 is
+ the offset at the other end.</p>
+
+ <p>Throws an <code>IndexSizeError</code> exception if the offset
+ is out of range. Throws a <code>SyntaxError</code> exception if the
+ color cannot be parsed.</p>
+
+ </dd>
+
+ <dt><var title="">gradient</var> = <var title="">context</var> . <code title="dom-context-2d-createLinearGradient">createLinearGradient</code>(<var title="">x0</var>, <var title="">y0</var>, <var title="">x1</var>, <var title="">y1</var>)</dt>
+
+ <dd>
+
+ <p>Returns a <code>CanvasGradient</code> object that represents a
+ linear gradient that paints along the line given by the
+ coordinates represented by the arguments.</p>
+
+ <p>If any of the arguments are not finite numbers, throws a
+ <code>NotSupportedError</code> exception.</p>
+
+ </dd>
+
+ <dt><var title="">gradient</var> = <var title="">context</var> . <code title="dom-context-2d-createRadialGradient">createRadialGradient</code>(<var title="">x0</var>, <var title="">y0</var>, <var title="">r0</var>, <var title="">x1</var>, <var title="">y1</var>, <var title="">r1</var>)</dt>
+
+ <dd>
+
+ <p>Returns a <code>CanvasGradient</code> object that represents a
+ radial gradient that paints along the cone given by the circles
+ represented by the arguments.</p>
+
+ <p>If any of the arguments are not finite numbers, throws a
+ <code>NotSupportedError</code> exception. If either of the radii
+ are negative, throws an <code>IndexSizeError</code> exception.</p>
+
+ </dd>
+
+ </dl>
+
+ <div class="impl">
+
+ <p>The <dfn
+ title="dom-canvasgradient-addColorStop"><code>addColorStop(<var
+ title="">offset</var>, <var title="">color</var>)</code></dfn>
+ method on the <code>CanvasGradient</code> interface adds a new stop
+ to a gradient. If the <var title="">offset</var> is less than 0,
+ greater than 1, infinite, or NaN, then an
+ <code>IndexSizeError</code> exception must be thrown. If the <var
+ title="">color</var> cannot be <span>parsed as a CSS <color>
+ value</span>, then a <code>SyntaxError</code> exception must be
+ thrown. 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 added at the same
+ offset 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="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
+ that represent the start point (<var title="">x0</var>, <var
+ title="">y0</var>) and end point (<var title="">x1</var>, <var
+ title="">y1</var>) of the gradient. If any of the arguments to <code
+ title="dom-context-2d-createLinearGradient">createLinearGradient()</code>
+ are infinite or NaN, the method must throw a
+ <code>NotSupportedError</code> exception. Otherwise, the method must
+ return a linear <code>CanvasGradient</code> initialized with the
+ specified line.</p>
+
+ <p>Linear gradients must be rendered such 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 <a href="#interpolation">interpolation and
+ extrapolation</a> described above). The points in the linear
+ gradient must be transformed as described by the <span
+ title="dom-context-2d-transformation">current transformation
+ matrix</span> when rendering.</p>
+
+ <p>If <span title=""><var title="">x0</var> = <var
+ title="">x1</var></span> and <span title=""><var
+ title="">y0</var> = <var title="">y1</var></span>, then
+ the linear gradient must paint nothing.</p>
+
+ <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
+ first three representing the start circle with origin (<var
+ title="">x0</var>, <var title="">y0</var>) and radius <var
+ title="">r0</var>, and the last three representing the end circle
+ with origin (<var title="">x1</var>, <var title="">y1</var>) and
+ radius <var title="">r1</var>. The values are in coordinate space
+ units. If any of the arguments are infinite or NaN, a
+ <code>NotSupportedError</code> exception must be thrown. If either
+ of <var title="">r0</var> or <var title="">r1</var> are negative, an
+ <code>IndexSizeError</code> exception must be thrown. Otherwise,
+ the method must return a radial <code>CanvasGradient</code>
+ initialized with the two specified circles.</p>
+
+ <p>Radial gradients must be rendered by following these steps:</p>
+
+ <ol>
+
+ <li><p>If <span title=""><var
+ title="">x<sub>0</sub></var> = <var
+ title="">x<sub>1</sub></var></span> and <span title=""><var
+ title="">y<sub>0</sub></var> = <var
+ title="">y<sub>1</sub></var></span> and <span title=""><var
+ title="">r<sub>0</sub></var> = <var
+ title="">r<sub>1</sub></var></span>, then the radial gradient must
+ paint nothing. Abort these steps.</p></li>
+
+ <li>
+
+ <p>Let <span title="">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 title="">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 title="">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 at
+ that position on the gradient (with the colors coming from the <a
+ href="#interpolation">interpolation and extrapolation</a>
+ described above).</p>
+
+ </li>
+
+ <li><p>For all values of <var title="">ω</var> where <span
+ title="">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 <span title="">r(<var
+ title="">ω</var>)</span> at position (<span title="">x(<var
+ title="">ω</var>)</span>, <span title="">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 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).</p>
+
+ <p>The resulting radial gradient must then be transformed as
+ described by the <span title="dom-context-2d-transformation">current
+ transformation matrix</span> when rendering.</p>
+
+ <p>Gradients must be painted only where the relevant stroking or
+ filling effects requires that they be drawn.</p>
+
+ </div>
+
+ <hr>
+
+ <p>Patterns are represented by objects implementing the opaque
+ <code>CanvasPattern</code> interface.</p>
+
+ <dl class="domintro">
+
+ <dt><var title="">pattern</var> = <var title="">context</var> . <code title="dom-context-2d-createPattern">createPattern</code>(<var title="">image</var>, <var title="">repetition</var>)</dt>
+
+ <dd>
+
+ <p>Returns a <code>CanvasPattern</code> object that uses the given image
+ and repeats in the direction(s) given by the <var
+ title="">repetition</var> argument.</p>
+
+ <p>The allowed values for <var title="">repetition</var> are <code
+ title="">repeat</code> (both directions), <code
+ title="">repeat-x</code> (horizontal only), <code
+ title="">repeat-y</code> (vertical only), and <code
+ title="">no-repeat</code> (neither). If the <var
+ title="">repetition</var> argument is empty, the value <code
+ title="">repeat</code> is used.</p>
+
+ <p>If the image has no image data, throws an
+ <code>InvalidStateError</code> exception. If the second argument
+ isn't one of the allowed values, throws a <code>SyntaxError</code>
+ exception. If the image isn't yet fully decoded, then the method
+ returns null.</p>
+
+ </dd>
+
+ </dl>
+
+ <div class="impl">
+
+ <p>To create objects of this type, the <dfn
+ title="dom-context-2d-createPattern"><code>createPattern(<var
+ title="">image</var>, <var title="">repetition</var>)</code></dfn>
+ method is used. The first argument gives the image to use as the
+ pattern (either an <code>HTMLImageElement</code>,
+ <code>HTMLCanvasElement</code>, or <code>HTMLVideoElement</code>
+ object). Modifying this image after calling the <code
+ title="dom-context-2d-createPattern">createPattern()</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 title="">no-repeat</code>. If the empty string is specified,
+ <code title="">repeat</code> must be assumed. If an unrecognized value
+ is given, then the user agent must throw a <code>SyntaxError</code>
+ exception. User agents must recognize the four values described above
+ exactly (e.g. they must not do case folding). Except as specified
+ below, the method must return a <code>CanvasPattern</code> object
+ suitably initialized.</p>
+
+ <p>The <var title="">image</var> argument is an instance of either
+ <code>HTMLImageElement</code>, <code>HTMLCanvasElement</code>, or
+ <code>HTMLVideoElement</code>.</p> <!-- drawImage() has an equivalent
+ paragraph -->
+
+ <p>If the <var title="">image</var> argument is an
+ <code>HTMLImageElement</code> object that is not <span
+ title="img-good">fully decodable</span>, or if the <var
+ title="">image</var> argument is an <code>HTMLVideoElement</code>
+ object whose <code title="dom-media-readyState">readyState</code>
+ attribute is either <code
+ title="dom-media-HAVE_NOTHING">HAVE_NOTHING</code> or <code
+ title="dom-media-HAVE_METADATA">HAVE_METADATA</code>, then the
+ implementation must return null.</p> <!-- drawImage() has an
+ equivalent paragraph -->
+
+ <p>If the <var title="">image</var> argument is an
+ <code>HTMLCanvasElement</code> object with either a horizontal
+ dimension or a vertical dimension equal to zero, then the
+ implementation must throw an <code>InvalidStateError</code>
+ exception.</p>
+ <!-- drawImage() has an equivalent paragraph -->
+
+ <p>Patterns must be painted so that the top left of the first image
+ is anchored at the origin of the coordinate space, and images are
+ then repeated horizontally to the left and right, if the
+ <code>repeat-x</code> string was specified, or vertically up and
+ down, if the <code>repeat-y</code> string was specified, or in all
+ four directions all over the canvas, if the <code>repeat</code>
+ string was specified, to create the repeated pattern that is used
+ for rendering. The images are not scaled by this process; one CSS
+ pixel of the image must be painted on one coordinate space unit in
+ generating the repeated pattern. When rendered, however, patterns
+ must actually be painted only where the stroking or filling effect
+ requires that they be drawn, and the repeated pattern must be
+ affected by the current transformation matrix. Pixels not covered by
+ the repeating pattern (if the <code>repeat</code> string was not
+ specified) must be transparent black.</p>
+
+ <p>If the original image data is a bitmap image, the value painted
+ at a point in the area of the repetitions is computed by filtering
+ the original image data. The user agent may use any filtering
+ algorithm (for example bilinear interpolation or nearest-neighbor).
+ When the filtering algorithm requires a pixel value from outside the
+ original image data, it must instead use the value from wrapping the
+ pixel's coordinates to the original image's dimensions. (That is,
+ the filter uses 'repeat' behavior, regardless of the value of
+ <var title="">repetition</var>.)
+ <!-- drawImage() has a similar paragraph with different rules -->
+
+ <p>When the <code
+ title="dom-context-2d-createPattern">createPattern()</code> method
+ is passed an animated image as its <var title="">image</var>
+ argument, the user agent must use the poster frame of the animation,
+ or, if there is no poster frame, the first frame of the
+ animation.</p>
+ <!-- drawImage() has an equivalent paragraph -->
+
+ <p>When the <var title="">image</var> argument is an
+ <code>HTMLVideoElement</code>, then the frame at the <span>current
+ playback position</span> must be used as the source image, and the
+ source image's dimensions must be the <span
+ title="concept-video-intrinsic-width">intrinsic width</span> and
+ <span title="concept-video-intrinsic-height">intrinsic height</span>
+ of the <span>media resource</span> (i.e. after any aspect-ratio
+ correction has been applied).</p>
+ <!-- drawImage() has an equivalent paragraph -->
+
+ <!--
+ Requests for v5 features:
+ * apply transforms to patterns, so you don't have to create
+ transformed patterns manually by rendering them to an off-screen
+ canvas then using that canvas as the pattern.
+ -->
+
+ </div>
+
+ <div class="impl">
+
+ <hr>
+
+ <p>If a radial gradient or repeated pattern is used when the
+ transformation matrix is singular, the resulting style must be
+ transparent black (otherwise the gradient or pattern would be
+ collapsed to a point or line, leaving the other pixels undefined).
+ Linear gradients and solid colors always define all points even with
+ singular tranformation matrices.</p>
+
+ </div>
+
+
+
<h6>The current default path</h6>
<p>The context always has a current default path. There is only one
@@ -42819,188 +42561,104 @@
- <h6>Text</h6> <!-- a v3 feature -->
- <dl class="domintro">
+ <h6>Drawing rectangles to the canvas</h6>
- <dt><var title="">context</var> . <code title="dom-context-2d-font">font</code> [ = <var title="">value</var> ]</dt>
+ <p>There are three methods that immediately draw rectangles to the
+ bitmap. They each take four arguments; the first two give the <var
+ title="">x</var> and <var title="">y</var> coordinates of the top
+ left of the rectangle, and the second two give the width <var
+ title="">w</var> and height <var title="">h</var> of the rectangle,
+ respectively.</p>
- <dd>
+ <div class="impl">
- <p>Returns the current font settings.</p>
+ <p>The <span title="dom-context-2d-transformation">current
+ transformation matrix</span> must be applied to the following four
+ coordinates, which form the path that must then be closed to get the
+ specified rectangle: <span title="">(<var title="">x</var>, <var
+ title="">y</var>)</span>, <span title="">(<span title=""><var title="">x</var>+<var
+ title="">w</var></span>, <var title="">y</var>)</span>,
+ <span title="">(<span title=""><var title="">x</var>+<var title="">w</var></span>,
+ <span title=""><var title="">y</var>+<var title="">h</var></span>)</span>,
+ <span title="">(<var title="">x</var>, <span title=""><var title="">y</var>+<var
+ title="">h</var></span>)</span>.</p>
- <p>Can be set, to change the font. The syntax is the same as for
- the CSS 'font' property; values that cannot be parsed as CSS font
- values are ignored.</p>
+ <p>Shapes are painted without affecting the current default path,
+ and are subject to the <span title="clipping region">clipping
+ region</span>, and, with the exception of <code
+ title="dom-context-2d-clearRect">clearRect()</code>, also <span
+ title="shadows">shadow effects</span>, <span
+ title="dom-context-2d-globalAlpha">global alpha</span>, and <span
+ title="dom-context-2d-globalCompositeOperation">global composition
+ operators</span>.</p>
- <p>Relative keywords and lengths are computed relative to the font
- of the <code>canvas</code> element.</p>
+ </div>
- </dd>
+ <dl class="domintro">
- <dt><var title="">context</var> . <code title="dom-context-2d-textAlign">textAlign</code> [ = <var title="">value</var> ]</dt>
+ <dt><var title="">context</var> . <code title="dom-context-2d-clearRect">clearRect</code>(<var title="">x</var>, <var title="">y</var>, <var title="">w</var>, <var title="">h</var>)</dt>
<dd>
- <p>Returns the current text alignment settings.</p>
+ <p>Clears all pixels on the canvas in the given rectangle to transparent black.</p>
- <p>Can be set, to change the alignment. The possible values are
- <code title="">start</code>, <code title="">end</code>, <code
- title="">left</code>, <code title="">right</code>, and <code
- title="">center</code>. Other values are ignored. The default is
- <code title="">start</code>.</p>
-
</dd>
- <dt><var title="">context</var> . <code title="dom-context-2d-textBaseline">textBaseline</code> [ = <var title="">value</var> ]</dt>
+ <dt><var title="">context</var> . <code title="dom-context-2d-fillRect">fillRect</code>(<var title="">x</var>, <var title="">y</var>, <var title="">w</var>, <var title="">h</var>)</dt>
<dd>
- <p>Returns the current baseline alignment settings.</p>
+ <p>Paints the given rectangle onto the canvas, using the current fill style.</p>
- <p>Can be set, to change the baseline alignment. The possible
- values and their meanings are given below. Other values are
- ignored. The default is <code title="">alphabetic</code>.</p>
-
</dd>
- </dl>
+ <dt><var title="">context</var> . <code title="dom-context-2d-strokeRect">strokeRect</code>(<var title="">x</var>, <var title="">y</var>, <var title="">w</var>, <var title="">h</var>)</dt>
- <div class="impl">
+ <dd>
- <p>Objects that implement the <code>CanvasText</code>
- interface have attributes (defined in this section) that control how
- text is laid out (rasterized or outlined) by the object.</p>
+ <p>Paints the box that outlines the given rectangle onto the canvas, using the current stroke style.</p>
- <p>The <dfn title="dom-context-2d-font"><code>font</code></dfn> IDL
- attribute, on setting, must be parsed the same way as the 'font'
- property of CSS (but without supporting property-independent style
- sheet syntax like 'inherit'), and the resulting font must be
- assigned to the context, with the 'line-height' component forced to
- 'normal', with the 'font-size' component converted to CSS pixels,
- and with system fonts being computed to explicit values. If the new
- value is syntactically incorrect (including using
- property-independent style sheet syntax like 'inherit' or
- 'initial'), then it must be ignored, without assigning a new font
- value. <a href="#refsCSS">[CSS]</a></p>
+ </dd>
- <p>Font names must be interpreted in the context of the
- <code>canvas</code> element's stylesheets; any fonts embedded using
- <code title="">@font-face</code> must therefore be available once
- they are loaded. (If a font is referenced before it is fully loaded,
- then it must be treated as if it was an unknown font, falling back
- to another as described by the relevant CSS specifications.) <a
- href="#refsCSSFONTS">[CSSFONTS]</a></p>
+ </dl>
- <!-- XXX Path objects don't have a canvas -->
+ <div class="impl">
- <p>Only vector fonts should be used by the user agent; if a user
- agent were to use bitmap fonts then transformations would likely
- make the font look very ugly.</p>
+ <p>The <dfn title="dom-context-2d-clearRect"><code>clearRect(<var
+ title="">x</var>, <var title="">y</var>, <var title="">w</var>, <var
+ title="">h</var>)</code></dfn> method must clear the pixels in the
+ specified rectangle that also intersect the current clipping region
+ to a fully transparent black, erasing any previous image. If either
+ height or width are zero, this method has no effect.</p>
- <p>On getting, the <code title="dom-context-2d-font">font</code>
- attribute must return the <span title="serializing a CSS
- value">serialized form</span> of the current font of the context
- (with no 'line-height' component). <a
- href="#refsCSSOM">[CSSOM]</a></p>
+ <p>The <dfn title="dom-context-2d-fillRect"><code>fillRect(<var
+ title="">x</var>, <var title="">y</var>, <var title="">w</var>, <var
+ title="">h</var>)</code></dfn> method must paint the specified
+ rectangular area using the <code
+ title="dom-context-2d-fillStyle">fillStyle</code>. If either height
+ or width are zero, this method has no effect.</p>
- <div class="example">
+ <p>The <dfn title="dom-context-2d-strokeRect"><code>strokeRect(<var
+ title="">x</var>, <var title="">y</var>, <var title="">w</var>, <var
+ title="">h</var>)</code></dfn> method must stroke the specified
+ rectangle's path using the <code
+ title="dom-context-2d-strokeStyle">strokeStyle</code>, <code
+ title="dom-context-2d-lineWidth">lineWidth</code>, <code
+ title="dom-context-2d-lineJoin">lineJoin</code>, and (if
+ appropriate) <code
+ title="dom-context-2d-miterLimit">miterLimit</code> attributes. If
+ both height and width are zero, this method has no effect, since
+ there is no path to stroke (it's a point). If only one of the two is
+ zero, then the method will draw a line instead (the path for the
+ outline is just a straight line along the non-zero dimension).</p>
- <p>For example, after the following statement:</p>
-
- <pre>context.font = 'italic 400 12px/2 Unknown Font, sans-serif';</pre>
-
- <p>...the expression <code title="">context.font</code> would
- evaluate to the string "<code
- title="">italic 12px "Unknown Font", sans-serif</code>". The
- "400" font-weight doesn't appear because that is the default
- value. The line-height doesn't appear because it is forced to
- "normal", the default value.</p>
-
</div>
- <p>When the object implementing the <code>CanvasText</code>
- interface is created, the font of the context must be set to 10px
- sans-serif. When the 'font-size' component is set to lengths using
- percentages, 'em' or 'ex' units, or the 'larger' or 'smaller'
- keywords, these must be interpreted relative to the computed value
- of the 'font-size' property of the corresponding <code>canvas</code>
- element at the time that the attribute is set. When the
- 'font-weight' component is set to the relative values 'bolder' and
- 'lighter', these must be interpreted relative to the computed value
- of the 'font-weight' property of the corresponding
- <code>canvas</code> element at the time that the attribute is set.
- If the computed values are undefined for a particular case (e.g.
- because the <code>canvas</code> element is not <span>in a
- <code>Document</code></span>), then the relative keywords must be
- interpreted relative to the normal-weight 10px sans-serif
- default.</p> <!-- XXX Path canvas issue again, twice -->
- <p>The <dfn
- title="dom-context-2d-textAlign"><code>textAlign</code></dfn> IDL
- attribute, on getting, must return the current value. On setting, if
- the value is one of <code title="">start</code>, <code
- title="">end</code>, <code title="">left</code>, <code
- title="">right</code>, or <code title="">center</code>, then the
- value must be changed to the new value. Otherwise, the new value
- must be ignored. When the object implementing the
- <code>CanvasText</code> interface is created, the <code
- title="dom-context-2d-textAlign">textAlign</code> attribute must
- initially have the value <code title="">start</code>.</p>
- <p>The <dfn
- title="dom-context-2d-textBaseline"><code>textBaseline</code></dfn>
- IDL attribute, on getting, must return the current value. On
- setting, if the value is one of <code
- title="dom-context-2d-textBaseline-top">top</code>, <code
- title="dom-context-2d-textBaseline-hanging">hanging</code>, <code
- title="dom-context-2d-textBaseline-middle">middle</code>, <code
- title="dom-context-2d-textBaseline-alphabetic">alphabetic</code>,
- <code
- title="dom-context-2d-textBaseline-ideographic">ideographic</code>,
- or <code title="dom-context-2d-textBaseline-bottom">bottom</code>,
- then the value must be changed to the new value. Otherwise, the new
- value must be ignored. When the object implementing the
- <code>CanvasText</code> interface is created, the <code
- title="dom-context-2d-textBaseline">textBaseline</code> attribute
- must initially have the value <code title="">alphabetic</code>.</p>
+ <h6>Drawing text to the canvas</h6>
- </div>
-
- <p>The <code title="dom-context-2d-textBaseline">textBaseline</code>
- attribute's allowed keywords correspond to alignment points in the
- font:</p>
-
- <!-- this is filler to make sure the TCP packet boundary doesn't fall in the middle of one of the NCRs below -->
- <!-- (because otherwise the parser in anolis screws it up) -->
- <p><img src="images/baselines.png" width="738" height="300" alt="The top of the em square is roughly at the top of the glyphs in a font, the hanging baseline is where some glyphs like आ are anchored, the middle is half-way between the top of the em square and the bottom of the em square, the alphabetic baseline is where characters like Á, ÿ, f, and Ω are anchored, the ideographic baseline is where glyphs like 私 and 達 are anchored, and the bottom of the em square is roughly at the bottom of the glyphs in a font. The top and bottom of the bounding box can be far from these baselines, due to glyphs extending far outside the em square."></p>
-
- <p>The keywords map to these alignment points as follows:</p>
-
- <dl>
-
- <dt><dfn title="dom-context-2d-textBaseline-top"><code>top</code></dfn>
- <dd>The top of the em square</dd>
-
- <dt><dfn title="dom-context-2d-textBaseline-hanging"><code>hanging</code></dfn>
- <dd>The hanging baseline</dd>
-
- <dt><dfn title="dom-context-2d-textBaseline-middle"><code>middle</code></dfn>
- <dd>The middle of the em square</dd>
-
- <dt><dfn title="dom-context-2d-textBaseline-alphabetic"><code>alphabetic</code></dfn>
- <dd>The alphabetic baseline</dd>
-
- <dt><dfn title="dom-context-2d-textBaseline-ideographic"><code>ideographic</code></dfn>
- <dd>The ideographic baseline</dd>
-
- <dt><dfn title="dom-context-2d-textBaseline-bottom"><code>bottom</code></dfn>
- <dd>The bottom of the em square</dd>
-
- </dl>
-
- <hr>
-
<dl class="domintro">
<dt><var title="">context</var> . <code title="dom-context-2d-fillText">fillText</code>(<var title="">text</var>, <var title="">x</var>, <var title="">y</var> [, <var title="">maxWidth</var> ] )</dt>
@@ -43451,7 +43109,7 @@
- <h6>Images</h6>
+ <h6>Drawing images to the canvas</h6>
<p>To draw images onto the canvas, the <dfn
title="dom-context-2d-drawImage"><code>drawImage</code></dfn> method
@@ -44044,8 +43702,363 @@
</div>
+
+
+ <h6>Compositing</h6>
+
+ <dl class="domintro">
+
+ <dt><var title="">context</var> . <code title="dom-context-2d-globalAlpha">globalAlpha</code> [ = <var title="">value</var> ]</dt>
+
+ <dd>
+
+ <p>Returns the current alpha value applied to rendering operations.</p>
+
+ <p>Can be set, to change the alpha value. Values outside of the
+ range 0.0 .. 1.0 are ignored.</p>
+
+ </dd>
+
+
+ <dt><var title="">context</var> . <code title="dom-context-2d-globalCompositeOperation">globalCompositeOperation</code> [ = <var title="">value</var> ]</dt>
+
+ <dd>
+
+ <p>Returns the current composition operation, from the list below.</p>
+
+ <p>Can be set, to change the composition operation. Unknown values
+ are ignored.</p>
+
+ </dd>
+
+ </dl>
+
<div class="impl">
+ <p>All drawing operations are affected by the global compositing
+ attributes, <code
+ title="dom-context-2d-globalAlpha">globalAlpha</code> and <code
+ title="dom-context-2d-globalCompositeOperation">globalCompositeOperation</code>.</p>
+
+ <!-- conformance criteria for painting are described in the "drawing
+ model" section below -->
+
+ <p>The <dfn
+ title="dom-context-2d-globalAlpha"><code>globalAlpha</code></dfn>
+ attribute gives an alpha value that is applied to shapes and images
+ before they are composited onto the canvas. The value must be in the
+ range from 0.0 (fully transparent) to 1.0 (no additional
+ transparency). If an attempt is made to set the attribute to a value
+ outside this range, including Infinity and Not-a-Number (NaN)
+ values, the attribute must retain its previous value. When the
+ context is created, the <code
+ title="dom-context-2d-globalAlpha">globalAlpha</code> attribute must
+ initially have the value 1.0.</p>
+
+ <p>The <dfn
+ title="dom-context-2d-globalCompositeOperation"><code>globalCompositeOperation</code></dfn>
+ attribute sets how shapes and images are drawn onto the existing
+ bitmap, once they have had <code
+ title="dom-context-2d-globalAlpha">globalAlpha</code> and the
+ current transformation matrix applied. It must be set to a value
+ from the following list. In the descriptions below, the source
+ image, <var title="">A</var>, is the shape or image being rendered,
+ and the destination image, <var title="">B</var>, is the current
+ state of the bitmap.</p>
+
+ </div>
+
+ <dl>
+
+ <dt><dfn title="gcop-source-atop"><code>source-atop</code></dfn></dt>
+
+ <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.</span></dd>
+
+ <dt><dfn title="gcop-source-in"><code>source-in</code></dfn></dt>
+
+ <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.</span></dd>
+
+ <dt><dfn title="gcop-source-out"><code>source-out</code></dfn></dt>
+
+ <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.</span></dd>
+
+ <dt><dfn title="gcop-source-over"><code>source-over</code></dfn> (default)</dt>
+
+ <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.</span></dd>
+
+
+ <dt><dfn title="gcop-destination-atop"><code>destination-atop</code></dfn></dt>
+
+ <dd><var title="">B</var> atop <var title="">A</var>. <span class="note">Same as <code
+ title="gcop-source-atop">source-atop</code> but using the
+ destination image instead of the source image and vice versa.</span></dd>
+
+ <dt><dfn title="gcop-destination-in"><code>destination-in</code></dfn></dt>
+
+ <dd><var title="">B</var> in <var title="">A</var>. <span class="note">Same as <code
+ title="gcop-source-in">source-in</code> but using the destination
+ image instead of the source image and vice versa.</span></dd>
+
+ <dt><dfn title="gcop-destination-out"><code>destination-out</code></dfn></dt>
+
+ <dd><var title="">B</var> out <var title="">A</var>. <span class="note">Same as <code
+ title="gcop-source-out">source-out</code> but using the destination
+ image instead of the source image and vice versa.</span></dd>
+
+ <dt><dfn title="gcop-destination-over"><code>destination-over</code></dfn></dt>
+
+ <dd><var title="">B</var> over <var title="">A</var>. <span class="note">Same as <code
+ title="gcop-source-over">source-over</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><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 title="gcop-lighter"><code>lighter</code></dfn></dt>
+
+ <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 255 (100%) as a limit.</span></dd>
+
+
+ <dt><dfn title="gcop-copy"><code>copy</code></dfn></dt>
+
+ <dd><var title="">A</var> (<var title="">B</var> is
+ ignored). <span class="note">Display the source image instead of the destination
+ image.</span></dd>
+
+
+ <dt><dfn title="gcop-xor"><code>xor</code></dfn></dt>
+
+ <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>
+
+ <dd class="impl">Vendor-specific extensions to the list of
+ composition operators should use this syntax.</dd>
+
+ </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 <span>drawing model</span>, at which point the
+ <span>clipping region</span> 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>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">globalCompositeOperation</code>
+ unaffected.</p>
+
+ <p>When the context is created, the <code
+ title="dom-context-2d-globalCompositeOperation">globalCompositeOperation</code>
+ attribute must initially have the value
+ <code>source-over</code>.</p>
+
+ </div>
+
+
+
+
+ <h6><dfn>Shadows</dfn></h6>
+
+ <p>All drawing operations are affected by the four global shadow
+ attributes.</p>
+
+ <dl class="domintro">
+
+ <dt><var title="">context</var> . <code title="dom-context-2d-shadowColor">shadowColor</code> [ = <var title="">value</var> ]</dt>
+
+ <dd>
+
+ <p>Returns the current shadow color.</p>
+
+ <p>Can be set, to change the shadow color. Values that cannot be parsed as CSS colors are ignored.</p>
+
+ </dd>
+
+ <dt><var title="">context</var> . <code title="dom-context-2d-shadowOffsetX">shadowOffsetX</code> [ = <var title="">value</var> ]</dt>
+ <dt><var title="">context</var> . <code title="dom-context-2d-shadowOffsetY">shadowOffsetY</code> [ = <var title="">value</var> ]</dt>
+
+ <dd>
+
+ <p>Returns the current shadow offset.</p>
+
+ <p>Can be set, to change the shadow offset. Values that are not finite numbers are ignored.</p>
+
+ </dd>
+
+ <dt><var title="">context</var> . <code title="dom-context-2d-shadowBlur">shadowBlur</code> [ = <var title="">value</var> ]</dt>
+
+ <dd>
+
+ <p>Returns the current level of blur applied to shadows.</p>
+
+ <p>Can be set, to change the blur level. Values that are not finite numbers greater than or equal to zero are ignored.</p>
+
+ </dd>
+
+ </dl>
+
+ <div class="impl">
+
+ <p>The <dfn
+ title="dom-context-2d-shadowColor"><code>shadowColor</code></dfn>
+ attribute sets the color of the shadow.</p>
+
+ <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="serialization of a
+ color">serialization of the color</span> must be returned.</p>
+
+ <p>On setting, the new value must be <span>parsed as a CSS
+ <color> value</span> and the color assigned. If the value
+ cannot be parsed as a CSS <color> value then it must be
+ ignored, and the attribute must retain its previous value. <a
+ href="#refsCSSCOLOR">[CSSCOLOR]</a></p>
+
+ <p>The <dfn
+ title="dom-context-2d-shadowOffsetX"><code>shadowOffsetX</code></dfn>
+ and <dfn
+ 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. They are
+ not affected by the current transformation matrix.</p>
+
+ <p>When the context is created, the shadow offset attributes must
+ 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, except if the
+ value is infinite or NaN, in which case the new value must be
+ ignored.</p>
+
+ <p>The <dfn
+ title="dom-context-2d-shadowBlur"><code>shadowBlur</code></dfn>
+ attribute specifies the level of the blurring effect. (The units do
+ not map to coordinate space units, and are not affected by the
+ current transformation matrix.)</p>
+
+ <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 the attribute must be set to the new value, except if the
+ value is negative, infinite or NaN, in which case the new value must
+ be ignored.</p>
+
+ <p><dfn title="when shadows are drawn">Shadows are only drawn
+ if</dfn> the opacity component of the alpha component of the color
+ of <code title="dom-context-2d-shadowColor">shadowColor</code> is
+ non-zero and either the <code
+ title="dom-context-2d-shadowBlur">shadowBlur</code> is non-zero, or
+ the <code title="dom-context-2d-shadowOffsetX">shadowOffsetX</code>
+ is non-zero, or the <code
+ title="dom-context-2d-shadowOffsetY">shadowOffsetY</code> is
+ non-zero.</p>
+
+ <p class="critical">It is likely that this will change: browser
+ vendors have indicated an interest in changing the processing model
+ for shadows such that they only draw when the composition operator
+ is "source-over" (the default). <a
+ href="http://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2011-May/thread.html#31457">Read
+ more...</a></p>
+
+ <p><span>When shadows are drawn</span>, they must be rendered as follows:</p>
+
+ <ol>
+
+ <li> <p>Let <var title="">A</var> be an infinite transparent black
+ bitmap on which the source image for which a shadow is being
+ created has been rendered.</p> </li>
+
+ <li> <p>Let <var title="">B</var> be an infinite transparent black
+ bitmap, with a coordinate space and an origin identical to <var
+ title="">A</var>.</p> </li>
+
+ <li> <p>Copy the alpha channel of <var title="">A</var> to <var
+ title="">B</var>, offset by <code
+ title="dom-context-2d-shadowOffsetX">shadowOffsetX</code> in the
+ positive <var title="">x</var> direction, and <code
+ title="dom-context-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>Let <var title="">σ</var> be half the value of
+ <code
+ title="dom-context-2d-shadowBlur">shadowBlur</code>.</p></li>
+
+ <li> <p>Perform a 2D Gaussian Blur on <var title="">B</var>,
+ using <var title="">σ</var> as the standard deviation.</p>
+ <!-- wish i could find a reference for this --> </li>
+
+ </ol>
+
+ <p>User agents may limit values of <var title="">σ</var> to
+ an implementation-specific maximum value to avoid exceeding
+ hardware limitations during the Gaussian blur operation.</p>
+
+ </li>
+
+ <li> <p>Set the red, green, and blue components of every pixel in
+ <var title="">B</var> 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 <var
+ title="">B</var> by the alpha component of the color of <code
+ title="dom-context-2d-shadowColor">shadowColor</code>.</p> </li>
+
+ <li> <p>The shadow is in the bitmap <var title="">B</var>, and is
+ rendered as part of the <span>drawing model</span> described below.</p> </li>
+
+ </ol>
+
+ </div>
+
+ <p>If the current composition operation is <code
+ title="gcop-copy">copy</code>, shadows effectively won't render
+ (since the shape will overwrite the shadow).</p>
+
+
+
+ <div class="impl">
+
<h6><dfn>Drawing model</dfn></h6>
<p>When a shape or image is painted, user agents must follow these
More information about the Commit-Watchers
mailing list