[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 &#x0906; 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 &#x00C1;, &#x00FF;, &#x0066;, and &#x03A9; are anchored, the ideographic baseline is where glyphs like &#x79C1; and &#x9054; 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 &#x0906; 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 &#x00C1;, &#x00FF;, &#x0066;, and &#x03A9; are anchored, the ideographic baseline is where glyphs like &#x79C1; and &#x9054; 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