HTML Standard Tracker

Diff (omit for latest revision)
Filter

Short URL: http://html5.org/r/7028

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
Index: source
===================================================================
--- source	(revision 7027)
+++ source	(revision 7028)
@@ -25,6 +25,7 @@
  interface HTMLCollection { }; // DOM Core
  interface DOMTokenList { }; // DOM Core
  interface DOMSettableTokenList { attribute any value; }; // DOM Core
+ interface SVGMatrix { }; // SVG
 </pre>
 <!--START complete--><!--START dev-html-->
 
@@ -3170,9 +3171,24 @@
 
    </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
@@ -40556,6 +40572,18 @@
   // 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)
@@ -40569,7 +40597,7 @@
       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);
@@ -40604,7 +40632,7 @@
   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);
@@ -40623,36 +40651,22 @@
   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")
@@ -40693,20 +40707,21 @@
   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()
@@ -40810,11 +40825,11 @@
    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">
 
@@ -40869,170 +40884,55 @@
   </div>
 
 
-  <h6><dfn title="dom-context-2d-transformation">Transformations</dfn></h6>
+  <h6><code>DrawingStyle</code> objects</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 -->
+  <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>
 
-  <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>
-
-  <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>
-   <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>
+    <p>Creates a new <code>DrawingStyle</code> object, optionally
+    using a specific element for resolving relative keywords and sizes
+    in font specifications.</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>
-
-   </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>Each <code>DrawingStyle</code> object has a <dfn>styles scope
+  node</dfn>.</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>
+  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>
 
@@ -41044,7 +40944,7 @@
    </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>
 
@@ -41059,7 +40959,7 @@
    </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>
 
@@ -41074,7 +40974,7 @@
    </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>
 
@@ -41085,13 +40985,50 @@
 
    </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>
@@ -41101,7 +41038,7 @@
   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>
@@ -41110,17 +41047,9 @@
 
   <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>,
@@ -41128,7 +41057,7 @@
   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>
@@ -41147,86 +41076,381 @@
   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>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>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>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>
 
-  <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>
+  <hr>
 
-  <p>The <code>bevel</code> value means that this is all that is
-  rendered at joins.</p>
+  <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>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>When the <dfn
+  title="dom-context-2d-setLineDash"><code>setLineDash()</code></dfn>
+  method is invoked, it must run the following steps:</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>
+  <ol>
 
-  <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>
+   <li><p>Let <var title="">a</var> be a copy of the array provided as
+   the argument.</p></li>
 
-  <p>The miter limit ratio can be explicitly set using the <dfn
-  title="dom-context-2d-miterLimit"><code>miterLimit</code></dfn>
+   <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,
-  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>
+  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>
+  title="dom-context-2d-lineDashOffset">lineDashOffset</code>
+  attribute must initially have the value <code>0.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>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.  -->
 
@@ -41238,7 +41462,7 @@
   <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>
 
@@ -41254,7 +41478,7 @@
    </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>
 
@@ -41269,7 +41493,7 @@
    </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>
 
@@ -41285,13 +41509,13 @@
 
   <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'
@@ -41341,7 +41565,7 @@
 
   </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'
@@ -41369,7 +41593,7 @@
   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>
 
@@ -41386,7 +41610,7 @@
   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>
 
@@ -41426,11 +41650,11 @@
 
   <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>
@@ -41502,7 +41726,7 @@
 
     <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
@@ -41550,7 +41774,7 @@
      <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>
 
@@ -41911,21 +42135,13 @@
   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
+  <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> of the object implementing the
-  <code>CanvasPathMethods</code> interface before they are added to
-  the path.</p>
+  matrix</span> 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
-  title="dom-context-2d-transformation">current transformation
-  matrix</span>.</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
@@ -42159,93 +42375,95 @@
 
   <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.</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>
+  <hr>
 
+  <p>The <dfn title="dom-Path-withdata"><code>Path(<var
+  title="">d</var>)</code></dfn> constructor must run the following
+  steps:</p>
 
-  <p>The <dfn title="dom-path-addPathData"><code>addPathData(<var
-  title="">d</var>)</code> method 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>
 
@@ -42256,9 +42474,8 @@
    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>
@@ -42272,8 +42489,12 @@
 
   </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>
 
@@ -42286,54 +42507,14 @@
    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 transformation matrix <var
+   title="">transform</var>, if it is not null.</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>
+   <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>
 
-   <!--
-
-    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 (<var title="">x</var>, <var title="">y</var>) be the
    last point in the last subpath of <var title="">d</var>.</p></li>
 
@@ -42346,17 +42527,21 @@
 
   </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>
@@ -42364,42 +42549,34 @@
   <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
@@ -42416,10 +42593,10 @@
   </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>
 
@@ -42430,11 +42607,11 @@
    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
@@ -42463,7 +42640,7 @@
      <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>
@@ -42529,24 +42706,15 @@
      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
@@ -42571,6 +42739,168 @@
   </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">
@@ -43076,9 +43406,9 @@
   <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
@@ -43133,18 +43463,38 @@
 
   <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>
 
 
@@ -43231,14 +43581,10 @@
     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>
 
@@ -43466,11 +43812,10 @@
 
   <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">
 
@@ -43478,7 +43823,7 @@
 
    <dd>
 
-    <p>Resets the current default path.</p>
+    <p>Resets the <span>current default path</span>.</p>
 
    </dd>
 
@@ -43487,7 +43832,7 @@
 
    <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>
 
@@ -43497,7 +43842,7 @@
 
    <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>
 
@@ -43508,7 +43853,7 @@
    <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>
@@ -43522,7 +43867,7 @@
     <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
@@ -43537,7 +43882,7 @@
 
    <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>
 
@@ -43549,8 +43894,7 @@
 
    <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>
 
@@ -43560,8 +43904,7 @@
 
    <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>
 
@@ -43571,12 +43914,13 @@
 
   <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
@@ -43584,10 +43928,11 @@
   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
@@ -43603,28 +43948,25 @@
 
   <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>

|