HTML Standard Tracker

Filter

File a bug

SVNBugCommentTime (UTC)
7028[Gecko] [Internet Explorer] [Opera] [Webkit] add dashed lines and change how Path objects work to instead use external line and font styles and transformation objects2012-03-19 22:29
@@ -18,20 +18,21 @@
  interface Blob { }; // File API
  interface File : Blob { }; // File API
  interface FileCallback { }; // File API
  interface FileList { }; // File API
  interface ArrayBuffer { }; // WebGL
  interface Uint8ClampedArray { }; // WebGL
  interface XMLDocument { }; // DOM Core
  interface HTMLCollection { }; // DOM Core
  interface DOMTokenList { }; // DOM Core
  interface DOMSettableTokenList { attribute any value; }; // DOM Core
+ interface SVGMatrix { }; // SVG
 </pre>
 <!--START complete--><!--START dev-html-->
 
    <!-- An advisory for those reading this source. -->
 
    <!-- In this specification, there are a number of comments (like
         this one) that have three consecutive Xs. These indicate known
         problems that are expected to be resolved in the future. -->
 
    <!-- There are also comments with the string "v2", "v3", "v4", or
@@ -3163,22 +3164,37 @@ a.setAttribute('href', 'http://example.com/'); // change the content attribute d
      <li><dfn>the WebSocket connection is closed</dfn> (possibly <i title="">cleanly</i>)
      <li><dfn>the WebSocket connection close code</dfn>
      <li><dfn>the WebSocket connection close reason</dfn>
 
     </ul>
 
     </div><!--data-component-->
 
    </dd>
 
-<!--TOPIC:HTML-->
 <!--START dev-html--><!--START w3c-html-->
+<!--TOPIC:Canvas-->
+
+   <dt>SVG</dt>
+
+   <dd>
+
+    <p>The following interface is defined in the SVG specification: <a
+    href="#refsSVG">[SVG]</a></p>
+
+    <ul class="brief">
+     <li><dfn><code>SVGMatrix</code></dfn>
+    </ul>
+
+   </dd>
+
+<!--TOPIC:HTML-->
 
   </dl>
 
   <p>This specification does not <em>require</em> support of any
   particular network protocol, style sheet language, scripting
   language, or any of the DOM specifications beyond those described
   above. However, the language described by this specification is
   biased towards CSS as the styling language, JavaScript as the
   scripting language, and HTTP as the network protocol, and several
   features assume that those languages and protocols are in use.</p>
@@ -40549,34 +40565,46 @@ dictionary <dfn>TrackEventInit</dfn> : <span>EventInit</span> {
   // state
   void <span title="dom-context-2d-save">save</span>(); // push state on state stack
   void <span title="dom-context-2d-restore">restore</span>(); // pop state stack and restore state
 <!--
   // v7 we've also received requests for:
           attribute boolean <span title="dom-context-2d-forceHighQuality">forceHighQuality</span> // (default false)
   // when enabled, it would prevent the UA from falling back on lower-quality but faster rendering routines
   // useful e.g. for when an image manipulation app uses <canvas> both for UI previews and the actual work
 
 -->
+  // transformations (default transform is the identity matrix)
+  void <span title="dom-context-2d-scale">scale</span>(double x, double y);
+  void <span title="dom-context-2d-rotate">rotate</span>(double angle);
+  void <span title="dom-context-2d-translate">translate</span>(double x, double y);
+  void <span title="dom-context-2d-transform">transform</span>(double a, double b, double c, double d, double e, double f);
+  void <span title="dom-context-2d-setTransform">setTransform</span>(double a, double b, double c, double d, double e, double f);
+<!--
+  // v7 we've also received requests (though not many so far) for:
+  void skew(...);                             // is this common enough that one can't just use setTransform()?
+  void reflect(...);  and  void mirror(...);  // aren't negative values in scale() sufficient for these?
+
+-->
   // compositing
            attribute double <span title="dom-context-2d-globalAlpha">globalAlpha</span>; // (default 1.0)
            attribute DOMString <span title="dom-context-2d-globalCompositeOperation">globalCompositeOperation</span>; // (default source-over)
 <!--
   // v7 we've also received requests for:
   - turning off antialiasing to avoid seams when patterns are painted next to each other
     - might be better to overdraw?
     - might be better to just draw at a higher res then downsample, like for 3d?
   - nested layers
     - the ability to composite an entire set of drawing operations with one shadow all at once
       http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2008-August/015567.html
 
 -->
-  // colors and styles (see also the <span>CanvasLineStyles</span> interface)
+  // colors and styles (see also the <span>CanvasDrawingStyles</span> interface)
            attribute any <span title="dom-context-2d-strokeStyle">strokeStyle</span>; // (default black)
            attribute any <span title="dom-context-2d-fillStyle">fillStyle</span>; // (default black)
   <span>CanvasGradient</span> <span title="dom-context-2d-createLinearGradient">createLinearGradient</span>(double x0, double y0, double x1, double y1);
   <span>CanvasGradient</span> <span title="dom-context-2d-createRadialGradient">createRadialGradient</span>(double x0, double y0, double r0, double x1, double y1, double r1);
   <span>CanvasPattern</span> <span title="dom-context-2d-createPattern">createPattern</span>((<span>HTMLImageElement</span> or <span>HTMLCanvasElement</span> or <span>HTMLVideoElement</span>) image, DOMString repetition);
 
   // shadows
            attribute double <span title="dom-context-2d-shadowOffsetX">shadowOffsetX</span>; // (default 0)
            attribute double <span title="dom-context-2d-shadowOffsetY">shadowOffsetY</span>; // (default 0)
            attribute double <span title="dom-context-2d-shadowBlur">shadowBlur</span>; // (default 0)
@@ -40597,69 +40625,55 @@ dictionary <dfn>TrackEventInit</dfn> : <span>EventInit</span> {
   void <span title="dom-context-2d-drawSystemFocusRing">drawSystemFocusRing</span>(<span>Path</span> path, <span>Element</span> element);
   boolean <span title="dom-context-2d-drawCustomFocusRing">drawCustomFocusRing</span>(<span>Element</span> element);
   boolean <span title="dom-context-2d-drawCustomFocusRing">drawCustomFocusRing</span>(<span>Path</span> path, <span>Element</span> element);
   void <span title="dom-context-2d-scrollPathIntoView">scrollPathIntoView</span>();
   void <span title="dom-context-2d-scrollPathIntoView">scrollPathIntoView</span>(<span>Path</span> path);
   void <span title="dom-context-2d-clip">clip</span>();
   void <span title="dom-context-2d-clip">clip</span>(<span>Path</span> path);
   boolean <span title="dom-context-2d-isPointInPath">isPointInPath</span>(double x, double y);
   boolean <span title="dom-context-2d-isPointInPath">isPointInPath</span>(<span>Path</span> path, double x, double y);
 
-  // text (see also the <span>CanvasText</span> interface)
+  // text (see also the <span>CanvasDrawingStyles</span> interface)
   void <span title="dom-context-2d-fillText">fillText</span>(DOMString text, double x, double y, optional double maxWidth);
   void <span title="dom-context-2d-strokeText">strokeText</span>(DOMString text, double x, double y, optional double maxWidth);<!-- v6DVT
   void <span title="dom-context-2d-fillVerticalText">fillVerticalText</span>(DOMString text, double x, double y, optional double maxHeight);
   void <span title="dom-context-2d-strokeVerticalText">strokeVerticalText</span>(DOMString text, double x, double y, optional double maxHeight); -->
   <span>TextMetrics</span> <span title="dom-context-2d-measureText">measureText</span>(DOMString text);
 
   // drawing images
   void <span title="dom-context-2d-drawImage">drawImage</span>((<span>HTMLImageElement</span> or <span>HTMLCanvasElement</span> or <span>HTMLVideoElement</span>) image, double dx, double dy);
   void <span title="dom-context-2d-drawImage">drawImage</span>((<span>HTMLImageElement</span> or <span>HTMLCanvasElement</span> or <span>HTMLVideoElement</span>) image, double dx, double dy, double dw, double dh);
   void <span title="dom-context-2d-drawImage">drawImage</span>((<span>HTMLImageElement</span> or <span>HTMLCanvasElement</span> or <span>HTMLVideoElement</span>) image, double sx, double sy, double sw, double sh, double dx, double dy, double dw, double dh);
 
   // pixel manipulation
   <span>ImageData</span> <span title="dom-context-2d-createImageData">createImageData</span>(double sw, double sh);
   <span>ImageData</span> <span title="dom-context-2d-createImageData">createImageData</span>(<span>ImageData</span> imagedata);
   <span>ImageData</span> <span title="dom-context-2d-getImageData">getImageData</span>(double sx, double sy, double sw, double sh);
   void <span title="dom-context-2d-putImageData">putImageData</span>(<span>ImageData</span> imagedata, double dx, double dy);
   void <span title="dom-context-2d-putImageData">putImageData</span>(<span>ImageData</span> imagedata, double dx, double dy, double dirtyX, double dirtyY, double dirtyWidth, double dirtyHeight);
 };
-<span>CanvasRenderingContext2D</span> implements <span>CanvasTransformation</span>;
-<span>CanvasRenderingContext2D</span> implements <span>CanvasLineStyles</span>;
+<span>CanvasRenderingContext2D</span> implements <span>CanvasDrawingStyles</span>;
 <span>CanvasRenderingContext2D</span> implements <span>CanvasPathMethods</span>;
-<span>CanvasRenderingContext2D</span> implements <span>CanvasText</span>;
 
 [NoInterfaceObject]
-interface <dfn>CanvasTransformation</dfn> {
-  // transformations (default transform is the identity matrix)
-  void <span title="dom-context-2d-scale">scale</span>(double x, double y);
-  void <span title="dom-context-2d-rotate">rotate</span>(double angle);
-  void <span title="dom-context-2d-translate">translate</span>(double x, double y);
-  void <span title="dom-context-2d-transform">transform</span>(double a, double b, double c, double d, double e, double f);
-  void <span title="dom-context-2d-setTransform">setTransform</span>(double a, double b, double c, double d, double e, double f);
-<!--
-  // v7 we've also received requests (though not many so far) for:
-  void skew(...);                             // is this common enough that one can't just use setTransform()?
-  void reflect(...);  and  void mirror(...);  // aren't negative values in scale() sufficient for these?
--->};
-
-[NoInterfaceObject]
-interface <dfn>CanvasLineStyles</dfn> {
+interface <dfn>CanvasDrawingStyles</dfn> {
   // line caps/joins
            attribute double <span title="dom-context-2d-lineWidth">lineWidth</span>; // (default 1)
            attribute DOMString <span title="dom-context-2d-lineCap">lineCap</span>; // "butt", "round", "square" (default "butt")
            attribute DOMString <span title="dom-context-2d-lineJoin">lineJoin</span>; // "round", "bevel", "miter" (default "miter")
            attribute double <span title="dom-context-2d-miterLimit">miterLimit</span>; // (default 10)
-};
 
-[NoInterfaceObject]
-interface <dfn>CanvasText</dfn> {
+  // dashed lines
+  void <span title="dom-context-2d-setLineDash">setLineDash</span>(sequence&lt;double> segments); // default empty
+  sequence&lt;double> <span title="dom-context-2d-getLineDash">getLineDash</span>();
+           attribute double <span title="dom-context-2d-lineDashOffset">lineDashOffset</span>;
+
   // text
            attribute DOMString <span title="dom-context-2d-font">font</span>; // (default 10px sans-serif)
            attribute DOMString <span title="dom-context-2d-textAlign">textAlign</span>; // "start", "end", "left", "right", "center" (default: "start")
            attribute DOMString <span title="dom-context-2d-textBaseline">textBaseline</span>; // "top", "hanging", "middle", "alphabetic", "ideographic", "bottom" (default: "alphabetic")
 };
 
 [NoInterfaceObject]
 interface <dfn>CanvasPathMethods</dfn> {
   // shared path API methods
   void <span title="dom-context-2d-closePath">closePath</span>();
@@ -40686,34 +40700,35 @@ interface <dfn>CanvasPattern</dfn> {
 interface <dfn>TextMetrics</dfn> {
   readonly attribute double <span title="dom-textmetrics-width">width</span>;
 };
 
 interface <dfn>ImageData</dfn> {
   readonly attribute unsigned long <span title="dom-imagedata-width">width</span>;
   readonly attribute unsigned long <span title="dom-imagedata-height">height</span>;
   readonly attribute <span>Uint8ClampedArray</span> <span title="dom-imagedata-data">data</span>;
 };
 
-[<span title="dom-Path">Constructor</span>(optional <span>Element</span> scope)]
+[<span title="dom-DrawingStyle">Constructor</span>(optional <span>Element</span> scope)]
+interface <dfn>DrawingStyle</dfn> { };
+<span>DrawingStyle</span> implements <span>CanvasDrawingStyles</span>;
+
+[<span title="dom-Path">Constructor</span>,
+ <span title="dom-Path-withdata">Constructor</span>(DOMString d)]
 interface <dfn>Path</dfn> {
-  void <span title="dom-path-addPathData">addPathData</span>(DOMString d);
-  void <span title="dom-path-addFill">addFill</span>(<span>Path</span> path);
-  void <span title="dom-path-addStroke">addStroke</span>(<span>Path</span> path);
-  void <span title="dom-path-addFillText">addFillText</span>(DOMString text, double x, double y, optional double maxWidth);
-  void <span title="dom-path-addStrokeText">addStrokeText</span>(DOMString text, double x, double y, optional double maxWidth);
-  void <span title="dom-path-addFillText">addFillText</span>(DOMString text, <span>Path</span> path, optional double maxWidth);
-  void <span title="dom-path-addStrokeText">addStrokeText</span>(DOMString text, <span>Path</span> path, optional double maxWidth);
+  void <span title="dom-path-addPath">addPath</span>(<span>Path</span> path, <span>SVGMatrix</span>? transformation);
+  void <span title="dom-path-addPathByStrokingPath">addPathByStrokingPath</span>(<span>Path</span> path, <span>CanvasDrawingStyles</span> styles, <span>SVGMatrix</span>? transformation);
+  void <span title="dom-path-addText">addText</span>(DOMString text, <span>CanvasDrawingStyles</span> styles, <span>SVGMatrix</span>? transformation, double x, double y, optional double maxWidth);
+  void <span title="dom-path-addPathByStrokingText">addPathByStrokingText</span>(DOMString text, <span>CanvasDrawingStyles</span> styles, <span>SVGMatrix</span>? transformation, double x, double y, optional double maxWidth);
+  void <span title="dom-path-addText">addText</span>(DOMString text, <span>CanvasDrawingStyles</span> styles, <span>SVGMatrix</span>? transformation, <span>Path</span> path, optional double maxWidth);
+  void <span title="dom-path-addPathByStrokingText">addPathByStrokingText</span>(DOMString text, <span>CanvasDrawingStyles</span> styles, <span>SVGMatrix</span>? transformation, <span>Path</span> path, optional double maxWidth);
 };
-<span>Path</span> implements <span>CanvasTransformation</span>;
-<span>Path</span> implements <span>CanvasLineStyles</span>;
-<span>Path</span> implements <span>CanvasPathMethods</span>;
-<span>Path</span> implements <span>CanvasText</span>;</pre>
+<span>Path</span> implements <span>CanvasPathMethods</span>;</pre>
 
  <!-- ARC-ORDER note (see above):
       some demos rely on the precise order of the arc() and arcTo()
       methods, see https://bugzilla.mozilla.org/show_bug.cgi?id=623437
       for an example, and its duplicates for more -->
 
   <dl class="domintro">
 
    <dt><var title="">context</var> . <code title="dom-context-2d-canvas">canvas</code></dt>
 
@@ -40803,25 +40818,25 @@ interface <dfn>Path</dfn> {
    title="dom-context-2d-shadowOffsetX">shadowOffsetX</code>, <code
    title="dom-context-2d-shadowOffsetY">shadowOffsetY</code>, <code
    title="dom-context-2d-shadowBlur">shadowBlur</code>, <code
    title="dom-context-2d-shadowColor">shadowColor</code>, <code
    title="dom-context-2d-globalCompositeOperation">globalCompositeOperation</code>, <code
    title="dom-context-2d-font">font</code>, <code
    title="dom-context-2d-textAlign">textAlign</code>, <code
    title="dom-context-2d-textBaseline">textBaseline</code>.</li>
   </ul>
 
-  <p class="note">The current default path and the current bitmap are
-  not part of the drawing state. The current default path is
-  persistent, and can only be reset using the <code
-  title="dom-context-2d-beginPath">beginPath()</code> method. The
-  current bitmap is a property of the canvas, not the context.</p>
+  <p class="note">The <span>current default path</span> and the
+  current bitmap are not part of the drawing state. The <span>current
+  default path</span> is persistent, and can only be reset using the
+  <code title="dom-context-2d-beginPath">beginPath()</code> method.
+  The current bitmap is a property of the canvas, not the context.</p>
 
   <dl class="domintro">
 
    <dt><var title="">context</var> . <code title="dom-context-2d-save">save</code>()</dt>
 
    <dd>
 
     <p>Pushes the current state onto the stack.</p>
 
    </dd>
@@ -40862,443 +40877,652 @@ idea from Mihai:
 ...and from Philip:
 > I think a more convenient syntax would be:
 >   var state = ctx.save();
 >   ctx.restore(state);
 > But how would it interact with normal calls to ctx.restore()?
   -->
 
   </div>
 
 
-  <h6><dfn title="dom-context-2d-transformation">Transformations</dfn></h6>
-
-  <p>The transformation matrix is applied to coordinates when creating
-  shapes and paths.</p> <!-- conformance criteria for actual drawing
-  are described in the various sections below -->
-
-  <div class="impl">
-
-  <p>Any object that implements the <code>CanvasTransformation</code>
-  interface has a <i>current transformation matrix</i>. When such an
-  object is created, its transformation matrix must be initialized to
-  the identity transform. It may then be adjusted using the
-  transformation methods described in this section.</p>
-
-  <p>The transformations must be performed in reverse order.</p>
+  <h6><code>DrawingStyle</code> objects</h6>
 
-  <p class="note">For instance, if a scale transformation that doubles
-  the width is applied to the canvas, followed by a rotation
-  transformation that rotates drawing operations by a quarter turn,
-  and a rectangle twice as wide as it is tall is then drawn on the
-  canvas, the actual result will be a square.</p>
-  <!-- q.v. http://goo.gl/5RLrN -->
-
-  </div>
+  <p>All the line styles (line width, caps, joins, and dash patterns)
+  and text styles (fonts) described in the next two sections apply to
+  <code>CanvasRenderingContext2D</code> objects and to
+  <code>DrawingStyle</code> objects. This section defines the
+  constructor used to obtain a <code>DrawingStyle</code> object. This
+  object is then used by methods on <code>Path</code> objects to
+  control how text and paths are rasterised and stroked.</p>
 
   <dl class="domintro">
 
-   <dt><var title="">context</var> . <code title="dom-context-2d-scale">scale</code>(<var title="">x</var>, <var title="">y</var>)</dt>
-   <dt><var title="">path</var> . <code title="dom-context-2d-scale">scale</code>(<var title="">x</var>, <var title="">y</var>)</dt>
+   <dt><var title="">styles</var> = new <code title="dom-DrawingStyle">DrawingStyle</code>([ <var title="">element</var> ])</dt>
 
    <dd>
 
-    <p>Changes the transformation matrix to apply a scaling transformation with the given characteristics.</p>
-
-   </dd>
-
-   <dt><var title="">context</var> . <code title="dom-context-2d-rotate">rotate</code>(<var title="">angle</var>)</dt>
-   <dt><var title="">path</var> . <code title="dom-context-2d-rotate">rotate</code>(<var title="">angle</var>)</dt>
-
-   <dd>
-
-    <p>Changes the transformation matrix to apply a rotation transformation with the given characteristics. The angle is in radians.</p>
-
-   </dd>
-
-   <dt><var title="">context</var> . <code title="dom-context-2d-translate">translate</code>(<var title="">x</var>, <var title="">y</var>)</dt>
-   <dt><var title="">path</var> . <code title="dom-context-2d-translate">translate</code>(<var title="">x</var>, <var title="">y</var>)</dt>
-
-   <dd>
-
-    <p>Changes the transformation matrix to apply a translation transformation with the given characteristics.</p>
-
-   </dd>
-
-   <dt><var title="">context</var> . <code title="dom-context-2d-transform">transform</code>(<var title="">a</var>, <var title="">b</var>, <var title="">c</var>, <var title="">d</var>, <var title="">e</var>, <var title="">f</var>)</dt>
-   <dt><var title="">path</var> . <code title="dom-context-2d-transform">transform</code>(<var title="">a</var>, <var title="">b</var>, <var title="">c</var>, <var title="">d</var>, <var title="">e</var>, <var title="">f</var>)</dt>
-
-   <dd>
-
-    <p>Changes the transformation matrix to apply the matrix given by the arguments as described below.</p>
-
-   </dd>
-
-   <dt><var title="">context</var> . <code title="dom-context-2d-setTransform">setTransform</code>(<var title="">a</var>, <var title="">b</var>, <var title="">c</var>, <var title="">d</var>, <var title="">e</var>, <var title="">f</var>)</dt>
-   <dt><var title="">path</var> . <code title="dom-context-2d-setTransform">setTransform</code>(<var title="">a</var>, <var title="">b</var>, <var title="">c</var>, <var title="">d</var>, <var title="">e</var>, <var title="">f</var>)</dt>
-
-   <dd>
-
-    <p>Changes the transformation matrix <em>to</em> the matrix given by the arguments as described below.</p>
+    <p>Creates a new <code>DrawingStyle</code> object, optionally
+    using a specific element for resolving relative keywords and sizes
+    in font specifications.</p>
 
    </dd>
 
   </dl>
 
   <div class="impl">
 
-  <p>The <dfn title="dom-context-2d-scale"><code>scale(<var
-  title="">x</var>, <var title="">y</var>)</code></dfn> method must
-  add the scaling transformation described by the arguments to the
-  transformation matrix. The <var title="">x</var> argument represents
-  the scale factor in the horizontal direction and the <var
-  title="">y</var> argument represents the scale factor in the
-  vertical direction. The factors are multiples.</p>
-
-  <p>The <dfn title="dom-context-2d-rotate"><code>rotate(<var
-  title="">angle</var>)</code></dfn> method must add the rotation
-  transformation described by the argument to the transformation
-  matrix. The <var title="">angle</var> argument represents a
-  clockwise rotation angle expressed in radians.</p>
-
-  <p>The <dfn title="dom-context-2d-translate"><code>translate(<var
-  title="">x</var>, <var title="">y</var>)</code></dfn> method must
-  add the translation transformation described by the arguments to the
-  transformation matrix. The <var title="">x</var> argument represents
-  the translation distance in the horizontal direction and the <var
-  title="">y</var> argument represents the translation distance in the
-  vertical direction. The arguments are in coordinate space units.</p>
-
-  <p>The <dfn title="dom-context-2d-transform"><code>transform(<var
-  title="">a</var>, <var title="">b</var>, <var title="">c</var>, <var
-  title="">d</var>, <var title="">e</var>, <var
-  title="">f</var>)</code></dfn> method must replace the current
-  transformation matrix with the result of multiplying the current
-  transformation matrix with the matrix described by:</p>
-
-  </div>
-
-  <table class="matrix">
-   <tr>
-    <td><var title="">a</var></td>
-    <td><var title="">c</var></td>
-    <td><var title="">e</var></td>
-   </tr>
-   <tr>
-    <td><var title="">b</var></td>
-    <td><var title="">d</var></td>
-    <td><var title="">f</var></td>
-   </tr>
-   <tr>
-    <td>0</td>
-    <td>0</td>
-    <td>1</td>
-   </tr>
-  </table>
-
-  <p class="note">The arguments <var title="">a</var>, <var
-  title="">b</var>, <var title="">c</var>, <var title="">d</var>, <var
-  title="">e</var>, and <var title="">f</var> are sometimes called
-  <var title="">m11</var>, <var title="">m12</var>, <var
-  title="">m21</var>, <var title="">m22</var>, <var title="">dx</var>,
-  and <var title="">dy</var> or <var title="">m11</var>, <var
-  title="">m21</var>, <var title="">m12</var>, <var
-  title="">m22</var>, <var title="">dx</var>, and <var
-  title="">dy</var>. Care should be taken in particular with the order
-  of the second and third arguments (<var title="">b</var> and <var
-  title="">c</var>) as their order varies from API to API and APIs
-  sometimes use the notation <var title="">m12</var>/<var
-  title="">m21</var> and sometimes <var title="">m21</var>/<var
-  title="">m12</var> for those positions.</p>
-
-  <div class="impl">
+  <p>Each <code>DrawingStyle</code> object has a <dfn>styles scope
+  node</dfn>.</p>
 
   <p>The <dfn
-  title="dom-context-2d-setTransform"><code>setTransform(<var
-  title="">a</var>, <var title="">b</var>, <var
-  title="">c</var>, <var title="">d</var>, <var title="">e</var>,
-  <var title="">f</var>)</code></dfn> method must reset the current
-  transform to the identity matrix, and then invoke the <code><span
-  title="dom-context-2d-transform">transform</span>(<var
-  title="">a</var>, <var title="">b</var>, <var
-  title="">c</var>, <var title="">d</var>, <var title="">e</var>,
-  <var title="">f</var>)</code> method with the same arguments.</p>
+  title="dom-DrawingStyle"><code>DrawingStyle()</code></dfn>
+  constructor, when invoked, must return a newly created
+  <code>DrawingStyle</code> object. If the constructor was passed an
+  argument, then the <code>DrawingStyle</code> object's <span>styles
+  scope node</span> is that element. Otherwise, the object's
+  <span>styles scope node</span> is the <code>Document</code> object
+  of the <span>active document</span> of the <span>browsing
+  context</span> of the <code>Window</code> object on which the
+  interface object of the invoked constructor is found.</p>
 
   </div>
 
 
-
-
   <h6>Line styles</h6>
 
   <dl class="domintro">
 
    <dt><var title="">context</var> . <code title="dom-context-2d-lineWidth">lineWidth</code> [ = <var title="">value</var> ]</dt>
-   <dt><var title="">path</var> . <code title="dom-context-2d-lineWidth">lineWidth</code> [ = <var title="">value</var> ]</dt>
+   <dt><var title="">styles</var> . <code title="dom-context-2d-lineWidth">lineWidth</code> [ = <var title="">value</var> ]</dt>
 
    <dd>
 
     <p>Returns the current line width.</p>
 
     <p>Can be set, to change the line width. Values that are not
     finite values greater than zero are ignored.</p>
 
    </dd>
 
    <dt><var title="">context</var> . <code title="dom-context-2d-lineCap">lineCap</code> [ = <var title="">value</var> ]</dt>
-   <dt><var title="">path</var> . <code title="dom-context-2d-lineCap">lineCap</code> [ = <var title="">value</var> ]</dt>
+   <dt><var title="">styles</var> . <code title="dom-context-2d-lineCap">lineCap</code> [ = <var title="">value</var> ]</dt>
 
    <dd>
 
     <p>Returns the current line cap style.</p>
 
     <p>Can be set, to change the line cap style.</p>
 
     <p>The possible line cap styles are <code>butt</code>,
     <code>round</code>, and <code>square</code>. Other values are
     ignored.</p>
 
    </dd>
 
    <dt><var title="">context</var> . <code title="dom-context-2d-lineJoin">lineJoin</code> [ = <var title="">value</var> ]</dt>
-   <dt><var title="">path</var> . <code title="dom-context-2d-lineJoin">lineJoin</code> [ = <var title="">value</var> ]</dt>
+   <dt><var title="">styles</var> . <code title="dom-context-2d-lineJoin">lineJoin</code> [ = <var title="">value</var> ]</dt>
 
    <dd>
 
     <p>Returns the current line join style.</p>
 
     <p>Can be set, to change the line join style.</p>
 
     <p>The possible line join styles are <code>bevel</code>,
     <code>round</code>, and <code>miter</code>. Other values are
     ignored.</p>
 
    </dd>
 
    <dt><var title="">context</var> . <code title="dom-context-2d-miterLimit">miterLimit</code> [ = <var title="">value</var> ]</dt>
-   <dt><var title="">path</var> . <code title="dom-context-2d-miterLimit">miterLimit</code> [ = <var title="">value</var> ]</dt>
+   <dt><var title="">styles</var> . <code title="dom-context-2d-miterLimit">miterLimit</code> [ = <var title="">value</var> ]</dt>
 
    <dd>
 
     <p>Returns the current miter limit ratio.</p>
 
     <p>Can be set, to change the miter limit ratio. Values that are
     not finite values greater than zero are ignored.</p>
 
    </dd>
 
+
+   <dt><var title="">context</var> . <code title="dom-context-2d-setLineDash">setLineDash</code>(<var title="">segments</var>)</dt>
+   <dt><var title="">styles</var> . <code title="dom-context-2d-setLineDash">setLineDash</code>(<var title="">segments</var>)</dt>
+
+   <dd>
+
+    <p>Sets the current line dash pattern (as used when stroking). The
+    argument is an array of distances for which to alternately have
+    the line on and the line off.</p>
+
+   </dd>
+
+
+   <dt><var title="">segments</var> = <var title="">context</var> . <code title="dom-context-2d-getLineDash">getLineDash</code>()</dt>
+   <dt><var title="">segments</var> = <var title="">styles</var> . <code title="dom-context-2d-getLineDash">getLineDash</code>()</dt>
+
+   <dd>
+
+    <p>Returns a copy of the current line dash pattern. The array
+    returned will always have an even number of entries (i.e. the
+    pattern is normalized).</p>
+
+   </dd>
+
+
+   <dt><var title="">context</var> . <code title="dom-context-2d-lineDashOffset">lineDashOffset</code></dt>
+   <dt><var title="">styles</var> . <code title="dom-context-2d-lineDashOffset">lineDashOffset</code></dt>
+
+   <dd>
+
+    <p>Returns the phase offset (in the same units as the line dash pattern).</p>
+
+    <p>Can be set, to change the phase offset. Values that are not
+    finite values are ignored.</p>
+
+   </dd>
+
   </dl>
 
   <div class="impl">
 
-  <p>Objects that implement the <code>CanvasLineStyles</code>
-  interface have attributes (defined in this section) that control how
-  lines are treated by the object.</p>
+  <p>Objects that implement the <code>CanvasDrawingStyles</code>
+  interface have attributes and methods (defined in this section) that
+  control how lines are treated by the object.</p>
 
   <p>The <dfn
   title="dom-context-2d-lineWidth"><code>lineWidth</code></dfn>
   attribute gives the width of lines, in coordinate space units. On
   getting, it must return the current value. On setting, zero,
   negative, infinite, and NaN values must be ignored, leaving the
   value unchanged; other values must change the current value to the
   new value.</p>
 
-  <p>When the object implementing the <code>CanvasLineStyles</code>
+  <p>When the object implementing the <code>CanvasDrawingStyles</code>
   interface is created, the <code
   title="dom-context-2d-lineWidth">lineWidth</code> attribute must
   initially have the value <code>1.0</code>.</p>
 
   <hr>
 
   <p>The <dfn
   title="dom-context-2d-lineCap"><code>lineCap</code></dfn> attribute
-  defines the type of endings that UAs will place on the end of
-  lines. The three valid values are <code>butt</code>,
-  <code>round</code>, and <code>square</code>. The <code>butt</code>
-  value means that the end of each line has a flat edge perpendicular
-  to the direction of the line (and that no additional line cap is
-  added). The <code>round</code> value means that a semi-circle with
-  the diameter equal to the width of the line must then be added on to
-  the end of the line. The <code>square</code> value means that a
-  rectangle with the length of the line width and the width of half
-  the line width, placed flat against the edge perpendicular to the
-  direction of the line, must be added at the end of each line.</p>
+  defines the type of endings that UAs will place on the end of lines.
+  The three valid values are <code>butt</code>, <code>round</code>,
+  and <code>square</code>.</p>
 
   <p>On getting, it must return the current value. On setting, if the
   new value is one of the literal strings <code>butt</code>,
   <code>round</code>, and <code>square</code>, then the current value
   must be changed to the new value; other values must ignored, leaving
   the value unchanged.</p>
 
-  <p>When the object implementing the <code>CanvasLineStyles</code>
+  <p>When the object implementing the <code>CanvasDrawingStyles</code>
   interface is created, the <code
   title="dom-context-2d-lineCap">lineCap</code> attribute must
   initially have the value <code>butt</code>.</p>
 
   <hr>
 
   <p>The <dfn
   title="dom-context-2d-lineJoin"><code>lineJoin</code></dfn>
   attribute defines the type of corners that UAs will place where two
   lines meet. The three valid values are <code>bevel</code>,
   <code>round</code>, and <code>miter</code>.</p>
 
   <p>On getting, it must return the current value. On setting, if the
   new value is one of the literal strings <code>bevel</code>,
   <code>round</code>, and <code>miter</code>, then the current value
   must be changed to the new value; other values must be ignored,
   leaving the value unchanged.</p>
 
-  <p>When the object implementing the <code>CanvasLineStyles</code>
+  <p>When the object implementing the <code>CanvasDrawingStyles</code>
   interface is created, the <code
   title="dom-context-2d-lineJoin">lineJoin</code> attribute must
   initially have the value <code>miter</code>.</p>
 
   <hr>
 
-  <p>A join exists at any point in a subpath shared by two consecutive
-  lines. When a subpath is closed, then a join also exists at its
-  first point (equivalent to its last point) connecting the first and
-  last lines in the subpath.</p>
-
-  <p>In addition to the point where the join occurs, two additional
-  points are relevant to each join, one for each line: the two corners
-  found half the line width away from the join point, one
-  perpendicular to each line, each on the side furthest from the other
-  line.</p>
-
-  <p>A filled triangle connecting these two opposite corners with a
-  straight line, with the third point of the triangle being the join
-  point, must be added at all joins. The <code
-  title="dom-context-2d-lineJoin">lineJoin</code> attribute controls
-  whether anything else is rendered. The three aforementioned values
-  have the following meanings:</p>
-
-  <p>The <code>bevel</code> value means that this is all that is
-  rendered at joins.</p>
-
-  <p>The <code>round</code> value means that a filled arc connecting
-  the two aforementioned corners of the join, abutting (and not
-  overlapping) the aforementioned triangle, with the diameter equal to
-  the line width and the origin at the point of the join, must be
-  added at joins.</p>
-
-  <p>The <code>miter</code> value means that a second filled triangle
-  must (if it can given the miter length) be added at the join,
-  with one line being the line between the two aforementioned corners,
-  abutting the first triangle, and the other two being continuations of
-  the outside edges of the two joining lines, as long as required to
-  intersect without going over the miter length.</p>
-
-  <p>The miter length is the distance from the point where the join
-  occurs to the intersection of the line edges on the outside of the
-  join. The miter limit ratio is the maximum allowed ratio of the
-  miter length to half the line width. If the miter length would cause
-  the miter limit ratio to be exceeded, this second triangle must not
-  be added.</p>
-
-  <p>The miter limit ratio can be explicitly set using the <dfn
+  <p>When the <code title="dom-context-2d-lineJoin">lineJoin</code>
+  attribute has the value <code>miter</code>, strokes use the miter
+  limit ratio to decide how to render joins. The miter limit ratio can
+  be explicitly set using the <dfn
   title="dom-context-2d-miterLimit"><code>miterLimit</code></dfn>
   attribute. On getting, it must return the current value. On setting,
   zero, negative, infinite, and NaN values must be ignored, leaving
   the value unchanged; other values must change the current value to
   the new value.</p>
 
-  <p>When the object implementing the <code>CanvasLineStyles</code>
+  <p>When the object implementing the <code>CanvasDrawingStyles</code>
   interface is created, the <code
   title="dom-context-2d-miterLimit">miterLimit</code> attribute must
   initially have the value <code>10.0</code>.</p>
 
-  <!--
-v5: dashed lines have been requested. Philip Taylor provides these
-notes on what would need to be defined for dashed lines:
-> I don't think it's entirely trivial to add, to the detail that's
-> necessary in a specification. The common graphics APIs (at least
-> Cairo, Quartz and java.awt.Graphics, and any SVG implementation) all
-> have dashes specified by passing an array of dash lengths (alternating
-> on/off), so that should be alright as long as you define what units
-> it's measured in and what happens when you specify an odd number of
-> values and how errors are handled and what happens if you update the
-> array later. But after that, what does it do when stroking multiple
-> subpaths, in terms of offsetting the dashes? When you use strokeRect,
-> where is offset 0? Does moveTo reset the offset? How does it interact
-> with lineCap/lineJoin? All the potential issues need test cases too,
-> and the implementations need to make sure they handle any edge cases
-> that the underlying graphics library does differently. (SVG Tiny 1.2
-> appears to skip some of the problems by leaving things undefined and
-> allowing whatever behavior the graphics library has.)
--->
+  <hr>
+
+  <p>Each <code>CanvasDrawingStyles</code> object has a <dfn>dash
+  list</dfn>, which is either empty or consists of an even number of
+  positive non-zero numbers. Initially, the <span>dash list</span>
+  must be empty.</p>
+
+  <p>When the <dfn
+  title="dom-context-2d-setLineDash"><code>setLineDash()</code></dfn>
+  method is invoked, it must run the following steps:</p>
+
+  <ol>
+
+   <li><p>Let <var title="">a</var> be a copy of the array provided as
+   the argument.</p></li>
+
+   <li><p>If any value in the array is not finite (e.g. an Infinity or
+   a NaN value), or if any value is negative (less than zero), then
+   abort these steps.</p></li>
+
+   <li><p>If the number of elements in <var title="">a</var> is odd,
+   then let <var title="">a</var> be the concatentation of two copies
+   of <var title="">a</var>.</p></li>
+
+   <li><p>Let the object's <span>dash list</span> be <var
+   title="">a</var>.</p></li>
+
+  </ol>
+
+  <p>When the <dfn
+  title="dom-context-2d-getLineDash"><code>getLineDash()</code></dfn>
+  method is invoked, it must return a newly created array whose values
+  are the values of the object's <span>dash list</span>, in the same
+  order.</p>
+
+  <p>It is sometimes useful to change the "phase" of the dash pattern,
+  e.g. to achieve a "marching ants" effect. The phase can be set using
+  the <dfn
+  title="dom-context-2d-lineDashOffset"><code>lineDashOffset</code></dfn>
+  attribute. On getting, it must return the current value. On setting,
+  infinite and NaN values must be ignored, leaving the value
+  unchanged; other values must change the current value to the new
+  value.</p>
+
+  <p>When the object implementing the <code>CanvasDrawingStyles</code>
+  interface is created, the <code
+  title="dom-context-2d-lineDashOffset">lineDashOffset</code>
+  attribute must initially have the value <code>0.0</code>.</p>
+
+  <hr>
+
+  <p>When a user agent is to <dfn>trace a <span>path</span></dfn>,
+  given an object <var title="">style</var> that implements the
+  <code>CanvasDrawingStyles</code> interface, it must run the following
+  algorith. This algorithm returns a new <span>path</span>.</p>
+
+  <ol>
+
+   <li><p>Let <var title="">path</var> be a copy of the path being
+   traced.</p></li>
+
+   <li><p>Remove from <var title="">path</var> any subpaths containing
+   no lines (i.e. empty subpaths with zero points, and subpaths with
+   just one point).</p></li>
+
+   <li><p>Replace each point in each subpath of <var
+   title="">path</var> other than the first point and the last point
+   of each subpath by a <i>join</i> that joins the line leading to
+   that point to the line leading out of that point, such that the
+   subpaths all consist of two points (a starting point with a line
+   leading out of it, and an ending point with a line leading into
+   it), one or more lines (connecting the points and the joins), and
+   zero or more joins (each connecting one line to another), connected
+   together such that each subpath is a series of one or more lines
+   with a join between each one and a point on each end.</p></li>
+
+   <li><p>Add a straight closing line to each closed subpath in <var
+   title="">path</var> connecting the last point and the first point
+   of that subpath; change the last point to a join (from the
+   previously last line to the newly added closing line), and change
+   the first point to a join (from the newly added closing line to the
+   first line).</p>
+
+   <li><p>If the <var title="">styles</var> <span>dash list</span> is
+   empty, jump to the step labeled <i>joins</i>.</p></li>
+
+   <li><p>Let <var title="">width</var> be the aggregate length of all
+   the lines of all the subpaths in <var title="">path</var>, in
+   coordinate space units.</p></li>
+
+   <li><p>Let <var title="">offset</var> be the value of the <var
+   title="">styles</var> <code
+   title="dom-context-2d-lineDashOffset">lineDashOffset</code>, in
+   coordinate space units.</p></li>
+
+   <li>
+
+    <p>While <var title="">offset</var> is greater than <var
+    title="">width</var>, decrement it by <var
+    title="">width</var>.</p>
+
+    <p>While <var title="">offset</var> is less than <var
+    title="">width</var>, increment it by <var
+    title="">width</var>.</p>
+
+   </li>
+
+   <li><p><i>Offset subpath</i>: If <var title="">offset</var> is
+   non-zero, add a new subpath at the start of <var
+   title="">path</var> consisting of two points connected by a line
+   whose length is <var title="">offset</var> coordinate space units.
+   (This path is temporary and will be removed in the <i>joins</i>
+   step below. Its purpose is to offset the dash pattern.)</p>
+
+   <li><p>Define <var title="">L</var> to be a linear coordinate line
+   defined along all lines in all the subpaths in <var
+   title="">path</var>, such that the start of the first line in the
+   first subpath is defined as coordinate 0, and the end of the last
+   line in the last subpath is defined as coordinate <var
+   title="">width</var>.</p></li>
+
+   <li><p>Let <var title="">position</var> be 0.</p></li>
+
+   <li><p>Let <var title="">index</var> be 0.</p></li>
+
+   <li><p>Let <var title="">current state</var> be <i>off</i> (the
+   other states being <i>on</i> and <i>zero-on</i>).</p></li>
+
+   <li><p><i>Dash On</i>: Let <var title="">segment length</var> be
+   the value of the <var title="">styles</var> <span>dash
+   list</span>'s <var title="">index</var>th entry.</p></li>
+
+   <li><p>Increment <var title="">position</var> by <var
+   title="">segment length</var>.</p></li>
+
+   <li><p>If <var title="">position</var> is greater than <var
+   title="">width</var>, then jump to the step labeled
+   <i>joins</i>.</p></li>
+
+   <li><p>If <var title="">segment length</var> is non-zero, let <var
+   title="">current state</var> be <i>on</i>.</p></li>
+
+   <li><p>Increment <var title="">index</var> by one.</p></li>
+
+   <li><p><i>Dash Off</i>: Let <var title="">segment length</var> be
+   the value of the <var title="">styles</var> <span>dash
+   list</span>'s <var title="">index</var>th entry.</p></li>
+
+   <li><p>Let <var title="">start</var> be the offset <var
+   title="">position</var> on <var title="">L</var>.</p></li>
+
+   <li><p>Increment <var title="">position</var> by <var
+   title="">segment length</var>.</p></li>
+
+   <li><p>If <var title="">position</var> is greater than <var
+   title="">width</var>, then let <var title="">end</var> be the
+   offset <var title="">width</var> on <var title="">L</var>.
+   Otherwise, let <var title="">end</var> be the offset <var
+   title="">position</var> on <var title="">L</var>.</p></li>
+
+   <li>
+
+    <p>Jump to the first appropriate step:</p>
+
+    <dl class="switch">
+
+     <dt>If <var title="">segment length</var> is zero and <var title="">current state</var> is <i>off</i></dt>
+
+     <dd>
+
+      <p>Do nothing, just continue to the next step.</p>
+
+     </dd>
+
+
+     <dt>If <var title="">current state</var> is <i>off</i></dt>
+
+     <dd>
+
+      <p>Cut the line on which <var title="">end</var> finds itself
+      short at <var title="">end</var> and place a point there,
+      cutting the subpath that it was in in two; remove all line
+      segments, joins, points, and subpaths that are between <var
+      title="">start</var> and <var title="">end</var>; and finally
+      place a single point at <var title="">start</var> with no lines
+      connecting to it.</p>
+
+      <p>The point has a <i>directionality</i> for the purposes of
+      drawing line caps (see below). The directionality is the
+      direction that the original line had at that point (i.e. when
+      <var title="">L</var> was defined above).</p>
+
+     </dd>
+
+
+     <dt>Otherwise</dt>
+
+     <dd>
+
+      <p>Cut the line on which <var title="">start</var> finds itself
+      into two at <var title="">start</var> and place a point there,
+      cutting the subpath that it was in in two, and similarly cut the
+      line on which <var title="">end</var> finds itself short at <var
+      title="">end</var> and place a point there, cutting the subpath
+      that <em>it</em> was in in two, and then remove all line segments,
+      joins, points, and subpaths that are between <var
+      title="">start</var> and <var title="">end</var>.</p>
+
+      <p>If <var title="">start</var> and <var title="">end</var> are
+      the same point, then this results in just the line being cut in
+      two and two points being inserted there, with nothing being
+      removed, unless a join also happens to be at that point, in which
+      case the join must be removed.</p>
+
+     </dd>
+
+    </dl>
+
+   </li>
+
+   <li><p>If <var title="">position</var> is greater than <var
+   title="">width</var>, then jump to the step labeld
+   <i>joins</i>.</p></li>
+
+   <li><p>If <var title="">segment length</var> is greater than zero,
+   let <var title="">positioned-at-on-dash</var> be false.</p></li>
+
+   <li><p>Increment <var title="">index</var> by one. If it is equal
+   to the number of entries in the <var title="">styles</var>
+   <span>dash list</span>, then let <var title="">index</var> be
+   0.</p></li>
+
+   <li><p>Return to the step labeled <i>dash on</i>.</p></li>
+
+   <li><p><i>Joins</i>: Remove from <var title="">path</var> any
+   subpath that originally formed part of the subpath added in the
+   <i>offset subpath</i> step above.</p></li>
+
+   <li>
+
+    <p>Create a new <span>path</span> that describes the result of
+    inflating the paths in <var title="">path</var> perpendicular to
+    the direction of the path to the <var title="">styles</var> <code
+    title="dom-context-2d-lineWidth">lineWidth</code> width, replacing
+    each point with the end cap necessary to satisfy the <var
+    title="">styles</var> <code
+    title="dom-context-2d-lineCap">lineCap</code> attribute as
+    described previously and elaborated below, and replacing each join
+    with the join necessary to satisfy the <var title="">styles</var>
+    <code title="dom-context-2d-lineJoin">lineJoin</code> type, as
+    defined below.</p>
+
+    <p><strong>Caps</strong>: Each point has a flat edge perpendicular
+    to the direction of the line coming out of it. This is them
+    augmented according to the value of the <var title="">styles</var>
+    <code title="dom-context-2d-lineCap">lineCap</code>. The
+    <code>butt</code> value means that no additional line cap is
+    added. The <code>round</code> value means that a semi-circle with
+    the diameter equal to the <var title="">styles</var> <code
+    title="dom-context-2d-lineWidth">lineWidth</code> width must
+    additionally be placed on to the line coming out of each point.
+    The <code>square</code> value means that a rectangle with the
+    length of the <var title="">styles</var> <code
+    title="dom-context-2d-lineWidth">lineWidth</code> width and the
+    width of half the <var title="">styles</var> <code
+    title="dom-context-2d-lineWidth">lineWidth</code> width, placed
+    flat against the edge perpendicular to the direction of the line
+    coming out of the point, must be added at each point.</p>
+
+    <p>Points with no lines coming out of them must have two caps
+    placed back-to-back as if it was really two points connected to
+    each other by an infinitesimally short straight line in the
+    direction of the point's <i>directionality</i> (as defined
+    above).</p>
+
+    <p><strong>Joins</strong>: In addition to the point where a join
+    occurs, two additional points are relevant to each join, one for
+    each line: the two corners found half the line width away from the
+    join point, one perpendicular to each line, each on the side
+    furthest from the other line.</p>
+
+    <p>A filled triangle connecting these two opposite corners with a
+    straight line, with the third point of the triangle being the join
+    point, must be added at all joins. The <code
+    title="dom-context-2d-lineJoin">lineJoin</code> attribute controls
+    whether anything else is rendered. The three aforementioned values
+    have the following meanings:</p>
+
+    <p>The <code>bevel</code> value means that this is all that is
+    rendered at joins.</p>
+
+    <p>The <code>round</code> value means that a filled arc connecting
+    the two aforementioned corners of the join, abutting (and not
+    overlapping) the aforementioned triangle, with the diameter equal
+    to the line width and the origin at the point of the join, must be
+    added at joins.</p>
+
+    <p>The <code>miter</code> value means that a second filled
+    triangle must (if it can given the miter length) be added at the
+    join, with one line being the line between the two aforementioned
+    corners, abutting the first triangle, and the other two being
+    continuations of the outside edges of the two joining lines, as
+    long as required to intersect without going over the miter
+    length.</p>
+
+    <p>The miter length is the distance from the point where the join
+    occurs to the intersection of the line edges on the outside of the
+    join. The miter limit ratio is the maximum allowed ratio of the
+    miter length to half the line width. If the miter length would
+    cause the miter limit ratio (as set by the <var
+    title="">style</var> <code
+    title="dom-context-2d-miterLimit">miterLimit</code> attribute) to
+    be exceeded, this second triangle must not be added.</p>
+
+    <p>Subpaths in the newly created path must wind clockwise,
+    regardless of the direction of paths in <var
+    title="">path</var>.</p>
+    <!--
+     ...because both of these examples result in two lines (assuming
+     non-zero winding rules, things are different under even/odd),
+     there's no "hole" where the lines overlap:
+
+            c.beginPath();
+            c.lineWidth=30;
+            c.moveTo(200,200); // subpath 1
+            c.lineTo(400,200);
+            c.moveTo(400,210); // subpath 2
+            c.lineTo(200,190);
+            c.stroke();
+
+            c.beginPath();
+            c.lineWidth=30;
+            c.moveTo(200,200); // subpath 1
+            c.lineTo(400,200);
+            c.lineTo(300,300);
+            c.closePath();
+            c.moveTo(400,210); // subpath 2
+            c.lineTo(200,190);
+            c.lineTo(300,300);
+            c.closePath();
+            c.stroke();
+
+     ...and we want the same result when you create the two subpaths
+     in each example above as two Paths, stroke them onto a third
+     Path, and then fill that Path on the context.
+    -->
+
+   </li>
+
+   <li><p>Return the newly created path.</p></li>
+
+  </ol>
 
 <!--v6: Another request has been for hairline width lines, that remain
 hairline width with transform. ack Shaun Morris.  -->
 
   </div>
 
 
   <h6>Text styles</h6>
 
   <dl class="domintro">
 
    <dt><var title="">context</var> . <code title="dom-context-2d-font">font</code> [ = <var title="">value</var> ]</dt>
-   <dt><var title="">path</var> . <code title="dom-context-2d-font">font</code> [ = <var title="">value</var> ]</dt>
+   <dt><var title="">styles</var> . <code title="dom-context-2d-font">font</code> [ = <var title="">value</var> ]</dt>
 
    <dd>
 
     <p>Returns the current font settings.</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-textAlign">textAlign</code> [ = <var title="">value</var> ]</dt>
-   <dt><var title="">path</var> . <code title="dom-context-2d-textAlign">textAlign</code> [ = <var title="">value</var> ]</dt>
+   <dt><var title="">styles</var> . <code title="dom-context-2d-textAlign">textAlign</code> [ = <var title="">value</var> ]</dt>
 
    <dd>
 
     <p>Returns the current text alignment settings.</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="">path</var> . <code title="dom-context-2d-textBaseline">textBaseline</code> [ = <var title="">value</var> ]</dt>
+   <dt><var title="">styles</var> . <code title="dom-context-2d-textBaseline">textBaseline</code> [ = <var title="">value</var> ]</dt>
 
    <dd>
 
     <p>Returns the current baseline alignment settings.</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>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. Such objects also have a
-  <dfn>font style source node</dfn>. For
+  <p>Objects that implement the <code>CanvasDrawingStyles</code>
+  interface have attributes (defined in this section) that control how
+  text is laid out (rasterized or outlined) by the object. Such
+  objects also have a <dfn>font style source node</dfn>. For
   <code>CanvasRenderingContext2D</code> objects, this is the
-  <code>canvas</code> element. For <code>Path</code> objects, it's the
-  <span>path scope node</span>.</p>
+  <code>canvas</code> element. For <code>DrawingStyle</code> objects,
+  it's the <span>styles scope node</span>.</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
@@ -41334,21 +41558,21 @@ hairline width with transform. ack Shaun Morris.  -->
 
    <p>...the expression <code title="">context.font</code> would
    evaluate to the string "<code
    title="">italic&nbsp;12px&nbsp;&quot;Unknown&nbsp;Font&quot;,&nbsp;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>
+  <p>When the object implementing the <code>CanvasDrawingStyles</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 <span>font style source
   node</span> at the time that the attribute is set, if that is an
   element. When the 'font-weight' component is set to the relative
   values 'bolder' and 'lighter', these must be interpreted relative to
@@ -41362,38 +41586,38 @@ hairline width with transform. ack Shaun Morris.  -->
   default.</p>
 
   <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
+  <code>CanvasDrawingStyles</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
+  <code>CanvasDrawingStyles</code> interface is created, the <code
   title="dom-context-2d-textBaseline">textBaseline</code> attribute
   must initially have the value <code title="">alphabetic</code>.</p>
 
   </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 -->
@@ -41419,25 +41643,25 @@ hairline width with transform. ack Shaun Morris.  -->
    <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>
 
   <p>The <dfn>text preparation algorithm</dfn> is as follows. It takes
   as input a string <var title="">text</var>, a
-  <code>CanvasText</code> object <var title="">target</var>, and an
-  optional length <var title="">maxWidth</var>. It returns an array of
-  glyph shapes, each positioned on a common coordinate space, and a
-  <var title="">physical alignment</var> whose value is one of
-  <i>left</i>, <i>right</i>, and <i>center</i>. (Most callers of this
+  <code>CanvasDrawingStyles</code> object <var title="">target</var>,
+  and an optional length <var title="">maxWidth</var>. It returns an
+  array of glyph shapes, each positioned on a common coordinate space,
+  and a <var title="">physical alignment</var> whose value is one of
+  <i>left</i>, <i>right</i>, and <i title="">center</i>. (Most callers of this
   algorithm ignore the <var title="">physical alignment</var>.)</p>
 
   <ol>
 
    <li><p>If <var title="">maxWidth</var> was provided but is less
    than or equal to zero, return an empty array.</p></li>
 
    <li><p>Replace all the <span title="space character">space
    characters</span> in <var title="">text</var> with U+0020 SPACE
    characters.</p></li>
@@ -41495,21 +41719,21 @@ hairline width with transform. ack Shaun Morris.  -->
    is greater than <var title="">maxWidth</var> CSS pixels, then
    change <var title="">font</var> to have a more condensed font (if
    one is available or if a reasonably readable one can be synthesized
    by applying a horizontal scale factor to the font) or a smaller
    font, and return to the previous step.</p></li>
 
    <li>
 
     <p>The <var title="">anchor point</var> is a point on the inline
     box, and the <var title="">physical alignment</var> is one of the
-    values <i>left</i>, <i>right</i>, and <i>center</i>. These
+    values <i>left</i>, <i>right</i>, and <i title="">center</i>. These
     variables are determined by the <code
     title="dom-context-2d-textAlign">textAlign</code> and <code
     title="dom-context-2d-textBaseline">textBaseline</code> values as
     follows:</p>
 
     <p>Horizontal position:</p>
 
     <dl>
 
      <dt>If <code title="dom-context-2d-textAlign">textAlign</code> is
@@ -41543,21 +41767,21 @@ hairline width with transform. ack Shaun Morris.  -->
      position be the right edge of the inline box, and let <var
      title="">physical alignment</var> be <i>right</i>.</dd>
 
 
      <dt>If <code title="dom-context-2d-textAlign">textAlign</code> is
      <code title="">center</code></dt>
 
      <dd>Let the <var title="">anchor point</var>'s horizontal
      position be half way between the left and right edges of the
      inline box, and let <var title="">physical alignment</var> be
-     <i>center</i>.</dd>
+     <i title="">center</i>.</dd>
 
     </dl>
 
     <p>Vertical position:</p>
 
     <dl>
 
      <dt>If <code
      title="dom-context-2d-textBaseline">textBaseline</code> is <code
      title="dom-context-2d-textBaseline-top">top</code></dt>
@@ -41904,33 +42128,25 @@ try {
    </dd>
 
   </dl>
 
   <div class="impl">
 
   <p>The following methods allow authors to manipulate the <span
   title="concept-path">paths</span> of objects implementing the
   <code>CanvasPathMethods</code> interface.</p>
 
-  <p>The points and lines added to an object's <span
-  title="concept-path">path</span> by these methods must be
-  transformed according to the <span
-  title="dom-context-2d-transformation">current transformation
-  matrix</span> of the object implementing the
-  <code>CanvasPathMethods</code> interface before they are added to
-  the path.</p>
-
-  <p class="note">All objects implementing the
-  <code>CanvasPathMethods</code> interface also implement the
-  <code>CanvasTransformation</code> interface, and thus have a <span
+  <p>For <code>CanvasRenderingContext2D</code> objects, the points and
+  lines added to <span>current default path</span> by these methods
+  must be transformed according to the <span
   title="dom-context-2d-transformation">current transformation
-  matrix</span>.</p>
+  matrix</span> before they are added to the path.</p>
 
 
   <p>The <dfn title="dom-context-2d-moveTo"><code>moveTo(<var
   title="">x</var>, <var title="">y</var>)</code></dfn> method must
   create a new subpath with the specified point as its first (and
   only) point.</p>
 
   <p>When the user agent is to <dfn>ensure there is a subpath</dfn>
   for a coordinate (<var title="">x</var>, <var title="">y</var>) on a
   <span title="concept-path">path</span>, the user agent must check to
@@ -42152,296 +42368,257 @@ try {
   <h6><code>Path</code> objects</h6>
 
   <p><code>Path</code> objects can be used to declare paths that are
   then later used on <code>CanvasRenderingContext2D</code> objects. In
   addition to many of the APIs described in earlier sections,
   <code>Path</code> objects have methods to combine paths, and to add
   text to paths.</p>
 
   <dl class="domintro">
 
-   <dt><var title="">path</var> = new <code title="dom-path">Path</code>([ <var title="">element</var> ])</dt>
+   <dt><var title="">path</var> = new <code title="dom-Path">Path</code>()</dt>
 
    <dd>
 
-    <p>Creates a new <code>Path</code> object, optionally using a specific element for resolving relative keywords and sizes in font specifications.</p>
+    <p>Creates a new empty <code>Path</code> object.</p>
 
    </dd>
 
-   <dt><var title="">path</var> . <code title="dom-path-addPathData">addPathData</code>(<var title="">d</var>)</dt>
+   <dt><var title="">path</var> = new <code title="dom-Path-withdata">Path</code>(<var title="">d</var>)</dt>
 
    <dd>
 
-    <p>Adds to the path the path described by the argument, interpreted as SVG path data. <a href="#refsSVG">[SVG]</a></p>
+    <p>Creates a new path with the path described by the argument, interpreted as SVG path data. <a href="#refsSVG">[SVG]</a></p>
 
    </dd>
 
-   <dt><var title="">path</var> . <code title="dom-path-addFill">addFill</code>(<var title="">path</var>)</dt>
-   <dt><var title="">path</var> . <code title="dom-path-addStroke">addStroke</code>(<var title="">path</var>)</dt>
+   <dt><var title="">path</var> . <code title="dom-path-addPath">addPath</code>(<var title="">path</var>, <var title="">transform</var>)</dt>
+   <dt><var title="">path</var> . <code title="dom-path-addPathByStrokingPath">addPathByStrokingPath</code>(<var title="">path</var>, <var title="">styles</var>, <var title="">transform</var>)</dt>
 
    <dd>
 
     <p>Adds to the path the path given by the argument.</p>
 
+    <p>In the case of the stroking variants, the line styles are taken from the <var title="">styles</var> argument, which can be either a <code>DrawingStyle</code> object or a <code>CanvasRenderingContext2D</code> object.</p>
+
    </dd>
 
-   <dt><var title="">path</var> . <code title="dom-path-addFillText">addFillText</code>(<var title="">text</var>, <var title="">x</var>, <var title="">y</var> [, <var title="">maxWidth</var> ])</dt>
-   <dt><var title="">path</var> . <code title="dom-path-addFillText">addFillText</code>(<var title="">text</var>, <var title="">path</var> [, <var title="">maxWidth</var> ])</dt>
-   <dt><var title="">path</var> . <code title="dom-path-addStrokeText">addStrokeText</code>(<var title="">text</var>, <var title="">x</var>, <var title="">y</var> [, <var title="">maxWidth</var> ])</dt>
-   <dt><var title="">path</var> . <code title="dom-path-addStrokeText">addStrokeText</code>(<var title="">text</var>, <var title="">path</var> [, <var title="">maxWidth</var> ])</dt>
+   <dt><var title="">path</var> . <code title="dom-path-addText">addText</code>(<var title="">text</var>, <var title="">styles</var>, <var title="">transform</var>, <var title="">x</var>, <var title="">y</var> [, <var title="">maxWidth</var> ])</dt>
+   <dt><var title="">path</var> . <code title="dom-path-addText">addText</code>(<var title="">text</var>, <var title="">styles</var>, <var title="">transform</var>, <var title="">path</var> [, <var title="">maxWidth</var> ])</dt>
+   <dt><var title="">path</var> . <code title="dom-path-addPathByStrokingText">addPathByStrokingText</code>(<var title="">text</var>, <var title="">styles</var>, <var title="">transform</var>, <var title="">x</var>, <var title="">y</var> [, <var title="">maxWidth</var> ])</dt>
+   <dt><var title="">path</var> . <code title="dom-path-addPathByStrokingText">addPathByStrokingText</code>(<var title="">text</var>, <var title="">styles</var>, <var title="">transform</var>, <var title="">path</var> [, <var title="">maxWidth</var> ])</dt>
 
    <dd>
 
     <p>Adds to the path a series of subpaths corresponding to the given text. If the arguments give a coordinate, the text is drawn horizontally at the given coordinates. If the arguments give a path, the text is drawn along the path. If a maximum width is provided, the text will be scaled to fit that width if necessary.</p>
 
+    <p>The font, and in the case of the stroking variants, the line styles, are taken from the <var title="">styles</var> argument, which can be either a <code>DrawingStyle</code> object or a <code>CanvasRenderingContext2D</code> object.</p>
+
    </dd>
 
   </dl>
 
   <div class="impl">
 
-  <p>Each <code>Path</code> object has a <dfn>path scope node</dfn>.</p>
-
-  <p>The <dfn title="dom-path"><code>Path()</code></dfn> constructor,
-  when invoked, must return a newly created <code>Path</code> object.
-  If the constructor was passed an argument, then the
-  <code>Path</code> object's <span>path scope node</span> is that
-  element. Otherwise, the object's <span>path scope node</span> is
-  the <code>Document</code> object of the <span>active
-  document</span> of the <span>browsing context</span> of the
-  <code>Window</code> object on which the interface object of the
-  invoked constructor is found.</p>
+  <p>The <dfn title="dom-Path"><code>Path()</code></dfn> constructor,
+  when invoked, must return a newly created <code>Path</code>
+  object.</p>
 
+  <hr>
 
-  <p>The <dfn title="dom-path-addPathData"><code>addPathData(<var
-  title="">d</var>)</code> method must run the following steps:</p>
+  <p>The <dfn title="dom-Path-withdata"><code>Path(<var
+  title="">d</var>)</code></dfn> constructor must run the following
+  steps:</p>
 
   <ol>
 
-   <li><p>Parse and interpret the <var title="">d</var> argument
-   according to the SVG specification's rules for path data, thus
-   obtaining an SVG path. <a href="#refsSVG">[SVG]</a></p></li>
+   <li>
 
-   <li><p>If this failed in some way, then throw a
-   <code>SyntaxError</code> exception, and abort these steps.</p></li>
+    <p>Parse and interpret the <var title="">d</var> argument
+    according to the SVG specification's rules for path data, thus
+    obtaining an SVG path. <a href="#refsSVG">[SVG]</a></p>
 
-   <li><p>Transform all the coordinates and lines in the SVG path by
-   the <span title="dom-context-2d-transformation">current
-   transformation matrix</span> of the <code>Path</code>
-   object.</p></li>
+    <p class="note">The resulting path could be empty. SVG defines
+    error handling rules for parsing and applying path data.</p>
+
+   </li>
 
    <li><p>Let (<var title="">x</var>, <var title="">y</var>) be the
    last point in the SVG path.</p></li>
 
-   <li><p>Add all the subpaths in the SVG path, if any, to the
-   <code>Path</code> object. </p>
+   <li><p>Create a new <code>Path</code> object and add all the
+   subpaths in the SVG path, if any, to that <code>Path</code> object.
+   </p>
 
    <li><p>Create a new subpath in the <code>Path</code> object with
    (<var title="">x</var>, <var title="">y</var>) as the only point in
    the subpath.</p></li>
 
+   <li><p>Return the <code>Path</code> object as the constructed
+   object.</p></li>
+
   </ol>
 
+  <hr>
 
-  <p>The <dfn title="dom-path-addFill"><code>addFill(<var
-  title="">b</var>)</code></dfn> method, when invoked on a
-  <code>Path</code> object <var title="">a</var>, must run the
-  following steps:</p>
+  <p>The <dfn title="dom-path-addPath"><code>addPath(<var
+  title="">b</var>, <var title="">transform</var>)</code></dfn>
+  method, when invoked on a <code>Path</code> object <var
+  title="">a</var>, must run the following steps:</p>
 
   <ol>
 
    <li><p>If the <code>Path</code> object <var title="">b</var> has
    no subpaths, abort these steps.</p></li>
 
    <li><p>Create a copy of all the subpaths in <var title="">b</var>.
    Let this copy be known as <var title="">c</var>.</p></li>
 
    <li><p>Transform all the coordinates and lines in <var
-   title="">c</var> by the <span
-   title="dom-context-2d-transformation">current transformation
-   matrix</span> of <var title="">a</var>.</p></li>
+   title="">c</var> by the transform matrix <var
+   title="">transform</var>, if it is not null.</p></li>
 
    <li><p>Let (<var title="">x</var>, <var title="">y</var>) be the
    last point in the last subpath of <var title="">c</var>.</p></li>
 
    <li><p>Add all the subpaths in <var title="">c</var> to <var
    title="">a</var>.</p></li>
 
    <li><p>Create a new subpath in <var title="">a</var> with (<var
    title="">x</var>, <var title="">y</var>) as the only point in the
    subpath.</p></li>
 
   </ol>
 
-  <p>The <dfn title="dom-path-addStroke"><code>addStroke(<var
-  title="">b</var>)</code></dfn> method, when invoked on a
+  <hr>
+
+  <p>The <dfn
+  title="dom-path-addPathByStrokingPath"><code>addPathByStrokingPath(<var
+  title="">b</var>, <var title="">styles</var>, <var
+  title="">transform</var>)</code></dfn> method, when invoked on a
   <code>Path</code> object <var title="">a</var>, must run the
   following steps:</p>
 
   <ol>
 
    <li><p>If the <code>Path</code> object <var title="">b</var> has
    no subpaths, abort these steps.</p></li>
 
    <li><p>Create a copy of all the subpaths in <var title="">b</var>.
    Let this copy be known as <var title="">c</var>.</p></li>
 
    <li><p>Transform all the coordinates and lines in <var
-   title="">c</var> by the <span
-   title="dom-context-2d-transformation">current transformation
-   matrix</span> of <var title="">a</var>.</p></li>
-
-   <li><p>Create a new list of subpaths <var title="">d</var>,
-   consisting of the subpaths necessary to describe the result of
-   tracing the subpaths in <var title="">c</var>, in the same order,
-   while applying the line styles of <var title="">a</var> (the <code
-   title="dom-context-2d-lineWidth">lineWidth</code>, <code
-   title="dom-context-2d-lineCap">lineCap</code>, <code
-   title="dom-context-2d-lineJoin">lineJoin</code>, and (if
-   appropriate) <code
-   title="dom-context-2d-miterLimit">miterLimit</code> attributes).
-   Subpaths in <var title="">d</var> must wind clockwise, regardless
-   of the direction of paths in <var title="">c</var>.</p>
+   title="">c</var> by transformation matrix <var
+   title="">transform</var>, if it is not null.</p></li>
 
-   <!--
-
-    Because both of these examples result in two lines (assuming
-    non-zero winding rules, things are different under even/odd),
-    there's no "hole" where the lines overlap:
-
-           c.beginPath();
-           c.lineWidth=30;
-           c.moveTo(200,200); // subpath 1
-           c.lineTo(400,200);
-           c.moveTo(400,210); // subpath 2
-           c.lineTo(200,190);
-           c.stroke();
-
-           c.beginPath();
-           c.lineWidth=30;
-           c.moveTo(200,200); // subpath 1
-           c.lineTo(400,200);
-           c.lineTo(300,300);
-           c.closePath();
-           c.moveTo(400,210); // subpath 2
-           c.lineTo(200,190);
-           c.lineTo(300,300);
-           c.closePath();
-           c.stroke();
-
-    ...and we want the same result when you create the two subpaths
-    in each example above as two Paths, stroke them onto a third
-    Path, and then fill that Path on the context.
-
-   -->
+   <li><p>Let a new list of subpaths <var title="">d</var> be the
+   result of <span title="trace a path">tracing</span> <var
+   title="">c</var>, using the <var title="">styles</var> argument for
+   the line styles.</p>
 
    <li><p>Let (<var title="">x</var>, <var title="">y</var>) be the
    last point in the last subpath of <var title="">d</var>.</p></li>
 
    <li><p>Add all the subpaths in <var title="">d</var> to <var
    title="">a</var>.</p></li>
 
    <li><p>Create a new subpath in <var title="">a</var> with (<var
    title="">x</var>, <var title="">y</var>) as the only point in the
    subpath.</p></li>
 
   </ol>
 
-  <p>The <dfn
-  title="dom-context-2d-addFillText"><code>addFillText()</code></dfn> and
-  <dfn
-  title="dom-context-2d-addStrokeText"><code>addStrokeText()</code></dfn>
+  <hr>
+
+  <p>The <dfn title="dom-path-addText"><code>addText()</code></dfn>
+  and <dfn
+  title="dom-path-addPathByStrokingText"><code>addPathByStrokingText()</code></dfn>
   methods each come in two variants: one rendering text at a given
   coordinate, and one rendering text along a given path. In both
-  cases, a maximum width can optionally be provided.</p>
+  cases, the methods take a <code>CanvasDrawingStyles</code> object
+  argument for the text and (if appropriate) line styles to use, an
+  <code>SVGMatrix</code> object <var title="">transform</var> (which
+  can be null), and a maximum width can optionally be provided.</p>
 
   <p>When one of the <code
-  title="dom-context-2d-addStrokeText">addFillText()</code> and <code
-  title="dom-context-2d-addStrokeText">addStrokeText()</code> variants
+  title="dom-path-addText">addText()</code> and <code
+  title="dom-path-addPathByStrokingText">addPathByStrokingText()</code> variants
   that take as argument an (<var title="">x</var>, <var
   title="">y</var>) coordinate is invoked, the method must run the
   following algorithm:</p>
 
   <ol>
 
    <li><p>Run the <span>text preparation algorithm</span>, passing it
-   <var title="">text</var>, the <code>Path</code> object, and, if the
-   <var title="">maxWidth</var> argument was provided, that argument.
-   Let <var title="">glyphs</var> be the result.</p>
+   <var title="">text</var>, the <code>CanvasDrawingStyles</code>
+   object argument, and, if the <var title="">maxWidth</var> argument
+   was provided, that argument. Let <var title="">glyphs</var> be the
+   result.</p>
 
    <li><p>Move all the shapes in <var title="">glyphs</var> to the
    right by <var title="">x</var> CSS pixels and down by <var
    title="">y</var> CSS pixels.</p></li>
 
-   <li><p>Let <var title="">glyph subpaths</var> be a list of subpaths
-   describing the shapes given in <var title="">glyphs</var>, with
-   each CSS pixel in the coordinate space of <var
-   title="">glyphs</var> mapped to one coordinate space unit in <var
-   title="">glyph subpaths</var>. Subpaths in <var title="">glyph
-   subpaths</var> must wind clockwise, regardless of how the user
-   agent's font subsystem renders fonts and regardless of how the
-   fonts themselves are defined.</p>
+   <li><p>Let <var title="">glyph subpaths</var> be a
+   <span>path</span> describing the shapes given in <var
+   title="">glyphs</var>, with each CSS pixel in the coordinate space
+   of <var title="">glyphs</var> mapped to one coordinate space unit
+   in <var title="">glyph subpaths</var>. Subpaths in <var
+   title="">glyph subpaths</var> must wind clockwise, regardless of
+   how the user agent's font subsystem renders fonts and regardless of
+   how the fonts themselves are defined.</p>
 
    <li><p>If the method is <code
-   title="dom-context-2d-addStrokeText">addStrokeText()</code>,
-   replace <var title="">glyph subpaths</var> by a new list of
-   subpaths consisting of the subpaths necessary to describe the
-   result of tracing the subpaths added to <var title="">glyph
-   subpaths</var> in the preview step, in the same order, while
-   applying the line styles of the <code>Path</code> object (the <code
-   title="dom-context-2d-lineWidth">lineWidth</code>, <code
-   title="dom-context-2d-lineCap">lineCap</code>, <code
-   title="dom-context-2d-lineJoin">lineJoin</code>, and (if
-   appropriate) <code
-   title="dom-context-2d-miterLimit">miterLimit</code> attributes).
-   These subpaths in <var title="">glyph subpaths</var> must also all
-   wind clockwise.</p>
+   title="dom-path-addPathByStrokingText">addPathByStrokingText()</code>,
+   replace <var title="">glyph subpaths</var> by the result of <span
+   title="trace a path">tracing</span> <var title="">glyph
+   subpaths</var>, using the <code>CanvasDrawingStyles</code> object
+   argument for the line styles.</p>
 
    <li><p>Transform all the coordinates and lines in <var
-   title="">glyph subpaths</var> by the <span
-   title="dom-context-2d-transformation">current transformation
-   matrix</span> of the <code>Path</code> object.</p></li>
+   title="">glyph subpaths</var> by the transformation matrix <var
+   title="">transform</var>, if it is not null.</p></li>
 
    <li><p>Let (<var title="">x<sub title="">final</sub></var>, <var
    title="">y<sub title="">final</sub></var>) be the last point in the
    last subpath of <var title="">glyph subpaths</var>.</p></li>
 
    <li><p>Add all the subpaths in <var title="">glyph
    subpaths</var> to the <code>Path</code> object.</p></li>
 
    <li><p>Create a new subpath in the <code>Path</code> object with
    (<var title="">x<sub title="">final</sub></var>, <var
    title="">y<sub title="">final</sub></var>) as the only point in the
    subpath.</p></li>
 
   </ol>
 
   <p>When one of the <code
-  title="dom-context-2d-addFillText">addFillText()</code> and <code
-  title="dom-context-2d-addStrokeText">addStrokeText()</code> variants
-  that take as argument a <code>Path</code> object is invoked, the
-  method must run the following algorithm:</p>
+  title="dom-path-addText">addText()</code> and <code
+  title="dom-path-addPathByStrokingText">addPathByStrokingText()</code>
+  variants that take as argument a <code>Path</code> object is
+  invoked, the method must run the following algorithm:</p>
 
   <ol>
 
    <li><p>Let <var title="">target</var> be the <code>Path</code>
    object on which the method was invoked.</p></li>
 
    <li><p>Let <var title="">path</var> be the <code>Path</code> object
    that was provided in the method's arguments.</p></li>
 
    <li><p>Run the <span>text preparation algorithm</span>, passing it
-   <var title="">text</var>, <var title="">target</var>, and, if the
-   <var title="">maxWidth</var> argument was provided, that argument.
-   Let <var title="">glyphs</var> be the resulting array, and <var
-   title="">physical alignment</var> be the resulting alignment
-   value.</p>
+   <var title="">text</var>, the <code>CanvasDrawingStyles</code>
+   object argument, and, if the <var title="">maxWidth</var> argument
+   was provided, that argument. Let <var title="">glyphs</var> be the
+   resulting array, and <var title="">physical alignment</var> be the
+   resulting alignment value.</p>
 
    <li><p>Let <var title="">width</var> be the aggregate length of all
    the subpaths in <var title="">path</var>, including the distances
    from the last point of each closed subpath to the first point of
    that subpath.</p></li>
 
    <li><p>Define <var title="">L</var> to be a linear coordinate line
    for of all the subpaths in <var title="">path</var>, with
    additional lines drawn between the last point and the first point
    of each closed subpath, such that the first point of the first
@@ -42456,21 +42633,21 @@ try {
     appropriate step below:</p>
 
     <dl class="switch">
 
      <dt>If <var title="">physical alignment</var> is <i>left</i></dt>
      <dd>Let <var title="">offset</var> be zero.</dd>
 
      <dt>If <var title="">physical alignment</var> is <i>right</i></dt>
      <dd>Let <var title="">offset</var> be <var title="">width</var>.</dd>
 
-     <dt>If <var title="">physical alignment</var> is <i>center</i></dt>
+     <dt>If <var title="">physical alignment</var> is <i title="">center</i></dt>
      <dd>Let <var title="">offset</var> be half of <var title="">width</var>.</dd>
 
     </dl>
 
    </li>
 
    <li><p>Move all the shapes in <var title="">glyphs</var> to the
    right by <var title="">offset</var> CSS pixels.</p></li>
 
    <li>
@@ -42522,38 +42699,29 @@ try {
      <li><p>Let <var title="">glyph subpaths</var> be a list of
      subpaths describing the shape given in <var title="">glyph</var>,
      with each CSS pixel in the coordinate space of <var
      title="">glyph</var> mapped to one coordinate space unit in <var
      title="">glyph subpaths</var>. Subpaths in <var title="">glyph
      subpaths</var> must wind clockwise, regardless of how the user
      agent's font subsystem renders fonts and regardless of how the
      fonts themselves are defined.</p>
 
      <li><p>If the method is <code
-     title="dom-context-2d-addStrokeText">addStrokeText()</code>,
-     replace <var title="">glyph subpaths</var> by a new list of
-     subpaths consisting of the subpaths necessary to describe the
-     result of tracing the subpaths added to <var title="">glyph
-     subpaths</var> in the preview step, in the same order, while
-     applying the line styles of the <var title="">target</var> object
-     (the <code title="dom-context-2d-lineWidth">lineWidth</code>,
-     <code title="dom-context-2d-lineCap">lineCap</code>, <code
-     title="dom-context-2d-lineJoin">lineJoin</code>, and (if
-     appropriate) <code
-     title="dom-context-2d-miterLimit">miterLimit</code> attributes).
-     These subpaths in <var title="">glyph subpaths</var> must also
-     all wind clockwise.</p>
+     title="dom-path-addPathByStrokingText">addPathByStrokingText()</code>,
+     replace <var title="">glyph subpaths</var> by the result of <span
+     title="trace a path">tracing</span> <var title="">glyph
+     subpaths</var>, using the <code>CanvasDrawingStyles</code> object
+     argument for the line styles.</p>
 
      <li><p>Transform all the coordinates and lines in <var
-     title="">glyph subpaths</var> by the <span
-     title="dom-context-2d-transformation">current transformation
-     matrix</span> of <var title="">target</var>.</p></li>
+     title="">glyph subpaths</var> by the transformation matrix <var
+     title="">transform</var>, if it is not null.</p></li>
 
      <li><p>Let (<var title="">x<sub title="">final</sub></var>, <var
      title="">y<sub title="">final</sub></var>) be the last point in
      the last subpath of <var title="">glyph subpaths</var>. (This
      coordinate is only used if this is the last glyph
      processed.)</p></li>
 
      <li><p>Add all the subpaths in <var title="">glyph subpaths</var>
      to <var title="">target</var>.</p></li>
 
@@ -42564,20 +42732,182 @@ try {
    <li><p>Create a new subpath in the <code>Path</code> object with
    (<var title="">x<sub title="">final</sub></var>, <var
    title="">y<sub title="">final</sub></var>) as the only point in the
    subpath.</p></li>
 
   </ol>
 
   </div>
 
 
+
+  <h6><dfn title="dom-context-2d-transformation">Transformations</dfn></h6>
+
+  <p>Each <code>CanvasRenderingContext2D</code> object has a
+  <i>current transformation matrix</i>, as well as methods (described
+  in this section) to manipulate it. When a
+  <code>CanvasRenderingContext2D</code> object is created, its
+  transformation matrix must be initialized to the identity
+  transform.</p>
+
+  <p>The transformation matrix is applied to coordinates when creating
+  the <span>current default path</span>, and when painting text,
+  shapes, and <code>Path</code> objects, on
+  <code>CanvasRenderingContext2D</code> objects.</p> <!-- conformance
+  criteria for actual drawing are described in the various sections
+  below -->
+
+  <p class="note">Most of the API uses <code>SVGMatrix</code> objects
+  rather than this API. This API remains mostly for historical
+  reasons.</p>
+
+  <div class="impl">
+
+  <p>The transformations must be performed in reverse order.</p>
+
+  <p class="note">For instance, if a scale transformation that doubles
+  the width is applied to the canvas, followed by a rotation
+  transformation that rotates drawing operations by a quarter turn,
+  and a rectangle twice as wide as it is tall is then drawn on the
+  canvas, the actual result will be a square.</p> <!-- q.v.
+  http://goo.gl/5RLrN -->
+
+  </div>
+
+  <dl class="domintro">
+
+   <dt><var title="">context</var> . <code title="dom-context-2d-scale">scale</code>(<var title="">x</var>, <var title="">y</var>)</dt>
+
+   <dd>
+
+    <p>Changes the transformation matrix to apply a scaling transformation with the given characteristics.</p>
+
+   </dd>
+
+   <dt><var title="">context</var> . <code title="dom-context-2d-rotate">rotate</code>(<var title="">angle</var>)</dt>
+
+   <dd>
+
+    <p>Changes the transformation matrix to apply a rotation transformation with the given characteristics. The angle is in radians.</p>
+
+   </dd>
+
+   <dt><var title="">context</var> . <code title="dom-context-2d-translate">translate</code>(<var title="">x</var>, <var title="">y</var>)</dt>
+
+   <dd>
+
+    <p>Changes the transformation matrix to apply a translation transformation with the given characteristics.</p>
+
+   </dd>
+
+   <dt><var title="">context</var> . <code title="dom-context-2d-transform">transform</code>(<var title="">a</var>, <var title="">b</var>, <var title="">c</var>, <var title="">d</var>, <var title="">e</var>, <var title="">f</var>)</dt>
+
+   <dd>
+
+    <p>Changes the transformation matrix to apply the matrix given by the arguments as described below.</p>
+
+   </dd>
+
+   <dt><var title="">context</var> . <code title="dom-context-2d-setTransform">setTransform</code>(<var title="">a</var>, <var title="">b</var>, <var title="">c</var>, <var title="">d</var>, <var title="">e</var>, <var title="">f</var>)</dt>
+
+   <dd>
+
+    <p>Changes the transformation matrix <em>to</em> the matrix given by the arguments as described below.</p>
+
+   </dd>
+
+  </dl>
+
+  <div class="impl">
+
+  <p>The <dfn title="dom-context-2d-scale"><code>scale(<var
+  title="">x</var>, <var title="">y</var>)</code></dfn> method must
+  add the scaling transformation described by the arguments to the
+  transformation matrix. The <var title="">x</var> argument represents
+  the scale factor in the horizontal direction and the <var
+  title="">y</var> argument represents the scale factor in the
+  vertical direction. The factors are multiples.</p>
+
+  <p>The <dfn title="dom-context-2d-rotate"><code>rotate(<var
+  title="">angle</var>)</code></dfn> method must add the rotation
+  transformation described by the argument to the transformation
+  matrix. The <var title="">angle</var> argument represents a
+  clockwise rotation angle expressed in radians.</p>
+
+  <p>The <dfn title="dom-context-2d-translate"><code>translate(<var
+  title="">x</var>, <var title="">y</var>)</code></dfn> method must
+  add the translation transformation described by the arguments to the
+  transformation matrix. The <var title="">x</var> argument represents
+  the translation distance in the horizontal direction and the <var
+  title="">y</var> argument represents the translation distance in the
+  vertical direction. The arguments are in coordinate space units.</p>
+
+  <p>The <dfn title="dom-context-2d-transform"><code>transform(<var
+  title="">a</var>, <var title="">b</var>, <var title="">c</var>, <var
+  title="">d</var>, <var title="">e</var>, <var
+  title="">f</var>)</code></dfn> method must replace the current
+  transformation matrix with the result of multiplying the current
+  transformation matrix with the matrix described by:</p>
+
+  </div>
+
+  <table class="matrix">
+   <tr>
+    <td><var title="">a</var></td>
+    <td><var title="">c</var></td>
+    <td><var title="">e</var></td>
+   </tr>
+   <tr>
+    <td><var title="">b</var></td>
+    <td><var title="">d</var></td>
+    <td><var title="">f</var></td>
+   </tr>
+   <tr>
+    <td>0</td>
+    <td>0</td>
+    <td>1</td>
+   </tr>
+  </table>
+
+  <p class="note">The arguments <var title="">a</var>, <var
+  title="">b</var>, <var title="">c</var>, <var title="">d</var>, <var
+  title="">e</var>, and <var title="">f</var> are sometimes called
+  <var title="">m11</var>, <var title="">m12</var>, <var
+  title="">m21</var>, <var title="">m22</var>, <var title="">dx</var>,
+  and <var title="">dy</var> or <var title="">m11</var>, <var
+  title="">m21</var>, <var title="">m12</var>, <var
+  title="">m22</var>, <var title="">dx</var>, and <var
+  title="">dy</var>. Care should be taken in particular with the order
+  of the second and third arguments (<var title="">b</var> and <var
+  title="">c</var>) as their order varies from API to API and APIs
+  sometimes use the notation <var title="">m12</var>/<var
+  title="">m21</var> and sometimes <var title="">m21</var>/<var
+  title="">m12</var> for those positions.</p>
+
+  <div class="impl">
+
+  <p>The <dfn
+  title="dom-context-2d-setTransform"><code>setTransform(<var
+  title="">a</var>, <var title="">b</var>, <var
+  title="">c</var>, <var title="">d</var>, <var title="">e</var>,
+  <var title="">f</var>)</code></dfn> method must reset the current
+  transform to the identity matrix, and then invoke the <code><span
+  title="dom-context-2d-transform">transform</span>(<var
+  title="">a</var>, <var title="">b</var>, <var
+  title="">c</var>, <var title="">d</var>, <var title="">e</var>,
+  <var title="">f</var>)</code> method with the same arguments.</p>
+
+  </div>
+
+
+
+
   <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>
 
@@ -43069,23 +43399,23 @@ try {
   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
+  <p>Shapes are painted without affecting the <span>current default
+  path</span>, 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">
 
@@ -43126,31 +43456,51 @@ try {
 
   <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>
 
   <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>
+  title="">h</var>)</code></dfn> method must take the result of <span
+  title="trace a path">tracing the path</span> described below, using
+  the <code>CanvasRenderingContext2D</code> object's line styles, and
+  fill it with the <code
+  title="dom-context-2d-strokeStyle">strokeStyle</code>.</p>
+
+  <p>If both <var title="">w</var> and <var title="">h</var> are zero,
+  the path has a single subpath with just one point (<var
+  title="">x</var>, <var title="">y</var>), and no lines, and this
+  method thus has no effect (the <span>trace a path</span> algorithm
+  returns an empty path in that case).</p>
+
+  <p>If just one of either <var title="">w</var> or <var
+  title="">h</var> is zero, then the path has a single subpath
+  consisting of two points, with coordinates (<span title=""><var
+  title="">x</var></span>, <span title=""><var
+  title="">y</var></span>) and (<span title=""><var
+  title="">x</var>+<var title="">w</var></span>, <span title=""><var
+  title="">y</var></span>+<var title="">h</var>), in that order,
+  connected by a single straight line.</p>
+
+  <p>Otherwise, the path has a single subpath are four points, with
+  coordinates (<span title=""><var title="">x</var></span>, <span
+  title=""><var title="">y</var></span>), (<span title=""><var
+  title="">x</var>+<var title="">w</var></span>, <span title=""><var
+  title="">y</var></span>), (<span title=""><var title="">x</var>+<var
+  title="">w</var></span>, <span title=""><var
+  title="">y</var></span>+<var title="">h</var>), and (<span
+  title=""><var title="">x</var></span>, <span title=""><var
+  title="">y</var>+<var title="">h</var></span>), connected to each
+  other in that order by straight lines.</p>
 
   </div>
 
 
 
   <h6>Drawing text to the canvas</h6>
 
   <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>
@@ -43224,28 +43574,24 @@ try {
     title="dom-context-2d-transformation">current transformation
     matrix</span>, with each CSS pixel in the coordinate space of <var
     title="">glyphs</var> mapped to one coordinate space unit.</p>
 
     <p>For <code title="dom-context-2d-fillText">fillText()</code>,
     <code title="dom-context-2d-fillStyle">fillStyle</code> must be
     applied to the shapes and <code
     title="dom-context-2d-strokeStyle">strokeStyle</code> must be
     ignored. For <code
     title="dom-context-2d-strokeText">strokeText()</code>, the reverse
-    holds and <code
-    title="dom-context-2d-strokeStyle">strokeStyle</code> must be
-    applied to the shape outlines, along with the <code
-    title="dom-context-2d-lineWidth">lineWidth</code>, <code
-    title="dom-context-2d-lineCap">lineCap</code>, <code
-    title="dom-context-2d-lineJoin">lineJoin</code>, and (if
-    appropriate) <code
-    title="dom-context-2d-miterLimit">miterLimit</code> attributes,
+    holds: <code title="dom-context-2d-strokeStyle">strokeStyle</code>
+    must be applied to the result of <span title="trace a
+    path">tracing</span> the shapes using the
+    <code>CanvasRenderingContext2D</code> object for the line styles,
     and <code title="dom-context-2d-fillStyle">fillStyle</code> must
     be ignored.</p>
 
     <p>These shapes are painted without affecting the current path,
     and are subject to <span title="shadows">shadow effects</span>,
     <span title="dom-context-2d-globalAlpha">global alpha</span>, the
     <span title="clipping region">clipping region</span>, and <span
     title="dom-context-2d-globalCompositeOperation">global composition
     operators</span>.</p>
 
@@ -43459,179 +43805,175 @@ v6DVT (also check for '- -' bits in the part above) -->
 
   <p class="note">A future version of the 2D context API may provide a
   way to render fragments of documents, rendered using CSS, straight
   to the canvas. This would be provided in preference to a dedicated
   way of doing multiline layout.</p>
 
 
 
   <h6>Drawing paths to the canvas</h6>
 
-  <p>The context always has a current default path. There is only one
-  current default path, it is not part of the <span>drawing
-  state</span>. The current default path is a <span
-  title="concept-path">path</span>, as described in the previous
-  section.</p>
+  <p>The context always has a <dfn>current default path</dfn>. There
+  is only one <span>current default path</span>, it is not part of the
+  <span>drawing state</span>. The <span>current default path</span> is
+  a <span title="concept-path">path</span>, as described above.</p>
 
   <dl class="domintro">
 
    <dt><var title="">context</var> . <code title="dom-context-2d-beginPath">beginPath</code>()</dt>
 
    <dd>
 
-    <p>Resets the current default path.</p>
+    <p>Resets the <span>current default path</span>.</p>
 
    </dd>
 
    <dt><var title="">context</var> . <code title="dom-context-2d-fill">fill</code>()</dt>
    <dt><var title="">context</var> . <code title="dom-context-2d-fill">fill</code>(<var title="">path</var>)</dt>
 
    <dd>
 
-    <p>Fills the subpaths of the current default path or the given path with the current fill style.</p>
+    <p>Fills the subpaths of the <span>current default path</span> or the given path with the current fill style.</p>
 
    </dd>
 
 
    <dt><var title="">context</var> . <code title="dom-context-2d-stroke">stroke</code>()</dt>
    <dt><var title="">context</var> . <code title="dom-context-2d-stroke">stroke</code>(<var title="">path</var>)</dt>
 
    <dd>
 
-    <p>Strokes the subpaths of the current default path or the given path with the current stroke style.</p>
+    <p>Strokes the subpaths of the <span>current default path</span> or the given path with the current stroke style.</p>
 
    </dd>
 
 
    <dt><var title="">context</var> . <code title="dom-context-2d-drawSystemFocusRing">drawSystemFocusRing</code>(<var title="">element</var>)</dt>
    <dt><var title="">context</var> . <code title="dom-context-2d-drawSystemFocusRing">drawSystemFocusRing</code>(<var title="">path</var>, <var title="">element</var>)</dt>
 
    <dd>
 
     <p>If the given element is focused, draws a focus ring around the
-    current default path or hte given path, following the platform
+    <span>current default path</span> or hte given path, following the platform
     conventions for focus rings.</p>
 
    </dd>
 
 
    <dt><var title="">shouldDraw</var> = <var title="">context</var> . <code title="dom-context-2d-drawCustomFocusRing">drawCustomFocusRing</code>(<var title="">element</var>)</dt>
    <dt><var title="">shouldDraw</var> = <var title="">context</var> . <code title="dom-context-2d-drawCustomFocusRing">drawCustomFocusRing</code>(<var title="">path</var>, <var title="">element</var>)</dt>
 
    <dd>
 
     <p>If the given element is focused, and the user has configured
     his system to draw focus rings in a particular manner (for
     example, high contrast focus rings), draws a focus ring around the
-    current default path or the given path and returns false.</p>
+    <span>current default path</span> or the given path and returns false.</p>
 
     <p>Otherwise, returns true if the given element is focused, and
     false otherwise. This can thus be used to determine when to draw a
     focus ring (see <a href="#drawCustomFocusRingExample">the
     example</a> below).</p>
 
    </dd>
 
 
    <dt><var title="">context</var> . <code title="dom-context-2d-scrollPathIntoView">scrollPathIntoView</code>()</dt>
    <dt><var title="">context</var> . <code title="dom-context-2d-scrollPathIntoView">scrollPathIntoView</code>(<var title="">path</var>)</dt>
 
    <dd>
 
-    <p>Scrolls the current default path into view. This is especially
+    <p>Scrolls the <span>current default path</span> into view. This is especially
     useful on devices with small screens, where the whole canvas might
     not be visible at once.</p>
 
    </dd>
 
 
    <dt><var title="">context</var> . <code title="dom-context-2d-clip">clip</code>()</dt>
    <dt><var title="">context</var> . <code title="dom-context-2d-clip">clip</code>(<var title="">path</var>)</dt>
 
    <dd>
 
-    <p>Further constrains the clipping region to the current default
-    path.</p>
+    <p>Further constrains the clipping region to the <span>current default path</span>.</p>
 
    </dd>
 
 
    <dt><var title="">context</var> . <code title="dom-context-2d-isPointInPath">isPointInPath</code>(<var title="">x</var>, <var title="">y</var>)</dt>
    <dt><var title="">context</var> . <code title="dom-context-2d-isPointInPath">isPointInPath</code>(<var title="">path</var>, <var title="">x</var>, <var title="">y</var>)</dt>
 
    <dd>
 
-    <p>Returns true if the given point is in the current default
-    path.</p>
+    <p>Returns true if the given point is in the <span>current default path</span>.</p>
 
    </dd>
 
   </dl>
 
   <div class="impl">
 
   <p>The <dfn
   title="dom-context-2d-beginPath"><code>beginPath()</code></dfn>
-  method must empty the list of subpaths in the context's current
-  default path so that the it once again has zero subpaths.</p>
+  method must empty the list of subpaths in the context's
+  <span>current default path</span> so that the it once again has zero
+  subpaths.</p>
 
   <p>Where the following method definitions use the term <i>intended
   path</i>, it means the <code>Path</code> argument, if one was
-  provided, or the current default path otherwise.</p>
+  provided, or the <span>current default path</span> otherwise.</p>
 
   <p>When the intended path is a <code>Path</code> object, the
   coordinates of its subpaths must be transformed according to the
   <code>CanvasRenderingContext2D</code> object's <span
   title="dom-context-2d-transformation">current transformation
   matrix</span> when used by these methods (without affecting the
   <code>Path</code> object itself). When the intended path is the
-  current default path, it is not affected by the transform, (This is
-  because transformations already affect the current default path when
-  it is constructed, so applying it when it is painted as well would
-  result in a double transformation.)</p>
+  <span>current default path</span>, it is not affected by the
+  transform. (This is because transformations already affect the
+  <span>current default path</span> when it is constructed, so
+  applying it when it is painted as well would result in a double
+  transformation.)</p>
 
   <p>The <dfn title="dom-context-2d-fill"><code>fill()</code></dfn>
   method must fill all the subpaths of the intended path, using <code
   title="dom-context-2d-fillStyle">fillStyle</code>, and using the
   non-zero winding number rule. Open subpaths must be implicitly
   closed when being filled (without affecting the actual
   subpaths).</p>
 
   <p class="note">Thus, if two overlapping but otherwise independent
   subpaths have opposite windings, they cancel out and result in no
   fill. If they have the same winding, that area just gets painted
   once.</p>
 
   <p>The <dfn
   title="dom-context-2d-stroke"><code>stroke()</code></dfn> method
-  must calculate the strokes of all the subpaths of the intended path,
-  using the <code title="dom-context-2d-lineWidth">lineWidth</code>,
-  <code title="dom-context-2d-lineCap">lineCap</code>, <code
-  title="dom-context-2d-lineJoin">lineJoin</code>, and (if
-  appropriate) <code
-  title="dom-context-2d-miterLimit">miterLimit</code> attributes, and
-  then fill the combined stroke area using the <code
+  must apply the <span title="trace a path">trace</span> the intended
+  path, using the <code>CanvasRenderingContext2D</code> object for the
+  line styles, and then fill the combined stroke area using the <code
   title="dom-context-2d-strokeStyle">strokeStyle</code> attribute.</p>
 
-  <p class="note">Since the subpaths are all stroked as one,
-  overlapping parts of the paths in one stroke operation are treated
-  as if their union was what was painted.</p>
+  <p class="note">As a result of how the algorithm to <span>trace a
+  path</span> is defined, overlapping parts of the paths in one stroke
+  operation are treated as if their union was what was painted.</p>
 
   <p class="note">The stroke <em>style</em> is affected by the
   transformation during painting, even if the intended path is the
-  current default path.</p>
+  <span>current default path</span>.</p>
 
   <p>Paths, when filled or stroked, must be painted without affecting
-  the current default path or any <code>Path</code> objects, and must
-  be subject to <span title="shadows">shadow effects</span>, <span
-  title="dom-context-2d-globalAlpha">global alpha</span>, the <span
-  title="clipping region">clipping region</span>, and <span
+  the <span>current default path</span> or any <code>Path</code>
+  objects, and must be subject to <span title="shadows">shadow
+  effects</span>, <span title="dom-context-2d-globalAlpha">global
+  alpha</span>, the <span title="clipping region">clipping
+  region</span>, and <span
   title="dom-context-2d-globalCompositeOperation">global composition
   operators</span>. (The effect of transformations is described above
   and varies based on which path is being used.)</p>
 
   <p>Zero-length line segments must be pruned before stroking a path.
   Empty subpaths must be ignored.</p>
 
   <hr>
 
   <p id="dom-context-2d-drawosfocusring">The <dfn

|