[html5] r7028 - [giow] (0) add dashed lines and change how Path objects work to instead use exte [...]
whatwg at whatwg.org
whatwg at whatwg.org
Mon Mar 19 15:29:21 PDT 2012
Author: ianh
Date: 2012-03-19 15:29:20 -0700 (Mon, 19 Mar 2012)
New Revision: 7028
Modified:
complete.html
index
source
Log:
[giow] (0) add dashed lines and change how Path objects work to instead use external line and font styles and transformation objects
Affected topics: Canvas, HTML
Modified: complete.html
===================================================================
--- complete.html 2012-03-13 22:54:57 UTC (rev 7027)
+++ complete.html 2012-03-19 22:29:20 UTC (rev 7028)
@@ -240,7 +240,7 @@
<header class=head id=head><p><a class=logo href=http://www.whatwg.org/><img alt=WHATWG height=101 src=/images/logo width=101></a></p>
<hgroup><h1 class=allcaps>HTML</h1>
- <h2 class="no-num no-toc">Living Standard — Last Updated 13 March 2012</h2>
+ <h2 class="no-num no-toc">Living Standard — Last Updated 19 March 2012</h2>
</hgroup><dl><dt><strong>Web developer edition:</strong></dt>
<dd><strong><a href=http://developers.whatwg.org/>http://developers.whatwg.org/</a></strong></dd>
<dt>Multiple-page version:</dt>
@@ -599,22 +599,23 @@
<li><a href=#2dcontext><span class=secno>4.8.11.1 </span>The 2D context</a>
<ol>
<li><a href=#the-canvas-state><span class=secno>4.8.11.1.1 </span>The canvas state</a></li>
- <li><a href=#transformations><span class=secno>4.8.11.1.2 </span>Transformations</a></li>
+ <li><a href=#drawingstyle-objects><span class=secno>4.8.11.1.2 </span><code>DrawingStyle</code> objects</a></li>
<li><a href=#line-styles><span class=secno>4.8.11.1.3 </span>Line styles</a></li>
<li><a href=#text-styles><span class=secno>4.8.11.1.4 </span>Text styles</a></li>
<li><a href=#building-paths><span class=secno>4.8.11.1.5 </span>Building paths</a></li>
<li><a href=#path-objects><span class=secno>4.8.11.1.6 </span><code>Path</code> objects</a></li>
- <li><a href=#fill-and-stroke-styles><span class=secno>4.8.11.1.7 </span>Fill and stroke styles</a></li>
- <li><a href=#drawing-rectangles-to-the-canvas><span class=secno>4.8.11.1.8 </span>Drawing rectangles to the canvas</a></li>
- <li><a href=#drawing-text-to-the-canvas><span class=secno>4.8.11.1.9 </span>Drawing text to the canvas</a></li>
- <li><a href=#drawing-paths-to-the-canvas><span class=secno>4.8.11.1.10 </span>Drawing paths to the canvas</a></li>
- <li><a href=#drawing-images-to-the-canvas><span class=secno>4.8.11.1.11 </span>Drawing images to the canvas</a></li>
- <li><a href=#pixel-manipulation><span class=secno>4.8.11.1.12 </span>Pixel manipulation</a></li>
- <li><a href=#compositing><span class=secno>4.8.11.1.13 </span>Compositing</a></li>
- <li><a href=#shadows><span class=secno>4.8.11.1.14 </span>Shadows</a></li>
- <li><a href=#drawing-model><span class=secno>4.8.11.1.15 </span>Drawing model</a></li>
- <li><a href=#best-practices><span class=secno>4.8.11.1.16 </span>Best practices</a></li>
- <li><a href=#examples><span class=secno>4.8.11.1.17 </span>Examples</a></ol></li>
+ <li><a href=#transformations><span class=secno>4.8.11.1.7 </span>Transformations</a></li>
+ <li><a href=#fill-and-stroke-styles><span class=secno>4.8.11.1.8 </span>Fill and stroke styles</a></li>
+ <li><a href=#drawing-rectangles-to-the-canvas><span class=secno>4.8.11.1.9 </span>Drawing rectangles to the canvas</a></li>
+ <li><a href=#drawing-text-to-the-canvas><span class=secno>4.8.11.1.10 </span>Drawing text to the canvas</a></li>
+ <li><a href=#drawing-paths-to-the-canvas><span class=secno>4.8.11.1.11 </span>Drawing paths to the canvas</a></li>
+ <li><a href=#drawing-images-to-the-canvas><span class=secno>4.8.11.1.12 </span>Drawing images to the canvas</a></li>
+ <li><a href=#pixel-manipulation><span class=secno>4.8.11.1.13 </span>Pixel manipulation</a></li>
+ <li><a href=#compositing><span class=secno>4.8.11.1.14 </span>Compositing</a></li>
+ <li><a href=#shadows><span class=secno>4.8.11.1.15 </span>Shadows</a></li>
+ <li><a href=#drawing-model><span class=secno>4.8.11.1.16 </span>Drawing model</a></li>
+ <li><a href=#best-practices><span class=secno>4.8.11.1.17 </span>Best practices</a></li>
+ <li><a href=#examples><span class=secno>4.8.11.1.18 </span>Examples</a></ol></li>
<li><a href=#color-spaces-and-color-correction><span class=secno>4.8.11.2 </span>Color spaces and color correction</a></li>
<li><a href=#security-with-canvas-elements><span class=secno>4.8.11.3 </span>Security with <code>canvas</code> elements</a></ol></li>
<li><a href=#the-map-element><span class=secno>4.8.12 </span>The <code>map</code> element</a></li>
@@ -4176,9 +4177,20 @@
</dd>
+
+<!--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 id=svgmatrix><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
@@ -34877,6 +34889,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 <a href=#dom-context-2d-scale title=dom-context-2d-scale>scale</a>(double x, double y);
+ void <a href=#dom-context-2d-rotate title=dom-context-2d-rotate>rotate</a>(double angle);
+ void <a href=#dom-context-2d-translate title=dom-context-2d-translate>translate</a>(double x, double y);
+ void <a href=#dom-context-2d-transform title=dom-context-2d-transform>transform</a>(double a, double b, double c, double d, double e, double f);
+ void <a href=#dom-context-2d-settransform title=dom-context-2d-setTransform>setTransform</a>(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 <a href=#dom-context-2d-globalalpha title=dom-context-2d-globalAlpha>globalAlpha</a>; // (default 1.0)
attribute DOMString <a href=#dom-context-2d-globalcompositeoperation title=dom-context-2d-globalCompositeOperation>globalCompositeOperation</a>; // (default source-over)
@@ -34890,7 +34914,7 @@
http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2008-August/015567.html
-->
- // colors and styles (see also the <a href=#canvaslinestyles>CanvasLineStyles</a> interface)
+ // colors and styles (see also the <a href=#canvasdrawingstyles>CanvasDrawingStyles</a> interface)
attribute any <a href=#dom-context-2d-strokestyle title=dom-context-2d-strokeStyle>strokeStyle</a>; // (default black)
attribute any <a href=#dom-context-2d-fillstyle title=dom-context-2d-fillStyle>fillStyle</a>; // (default black)
<a href=#canvasgradient>CanvasGradient</a> <a href=#dom-context-2d-createlineargradient title=dom-context-2d-createLinearGradient>createLinearGradient</a>(double x0, double y0, double x1, double y1);
@@ -34925,7 +34949,7 @@
boolean <a href=#dom-context-2d-ispointinpath title=dom-context-2d-isPointInPath>isPointInPath</a>(double x, double y);
boolean <a href=#dom-context-2d-ispointinpath title=dom-context-2d-isPointInPath>isPointInPath</a>(<a href=#path>Path</a> path, double x, double y);
- // text (see also the <a href=#canvastext>CanvasText</a> interface)
+ // text (see also the <a href=#canvasdrawingstyles>CanvasDrawingStyles</a> interface)
void <a href=#dom-context-2d-filltext title=dom-context-2d-fillText>fillText</a>(DOMString text, double x, double y, optional double maxWidth);
void <a href=#dom-context-2d-stroketext title=dom-context-2d-strokeText>strokeText</a>(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);
@@ -34944,36 +34968,22 @@
void <a href=#dom-context-2d-putimagedata title=dom-context-2d-putImageData>putImageData</a>(<a href=#imagedata>ImageData</a> imagedata, double dx, double dy);
void <a href=#dom-context-2d-putimagedata title=dom-context-2d-putImageData>putImageData</a>(<a href=#imagedata>ImageData</a> imagedata, double dx, double dy, double dirtyX, double dirtyY, double dirtyWidth, double dirtyHeight);
};
-<a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a> implements <a href=#canvastransformation>CanvasTransformation</a>;
-<a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a> implements <a href=#canvaslinestyles>CanvasLineStyles</a>;
+<a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a> implements <a href=#canvasdrawingstyles>CanvasDrawingStyles</a>;
<a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a> implements <a href=#canvaspathmethods>CanvasPathMethods</a>;
-<a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a> implements <a href=#canvastext>CanvasText</a>;
[NoInterfaceObject]
-interface <dfn id=canvastransformation>CanvasTransformation</dfn> {
- // transformations (default transform is the identity matrix)
- void <a href=#dom-context-2d-scale title=dom-context-2d-scale>scale</a>(double x, double y);
- void <a href=#dom-context-2d-rotate title=dom-context-2d-rotate>rotate</a>(double angle);
- void <a href=#dom-context-2d-translate title=dom-context-2d-translate>translate</a>(double x, double y);
- void <a href=#dom-context-2d-transform title=dom-context-2d-transform>transform</a>(double a, double b, double c, double d, double e, double f);
- void <a href=#dom-context-2d-settransform title=dom-context-2d-setTransform>setTransform</a>(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 id=canvaslinestyles>CanvasLineStyles</dfn> {
+interface <dfn id=canvasdrawingstyles>CanvasDrawingStyles</dfn> {
// line caps/joins
attribute double <a href=#dom-context-2d-linewidth title=dom-context-2d-lineWidth>lineWidth</a>; // (default 1)
attribute DOMString <a href=#dom-context-2d-linecap title=dom-context-2d-lineCap>lineCap</a>; // "butt", "round", "square" (default "butt")
attribute DOMString <a href=#dom-context-2d-linejoin title=dom-context-2d-lineJoin>lineJoin</a>; // "round", "bevel", "miter" (default "miter")
attribute double <a href=#dom-context-2d-miterlimit title=dom-context-2d-miterLimit>miterLimit</a>; // (default 10)
-};
-[NoInterfaceObject]
-interface <dfn id=canvastext>CanvasText</dfn> {
+ // dashed lines
+ void <a href=#dom-context-2d-setlinedash title=dom-context-2d-setLineDash>setLineDash</a>(sequence<double> segments); // default empty
+ sequence<double> <a href=#dom-context-2d-getlinedash title=dom-context-2d-getLineDash>getLineDash</a>();
+ attribute double <a href=#dom-context-2d-linedashoffset title=dom-context-2d-lineDashOffset>lineDashOffset</a>;
+
// text
attribute DOMString <a href=#dom-context-2d-font title=dom-context-2d-font>font</a>; // (default 10px sans-serif)
attribute DOMString <a href=#dom-context-2d-textalign title=dom-context-2d-textAlign>textAlign</a>; // "start", "end", "left", "right", "center" (default: "start")
@@ -35014,20 +35024,21 @@
readonly attribute <a href=#uint8clampedarray>Uint8ClampedArray</a> <a href=#dom-imagedata-data title=dom-imagedata-data>data</a>;
};
-[<a href=#dom-path title=dom-Path>Constructor</a>(optional <a href=#element>Element</a> scope)]
+[<a href=#dom-drawingstyle title=dom-DrawingStyle>Constructor</a>(optional <a href=#element>Element</a> scope)]
+interface <dfn id=drawingstyle>DrawingStyle</dfn> { };
+<a href=#drawingstyle>DrawingStyle</a> implements <a href=#canvasdrawingstyles>CanvasDrawingStyles</a>;
+
+[<a href=#dom-path title=dom-Path>Constructor</a>,
+ <a href=#dom-path-withdata title=dom-Path-withdata>Constructor</a>(DOMString d)]
interface <dfn id=path>Path</dfn> {
- void <a href=#dom-path-addpathdata title=dom-path-addPathData>addPathData</a>(DOMString d);
- void <a href=#dom-path-addfill title=dom-path-addFill>addFill</a>(<a href=#path>Path</a> path);
- void <a href=#dom-path-addstroke title=dom-path-addStroke>addStroke</a>(<a href=#path>Path</a> 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, <a href=#path>Path</a> path, optional double maxWidth);
- void <span title=dom-path-addStrokeText>addStrokeText</span>(DOMString text, <a href=#path>Path</a> path, optional double maxWidth);
+ void <a href=#dom-path-addpath title=dom-path-addPath>addPath</a>(<a href=#path>Path</a> path, <a href=#svgmatrix>SVGMatrix</a>? transformation);
+ void <a href=#dom-path-addpathbystrokingpath title=dom-path-addPathByStrokingPath>addPathByStrokingPath</a>(<a href=#path>Path</a> path, <a href=#canvasdrawingstyles>CanvasDrawingStyles</a> styles, <a href=#svgmatrix>SVGMatrix</a>? transformation);
+ void <a href=#dom-path-addtext title=dom-path-addText>addText</a>(DOMString text, <a href=#canvasdrawingstyles>CanvasDrawingStyles</a> styles, <a href=#svgmatrix>SVGMatrix</a>? transformation, double x, double y, optional double maxWidth);
+ void <a href=#dom-path-addpathbystrokingtext title=dom-path-addPathByStrokingText>addPathByStrokingText</a>(DOMString text, <a href=#canvasdrawingstyles>CanvasDrawingStyles</a> styles, <a href=#svgmatrix>SVGMatrix</a>? transformation, double x, double y, optional double maxWidth);
+ void <a href=#dom-path-addtext title=dom-path-addText>addText</a>(DOMString text, <a href=#canvasdrawingstyles>CanvasDrawingStyles</a> styles, <a href=#svgmatrix>SVGMatrix</a>? transformation, <a href=#path>Path</a> path, optional double maxWidth);
+ void <a href=#dom-path-addpathbystrokingtext title=dom-path-addPathByStrokingText>addPathByStrokingText</a>(DOMString text, <a href=#canvasdrawingstyles>CanvasDrawingStyles</a> styles, <a href=#svgmatrix>SVGMatrix</a>? transformation, <a href=#path>Path</a> path, optional double maxWidth);
};
-<a href=#path>Path</a> implements <a href=#canvastransformation>CanvasTransformation</a>;
-<a href=#path>Path</a> implements <a href=#canvaslinestyles>CanvasLineStyles</a>;
-<a href=#path>Path</a> implements <a href=#canvaspathmethods>CanvasPathMethods</a>;
-<a href=#path>Path</a> implements <a href=#canvastext>CanvasText</a>;</pre>
+<a href=#path>Path</a> implements <a href=#canvaspathmethods>CanvasPathMethods</a>;</pre>
<!-- ARC-ORDER note (see above):
some demos rely on the precise order of the arc() and arcTo()
@@ -35105,10 +35116,11 @@
<ul class=brief><li>The current <a href=#transformations title=dom-context-2d-transformation>transformation matrix</a>.</li>
<li>The current <a href=#clipping-region>clipping region</a>.</li>
<li>The current values of the following attributes: <code title=dom-context-2d-strokeStyle><a href=#dom-context-2d-strokestyle>strokeStyle</a></code>, <code title=dom-context-2d-fillStyle><a href=#dom-context-2d-fillstyle>fillStyle</a></code>, <code title=dom-context-2d-globalAlpha><a href=#dom-context-2d-globalalpha>globalAlpha</a></code>, <code title=dom-context-2d-lineWidth><a href=#dom-context-2d-linewidth>lineWidth</a></code>, <code title=dom-context-2d-lineCap><a href=#dom-context-2d-linecap>lineCap</a></code>, <code title=dom-context-2d-lineJoin><a href=#dom-context-2d-linejoin>lineJoin</a></code>, <code title=dom-context-2d-miterLimit><a href=#dom-context-2d-miterlimit>miterLimit</a></code>, <code title=dom-context-2d-shadowOffsetX><a href=#dom-context-2d-shadowoffsetx>shadowOffsetX</a></code>, <code title=dom-context-2d-shadowOffsetY><a href=#dom-context-2d-shadowoffsety>shadowOffsetY</a></code>, <code title=dom-context-2d-shadowBlur><a href=#dom-context-2d-shado
wblur>shadowBlur</a></code>, <code title=dom-context-2d-shadowColor><a href=#dom-context-2d-shadowcolor>shadowColor</a></code>, <code title=dom-context-2d-globalCompositeOperation><a href=#dom-context-2d-globalcompositeoperation>globalCompositeOperation</a></code>, <code title=dom-context-2d-font><a href=#dom-context-2d-font>font</a></code>, <code title=dom-context-2d-textAlign><a href=#dom-context-2d-textalign>textAlign</a></code>, <code title=dom-context-2d-textBaseline><a href=#dom-context-2d-textbaseline>textBaseline</a></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><a href=#dom-context-2d-beginpath>beginPath()</a></code> method. The
- current bitmap is a property of the canvas, not the context.</p>
+ </ul><p class=note>The <a href=#current-default-path>current default path</a> and the
+ current bitmap are not part of the drawing state. The <a href=#current-default-path>current
+ default path</a> is persistent, and can only be reset using the
+ <code title=dom-context-2d-beginPath><a href=#dom-context-2d-beginpath>beginPath()</a></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><a href=#dom-context-2d-save>save</a></code>()</dt>
@@ -35158,132 +35170,48 @@
</div>
- <h6 id=transformations><span class=secno>4.8.11.1.2 </span><dfn title=dom-context-2d-transformation>Transformations</dfn></h6>
+ <h6 id=drawingstyle-objects><span class=secno>4.8.11.1.2 </span><code><a href=#drawingstyle>DrawingStyle</a></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><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code> objects and to
+ <code><a href=#drawingstyle>DrawingStyle</a></code> objects. This section defines the
+ constructor used to obtain a <code><a href=#drawingstyle>DrawingStyle</a></code> object. This
+ object is then used by methods on <code><a href=#path>Path</a></code> objects to
+ control how text and paths are rasterised and stroked.</p>
- <div class=impl>
+ <dl class=domintro><dt><var title="">styles</var> = new <code title=dom-DrawingStyle><a href=#dom-drawingstyle>DrawingStyle</a></code>([ <var title="">element</var> ])</dt>
- <p>Any object that implements the <code><a href=#canvastransformation>CanvasTransformation</a></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><a href=#dom-context-2d-scale>scale</a></code>(<var title="">x</var>, <var title="">y</var>)</dt>
- <dt><var title="">path</var> . <code title=dom-context-2d-scale><a href=#dom-context-2d-scale>scale</a></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>
+ <p>Creates a new <code><a href=#drawingstyle>DrawingStyle</a></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><a href=#dom-context-2d-rotate>rotate</a></code>(<var title="">angle</var>)</dt>
- <dt><var title="">path</var> . <code title=dom-context-2d-rotate><a href=#dom-context-2d-rotate>rotate</a></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><a href=#dom-context-2d-translate>translate</a></code>(<var title="">x</var>, <var title="">y</var>)</dt>
- <dt><var title="">path</var> . <code title=dom-context-2d-translate><a href=#dom-context-2d-translate>translate</a></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><a href=#dom-context-2d-transform>transform</a></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><a href=#dom-context-2d-transform>transform</a></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><a href=#dom-context-2d-settransform>setTransform</a></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><a href=#dom-context-2d-settransform>setTransform</a></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 id=dom-context-2d-scale 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><a href=#drawingstyle>DrawingStyle</a></code> object has a <dfn id=styles-scope-node>styles scope
+ node</dfn>.</p>
- <p>The <dfn id=dom-context-2d-rotate 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 id=dom-drawingstyle title=dom-DrawingStyle><code>DrawingStyle()</code></dfn>
+ constructor, when invoked, must return a newly created
+ <code><a href=#drawingstyle>DrawingStyle</a></code> object. If the constructor was passed an
+ argument, then the <code><a href=#drawingstyle>DrawingStyle</a></code> object's <a href=#styles-scope-node>styles
+ scope node</a> is that element. Otherwise, the object's
+ <a href=#styles-scope-node>styles scope node</a> is the <code><a href=#document>Document</a></code> object
+ of the <a href=#active-document>active document</a> of the <a href=#browsing-context>browsing
+ context</a> of the <code><a href=#window>Window</a></code> object on which the
+ interface object of the invoked constructor is found.</p>
- <p>The <dfn id=dom-context-2d-translate 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 id=dom-context-2d-transform 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><td><var title="">b</var></td>
- <td><var title="">d</var></td>
- <td><var title="">f</var></td>
- <tr><td>0</td>
- <td>0</td>
- <td>1</td>
- </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 id=dom-context-2d-settransform 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><a href=#dom-context-2d-transform title=dom-context-2d-transform>transform</a>(<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 id=line-styles><span class=secno>4.8.11.1.3 </span>Line styles</h6>
<dl class=domintro><dt><var title="">context</var> . <code title=dom-context-2d-lineWidth><a href=#dom-context-2d-linewidth>lineWidth</a></code> [ = <var title="">value</var> ]</dt>
- <dt><var title="">path</var> . <code title=dom-context-2d-lineWidth><a href=#dom-context-2d-linewidth>lineWidth</a></code> [ = <var title="">value</var> ]</dt>
+ <dt><var title="">styles</var> . <code title=dom-context-2d-lineWidth><a href=#dom-context-2d-linewidth>lineWidth</a></code> [ = <var title="">value</var> ]</dt>
<dd>
@@ -35295,7 +35223,7 @@
</dd>
<dt><var title="">context</var> . <code title=dom-context-2d-lineCap><a href=#dom-context-2d-linecap>lineCap</a></code> [ = <var title="">value</var> ]</dt>
- <dt><var title="">path</var> . <code title=dom-context-2d-lineCap><a href=#dom-context-2d-linecap>lineCap</a></code> [ = <var title="">value</var> ]</dt>
+ <dt><var title="">styles</var> . <code title=dom-context-2d-lineCap><a href=#dom-context-2d-linecap>lineCap</a></code> [ = <var title="">value</var> ]</dt>
<dd>
@@ -35310,7 +35238,7 @@
</dd>
<dt><var title="">context</var> . <code title=dom-context-2d-lineJoin><a href=#dom-context-2d-linejoin>lineJoin</a></code> [ = <var title="">value</var> ]</dt>
- <dt><var title="">path</var> . <code title=dom-context-2d-lineJoin><a href=#dom-context-2d-linejoin>lineJoin</a></code> [ = <var title="">value</var> ]</dt>
+ <dt><var title="">styles</var> . <code title=dom-context-2d-lineJoin><a href=#dom-context-2d-linejoin>lineJoin</a></code> [ = <var title="">value</var> ]</dt>
<dd>
@@ -35325,7 +35253,7 @@
</dd>
<dt><var title="">context</var> . <code title=dom-context-2d-miterLimit><a href=#dom-context-2d-miterlimit>miterLimit</a></code> [ = <var title="">value</var> ]</dt>
- <dt><var title="">path</var> . <code title=dom-context-2d-miterLimit><a href=#dom-context-2d-miterlimit>miterLimit</a></code> [ = <var title="">value</var> ]</dt>
+ <dt><var title="">styles</var> . <code title=dom-context-2d-miterLimit><a href=#dom-context-2d-miterlimit>miterLimit</a></code> [ = <var title="">value</var> ]</dt>
<dd>
@@ -35336,11 +35264,48 @@
</dd>
+
+ <dt><var title="">context</var> . <code title=dom-context-2d-setLineDash><a href=#dom-context-2d-setlinedash>setLineDash</a></code>(<var title="">segments</var>)</dt>
+ <dt><var title="">styles</var> . <code title=dom-context-2d-setLineDash><a href=#dom-context-2d-setlinedash>setLineDash</a></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><a href=#dom-context-2d-getlinedash>getLineDash</a></code>()</dt>
+ <dt><var title="">segments</var> = <var title="">styles</var> . <code title=dom-context-2d-getLineDash><a href=#dom-context-2d-getlinedash>getLineDash</a></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><a href=#dom-context-2d-linedashoffset>lineDashOffset</a></code></dt>
+ <dt><var title="">styles</var> . <code title=dom-context-2d-lineDashOffset><a href=#dom-context-2d-linedashoffset>lineDashOffset</a></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><a href=#canvaslinestyles>CanvasLineStyles</a></code>
- interface have attributes (defined in this section) that control how
- lines are treated by the object.</p>
+ <p>Objects that implement the <code><a href=#canvasdrawingstyles>CanvasDrawingStyles</a></code>
+ interface have attributes and methods (defined in this section) that
+ control how lines are treated by the object.</p>
<p>The <dfn id=dom-context-2d-linewidth title=dom-context-2d-lineWidth><code>lineWidth</code></dfn>
attribute gives the width of lines, in coordinate space units. On
@@ -35349,22 +35314,14 @@
value unchanged; other values must change the current value to the
new value.</p>
- <p>When the object implementing the <code><a href=#canvaslinestyles>CanvasLineStyles</a></code>
+ <p>When the object implementing the <code><a href=#canvasdrawingstyles>CanvasDrawingStyles</a></code>
interface is created, the <code title=dom-context-2d-lineWidth><a href=#dom-context-2d-linewidth>lineWidth</a></code> attribute must
initially have the value <code>1.0</code>.</p>
<hr><p>The <dfn id=dom-context-2d-linecap 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>,
@@ -35372,7 +35329,7 @@
must be changed to the new value; other values must ignored, leaving
the value unchanged.</p>
- <p>When the object implementing the <code><a href=#canvaslinestyles>CanvasLineStyles</a></code>
+ <p>When the object implementing the <code><a href=#canvasdrawingstyles>CanvasDrawingStyles</a></code>
interface is created, the <code title=dom-context-2d-lineCap><a href=#dom-context-2d-linecap>lineCap</a></code> attribute must
initially have the value <code>butt</code>.</p>
@@ -35387,90 +35344,331 @@
must be changed to the new value; other values must be ignored,
leaving the value unchanged.</p>
- <p>When the object implementing the <code><a href=#canvaslinestyles>CanvasLineStyles</a></code>
+ <p>When the object implementing the <code><a href=#canvasdrawingstyles>CanvasDrawingStyles</a></code>
interface is created, the <code title=dom-context-2d-lineJoin><a href=#dom-context-2d-linejoin>lineJoin</a></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>
+ <hr><p>When the <code title=dom-context-2d-lineJoin><a href=#dom-context-2d-linejoin>lineJoin</a></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 id=dom-context-2d-miterlimit 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><a href=#canvasdrawingstyles>CanvasDrawingStyles</a></code>
+ interface is created, the <code title=dom-context-2d-miterLimit><a href=#dom-context-2d-miterlimit>miterLimit</a></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><a href=#dom-context-2d-linejoin>lineJoin</a></code> attribute controls
- whether anything else is rendered. The three aforementioned values
- have the following meanings:</p>
+ <hr><p>Each <code><a href=#canvasdrawingstyles>CanvasDrawingStyles</a></code> object has a <dfn id=dash-list>dash
+ list</dfn>, which is either empty or consists of an even number of
+ positive non-zero numbers. Initially, the <a href=#dash-list>dash list</a>
+ must be empty.</p>
- <p>The <code>bevel</code> value means that this is all that is
- rendered at joins.</p>
+ <p>When the <dfn id=dom-context-2d-setlinedash title=dom-context-2d-setLineDash><code>setLineDash()</code></dfn>
+ method is invoked, it must run the following steps:</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>
+ <ol><li><p>Let <var title="">a</var> be a copy of the array provided as
+ the argument.</li>
- <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>
+ <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.</li>
- <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>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>.</li>
- <p>The miter limit ratio can be explicitly set using the <dfn id=dom-context-2d-miterlimit title=dom-context-2d-miterLimit><code>miterLimit</code></dfn>
+ <li><p>Let the object's <a href=#dash-list>dash list</a> be <var title="">a</var>.</li>
+
+ </ol><p>When the <dfn id=dom-context-2d-getlinedash 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 <a href=#dash-list>dash list</a>, 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 id=dom-context-2d-linedashoffset 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><a href=#canvaslinestyles>CanvasLineStyles</a></code>
- interface is created, the <code title=dom-context-2d-miterLimit><a href=#dom-context-2d-miterlimit>miterLimit</a></code> attribute must
- initially have the value <code>10.0</code>.</p>
+ <p>When the object implementing the <code><a href=#canvasdrawingstyles>CanvasDrawingStyles</a></code>
+ interface is created, the <code title=dom-context-2d-lineDashOffset><a href=#dom-context-2d-linedashoffset>lineDashOffset</a></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 id=trace-a-path>trace a <span>path</span></dfn>,
+ given an object <var title="">style</var> that implements the
+ <code><a href=#canvasdrawingstyles>CanvasDrawingStyles</a></code> interface, it must run the following
+ algorith. This algorithm returns a new <a href=#path>path</a>.</p>
-<!--v6: Another request has been for hairline width lines, that remain
-hairline width with transform. ack Shaun Morris. -->
+ <ol><li><p>Let <var title="">path</var> be a copy of the path being
+ traced.</li>
- </div>
+ <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).</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.</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> <a href=#dash-list>dash list</a> is
+ empty, jump to the step labeled <i>joins</i>.</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.</li>
+
+ <li><p>Let <var title="">offset</var> be the value of the <var title="">styles</var> <code title=dom-context-2d-lineDashOffset><a href=#dom-context-2d-linedashoffset>lineDashOffset</a></code>, in
+ coordinate space units.</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>.</li>
+
+ <li><p>Let <var title="">position</var> be 0.</li>
+
+ <li><p>Let <var title="">index</var> be 0.</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>).</li>
+
+ <li><p><i>Dash On</i>: Let <var title="">segment length</var> be
+ the value of the <var title="">styles</var> <a href=#dash-list>dash
+ list</a>'s <var title="">index</var>th entry.</li>
+
+ <li><p>Increment <var title="">position</var> by <var title="">segment length</var>.</li>
+
+ <li><p>If <var title="">position</var> is greater than <var title="">width</var>, then jump to the step labeled
+ <i>joins</i>.</li>
+
+ <li><p>If <var title="">segment length</var> is non-zero, let <var title="">current state</var> be <i>on</i>.</li>
+
+ <li><p>Increment <var title="">index</var> by one.</li>
+
+ <li><p><i>Dash Off</i>: Let <var title="">segment length</var> be
+ the value of the <var title="">styles</var> <a href=#dash-list>dash
+ list</a>'s <var title="">index</var>th entry.</li>
+
+ <li><p>Let <var title="">start</var> be the offset <var title="">position</var> on <var title="">L</var>.</li>
+
+ <li><p>Increment <var title="">position</var> by <var title="">segment length</var>.</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>.</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>.</li>
+
+ <li><p>If <var title="">segment length</var> is greater than zero,
+ let <var title="">positioned-at-on-dash</var> be false.</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>
+ <a href=#dash-list>dash list</a>, then let <var title="">index</var> be
+ 0.</li>
+
+ <li><p>Return to the step labeled <i>dash on</i>.</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.</li>
+
+ <li>
+
+ <p>Create a new <a href=#path>path</a> 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><a href=#dom-context-2d-linewidth>lineWidth</a></code> width, replacing
+ each point with the end cap necessary to satisfy the <var title="">styles</var> <code title=dom-context-2d-lineCap><a href=#dom-context-2d-linecap>lineCap</a></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><a href=#dom-context-2d-linejoin>lineJoin</a></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><a href=#dom-context-2d-linecap>lineCap</a></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><a href=#dom-context-2d-linewidth>lineWidth</a></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><a href=#dom-context-2d-linewidth>lineWidth</a></code> width and the
+ width of half the <var title="">styles</var> <code title=dom-context-2d-lineWidth><a href=#dom-context-2d-linewidth>lineWidth</a></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><a href=#dom-context-2d-linejoin>lineJoin</a></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><a href=#dom-context-2d-miterlimit>miterLimit</a></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.</li>
+
+ </ol><!--v6: Another request has been for hairline width lines, that remain
+hairline width with transform. ack Shaun Morris. --></div>
+
+
<h6 id=text-styles><span class=secno>4.8.11.1.4 </span>Text styles</h6>
<dl class=domintro><dt><var title="">context</var> . <code title=dom-context-2d-font><a href=#dom-context-2d-font>font</a></code> [ = <var title="">value</var> ]</dt>
- <dt><var title="">path</var> . <code title=dom-context-2d-font><a href=#dom-context-2d-font>font</a></code> [ = <var title="">value</var> ]</dt>
+ <dt><var title="">styles</var> . <code title=dom-context-2d-font><a href=#dom-context-2d-font>font</a></code> [ = <var title="">value</var> ]</dt>
<dd>
@@ -35486,7 +35684,7 @@
</dd>
<dt><var title="">context</var> . <code title=dom-context-2d-textAlign><a href=#dom-context-2d-textalign>textAlign</a></code> [ = <var title="">value</var> ]</dt>
- <dt><var title="">path</var> . <code title=dom-context-2d-textAlign><a href=#dom-context-2d-textalign>textAlign</a></code> [ = <var title="">value</var> ]</dt>
+ <dt><var title="">styles</var> . <code title=dom-context-2d-textAlign><a href=#dom-context-2d-textalign>textAlign</a></code> [ = <var title="">value</var> ]</dt>
<dd>
@@ -35499,7 +35697,7 @@
</dd>
<dt><var title="">context</var> . <code title=dom-context-2d-textBaseline><a href=#dom-context-2d-textbaseline>textBaseline</a></code> [ = <var title="">value</var> ]</dt>
- <dt><var title="">path</var> . <code title=dom-context-2d-textBaseline><a href=#dom-context-2d-textbaseline>textBaseline</a></code> [ = <var title="">value</var> ]</dt>
+ <dt><var title="">styles</var> . <code title=dom-context-2d-textBaseline><a href=#dom-context-2d-textbaseline>textBaseline</a></code> [ = <var title="">value</var> ]</dt>
<dd>
@@ -35513,13 +35711,13 @@
</dl><div class=impl>
- <p>Objects that implement the <code><a href=#canvastext>CanvasText</a></code> interface have
- attributes (defined in this section) that control how text is laid
- out (rasterized or outlined) by the object. Such objects also have a
- <dfn id=font-style-source-node>font style source node</dfn>. For
+ <p>Objects that implement the <code><a href=#canvasdrawingstyles>CanvasDrawingStyles</a></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 id=font-style-source-node>font style source node</dfn>. For
<code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code> objects, this is the
- <code><a href=#the-canvas-element>canvas</a></code> element. For <code><a href=#path>Path</a></code> objects, it's the
- <a href=#path-scope-node>path scope node</a>.</p>
+ <code><a href=#the-canvas-element>canvas</a></code> element. For <code><a href=#drawingstyle>DrawingStyle</a></code> objects,
+ it's the <a href=#styles-scope-node>styles scope node</a>.</p>
<p>The <dfn id=dom-context-2d-font title=dom-context-2d-font><code>font</code></dfn> IDL
attribute, on setting, must be parsed the same way as the 'font'
@@ -35566,7 +35764,7 @@
</div>
- <p>When the object implementing the <code><a href=#canvastext>CanvasText</a></code>
+ <p>When the object implementing the <code><a href=#canvasdrawingstyles>CanvasDrawingStyles</a></code>
interface is created, the font of the context must be set to 10px
sans-serif. When the 'font-size' component is set to lengths using
percentages, 'em' or 'ex' units, or the 'larger' or 'smaller'
@@ -35591,7 +35789,7 @@
the value is one of <code title="">start</code>, <code title="">end</code>, <code title="">left</code>, <code title="">right</code>, or <code title="">center</code>, then the
value must be changed to the new value. Otherwise, the new value
must be ignored. When the object implementing the
- <code><a href=#canvastext>CanvasText</a></code> interface is created, the <code title=dom-context-2d-textAlign><a href=#dom-context-2d-textalign>textAlign</a></code> attribute must
+ <code><a href=#canvasdrawingstyles>CanvasDrawingStyles</a></code> interface is created, the <code title=dom-context-2d-textAlign><a href=#dom-context-2d-textalign>textAlign</a></code> attribute must
initially have the value <code title="">start</code>.</p>
<p>The <dfn id=dom-context-2d-textbaseline title=dom-context-2d-textBaseline><code>textBaseline</code></dfn>
@@ -35601,7 +35799,7 @@
or <code title=dom-context-2d-textBaseline-bottom><a href=#dom-context-2d-textbaseline-bottom>bottom</a></code>,
then the value must be changed to the new value. Otherwise, the new
value must be ignored. When the object implementing the
- <code><a href=#canvastext>CanvasText</a></code> interface is created, the <code title=dom-context-2d-textBaseline><a href=#dom-context-2d-textbaseline>textBaseline</a></code> attribute
+ <code><a href=#canvasdrawingstyles>CanvasDrawingStyles</a></code> interface is created, the <code title=dom-context-2d-textBaseline><a href=#dom-context-2d-textbaseline>textBaseline</a></code> attribute
must initially have the value <code title="">alphabetic</code>.</p>
</div>
@@ -35636,11 +35834,11 @@
</dl><p>The <dfn id=text-preparation-algorithm>text preparation algorithm</dfn> is as follows. It takes
as input a string <var title="">text</var>, a
- <code><a href=#canvastext>CanvasText</a></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><a href=#center>center</a></i>. (Most callers of this
+ <code><a href=#canvasdrawingstyles>CanvasDrawingStyles</a></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
@@ -35702,7 +35900,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><a href=#center>center</a></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><a href=#dom-context-2d-textalign>textAlign</a></code> and <code title=dom-context-2d-textBaseline><a href=#dom-context-2d-textbaseline>textBaseline</a></code> values as
follows:</p>
@@ -35744,7 +35942,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><a href=#center>center</a></i>.</dd>
+ <i title="">center</i>.</dd>
</dl><p>Vertical position:</p>
@@ -36069,18 +36267,12 @@
<p>The following methods allow authors to manipulate the <a href=#concept-path title=concept-path>paths</a> of objects implementing the
<code><a href=#canvaspathmethods>CanvasPathMethods</a></code> interface.</p>
- <p>The points and lines added to an object's <a href=#concept-path title=concept-path>path</a> by these methods must be
- transformed according to the <a href=#transformations title=dom-context-2d-transformation>current transformation
- matrix</a> of the object implementing the
- <code><a href=#canvaspathmethods>CanvasPathMethods</a></code> interface before they are added to
- the path.</p>
+ <p>For <code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code> objects, the points and
+ lines added to <a href=#current-default-path>current default path</a> by these methods
+ must be transformed according to the <a href=#transformations title=dom-context-2d-transformation>current transformation
+ matrix</a> before they are added to the path.</p>
- <p class=note>All objects implementing the
- <code><a href=#canvaspathmethods>CanvasPathMethods</a></code> interface also implement the
- <code><a href=#canvastransformation>CanvasTransformation</a></code> interface, and thus have a <a href=#transformations title=dom-context-2d-transformation>current transformation
- matrix</a>.</p>
-
<p>The <dfn id=dom-context-2d-moveto 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>
@@ -36246,93 +36438,90 @@
<code><a href=#path>Path</a></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><a href=#dom-path>Path</a></code>([ <var title="">element</var> ])</dt>
+ <dl class=domintro><dt><var title="">path</var> = new <code title=dom-Path><a href=#dom-path>Path</a></code>()</dt>
<dd>
- <p>Creates a new <code><a href=#path>Path</a></code> object, optionally using a specific element for resolving relative keywords and sizes in font specifications.</p>
+ <p>Creates a new empty <code><a href=#path>Path</a></code> object.</p>
</dd>
- <dt><var title="">path</var> . <code title=dom-path-addPathData><a href=#dom-path-addpathdata>addPathData</a></code>(<var title="">d</var>)</dt>
+ <dt><var title="">path</var> = new <code title=dom-Path-withdata><a href=#dom-path-withdata>Path</a></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><a href=#dom-path-addfill>addFill</a></code>(<var title="">path</var>)</dt>
- <dt><var title="">path</var> . <code title=dom-path-addStroke><a href=#dom-path-addstroke>addStroke</a></code>(<var title="">path</var>)</dt>
+ <dt><var title="">path</var> . <code title=dom-path-addPath><a href=#dom-path-addpath>addPath</a></code>(<var title="">path</var>, <var title="">transform</var>)</dt>
+ <dt><var title="">path</var> . <code title=dom-path-addPathByStrokingPath><a href=#dom-path-addpathbystrokingpath>addPathByStrokingPath</a></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><a href=#drawingstyle>DrawingStyle</a></code> object or a <code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></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><a href=#dom-path-addtext>addText</a></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><a href=#dom-path-addtext>addText</a></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><a href=#dom-path-addpathbystrokingtext>addPathByStrokingText</a></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><a href=#dom-path-addpathbystrokingtext>addPathByStrokingText</a></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><a href=#drawingstyle>DrawingStyle</a></code> object or a <code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code> object.</p>
+
</dd>
</dl><div class=impl>
- <p>Each <code><a href=#path>Path</a></code> object has a <dfn id=path-scope-node>path scope node</dfn>.</p>
+ <p>The <dfn id=dom-path title=dom-Path><code>Path()</code></dfn> constructor,
+ when invoked, must return a newly created <code><a href=#path>Path</a></code>
+ object.</p>
- <p>The <dfn id=dom-path title=dom-path><code>Path()</code></dfn> constructor,
- when invoked, must return a newly created <code><a href=#path>Path</a></code> object.
- If the constructor was passed an argument, then the
- <code><a href=#path>Path</a></code> object's <a href=#path-scope-node>path scope node</a> is that
- element. Otherwise, the object's <a href=#path-scope-node>path scope node</a> is
- the <code><a href=#document>Document</a></code> object of the <a href=#active-document>active
- document</a> of the <a href=#browsing-context>browsing context</a> of the
- <code><a href=#window>Window</a></code> object on which the interface object of the
- invoked constructor is found.</p>
+ <hr><p>The <dfn id=dom-path-withdata title=dom-Path-withdata><code>Path(<var title="">d</var>)</code></dfn> constructor must run the following
+ steps:</p>
+ <ol><li>
- <p>The <dfn id=dom-path-addpathdata title=dom-path-addPathData><code>addPathData(<var title="">d</var>)</code> method must run the following steps:</dfn></p>
+ <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>
- <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></li>
+ <p class=note>The resulting path could be empty. SVG defines
+ error handling rules for parsing and applying path data.</p>
- <li><p>If this failed in some way, then throw a
- <code><a href=#syntaxerror>SyntaxError</a></code> exception, and abort these steps.</li>
+ </li>
- <li><p>Transform all the coordinates and lines in the SVG path by
- the <a href=#transformations title=dom-context-2d-transformation>current
- transformation matrix</a> of the <code><a href=#path>Path</a></code>
- object.</li>
-
<li><p>Let (<var title="">x</var>, <var title="">y</var>) be the
last point in the SVG path.</li>
- <li><p>Add all the subpaths in the SVG path, if any, to the
- <code><a href=#path>Path</a></code> object. </p>
+ <li><p>Create a new <code><a href=#path>Path</a></code> object and add all the
+ subpaths in the SVG path, if any, to that <code><a href=#path>Path</a></code> object.
+ </p>
<li><p>Create a new subpath in the <code><a href=#path>Path</a></code> object with
(<var title="">x</var>, <var title="">y</var>) as the only point in
the subpath.</li>
- </ol><p>The <dfn id=dom-path-addfill title=dom-path-addFill><code>addFill(<var title="">b</var>)</code></dfn> method, when invoked on a
- <code><a href=#path>Path</a></code> object <var title="">a</var>, must run the
- following steps:</p>
+ <li><p>Return the <code><a href=#path>Path</a></code> object as the constructed
+ object.</li>
+ </ol><hr><p>The <dfn id=dom-path-addpath title=dom-path-addPath><code>addPath(<var title="">b</var>, <var title="">transform</var>)</code></dfn>
+ method, when invoked on a <code><a href=#path>Path</a></code> object <var title="">a</var>, must run the following steps:</p>
+
<ol><li><p>If the <code><a href=#path>Path</a></code> object <var title="">b</var> has
no subpaths, abort these steps.</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>.</li>
- <li><p>Transform all the coordinates and lines in <var title="">c</var> by the <a href=#transformations title=dom-context-2d-transformation>current transformation
- matrix</a> of <var title="">a</var>.</li>
+ <li><p>Transform all the coordinates and lines in <var title="">c</var> by the transform matrix <var title="">transform</var>, if it is not null.</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>.</li>
@@ -36342,7 +36531,7 @@
<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.</li>
- </ol><p>The <dfn id=dom-path-addstroke title=dom-path-addStroke><code>addStroke(<var title="">b</var>)</code></dfn> method, when invoked on a
+ </ol><hr><p>The <dfn id=dom-path-addpathbystrokingpath 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><a href=#path>Path</a></code> object <var title="">a</var>, must run the
following steps:</p>
@@ -36352,49 +36541,12 @@
<li><p>Create a copy of all the subpaths in <var title="">b</var>.
Let this copy be known as <var title="">c</var>.</li>
- <li><p>Transform all the coordinates and lines in <var title="">c</var> by the <a href=#transformations title=dom-context-2d-transformation>current transformation
- matrix</a> of <var title="">a</var>.</li>
+ <li><p>Transform all the coordinates and lines in <var title="">c</var> by transformation matrix <var title="">transform</var>, if it is not null.</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><a href=#dom-context-2d-linewidth>lineWidth</a></code>, <code title=dom-context-2d-lineCap><a href=#dom-context-2d-linecap>lineCap</a></code>, <code title=dom-context-2d-lineJoin><a href=#dom-context-2d-linejoin>lineJoin</a></code>, and (if
- appropriate) <code title=dom-context-2d-miterLimit><a href=#dom-context-2d-miterlimit>miterLimit</a></code> attributes).
- 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 <a href=#trace-a-path title="trace a path">tracing</a> <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>.</li>
@@ -36403,43 +36555,41 @@
<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.</li>
- </ol><p>The <dfn id=dom-context-2d-addfilltext title=dom-context-2d-addFillText><code>addFillText()</code></dfn> and
- <dfn id=dom-context-2d-addstroketext title=dom-context-2d-addStrokeText><code>addStrokeText()</code></dfn>
+ </ol><hr><p>The <dfn id=dom-path-addtext title=dom-path-addText><code>addText()</code></dfn>
+ and <dfn id=dom-path-addpathbystrokingtext 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><a href=#canvasdrawingstyles>CanvasDrawingStyles</a></code> object
+ argument for the text and (if appropriate) line styles to use, an
+ <code><a href=#svgmatrix>SVGMatrix</a></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><a href=#dom-context-2d-addstroketext>addFillText()</a></code> and <code title=dom-context-2d-addStrokeText><a href=#dom-context-2d-addstroketext>addStrokeText()</a></code> variants
+ <p>When one of the <code title=dom-path-addText><a href=#dom-path-addtext>addText()</a></code> and <code title=dom-path-addPathByStrokingText><a href=#dom-path-addpathbystrokingtext>addPathByStrokingText()</a></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 <a href=#text-preparation-algorithm>text preparation algorithm</a>, passing it
- <var title="">text</var>, the <code><a href=#path>Path</a></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><a href=#canvasdrawingstyles>CanvasDrawingStyles</a></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.</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
+ <a href=#path>path</a> 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><a href=#dom-context-2d-addstroketext>addStrokeText()</a></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><a href=#path>Path</a></code> object (the <code title=dom-context-2d-lineWidth><a href=#dom-context-2d-linewidth>lineWidth</a></code>, <code title=dom-context-2d-lineCap><a href=#dom-context-2d-linecap>lineCap</a></code>, <code title=dom-context-2d-lineJoin><a href=#dom-context-2d-linejoin>lineJoin</a></code>, and (if
- appropriate) <code title=dom-context-2d-miterLimit><a href=#dom-context-2d-miterlimit>miterLimit</a></code> attributes).
- These subpaths in <var title="">glyph subpaths</var> must also all
- wind clockwise.</p>
+ <li><p>If the method is <code title=dom-path-addPathByStrokingText><a href=#dom-path-addpathbystrokingtext>addPathByStrokingText()</a></code>,
+ replace <var title="">glyph subpaths</var> by the result of <a href=#trace-a-path title="trace a path">tracing</a> <var title="">glyph
+ subpaths</var>, using the <code><a href=#canvasdrawingstyles>CanvasDrawingStyles</a></code> object
+ argument for the line styles.</p>
- <li><p>Transform all the coordinates and lines in <var title="">glyph subpaths</var> by the <a href=#transformations title=dom-context-2d-transformation>current transformation
- matrix</a> of the <code><a href=#path>Path</a></code> object.</li>
+ <li><p>Transform all the coordinates and lines in <var title="">glyph subpaths</var> by the transformation matrix <var title="">transform</var>, if it is not null.</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>.</li>
@@ -36451,9 +36601,9 @@
(<var title="">x<sub title="">final</sub></var>, <var title="">y<sub title="">final</sub></var>) as the only point in the
subpath.</li>
- </ol><p>When one of the <code title=dom-context-2d-addFillText><a href=#dom-context-2d-addfilltext>addFillText()</a></code> and <code title=dom-context-2d-addStrokeText><a href=#dom-context-2d-addstroketext>addStrokeText()</a></code> variants
- that take as argument a <code><a href=#path>Path</a></code> object is invoked, the
- method must run the following algorithm:</p>
+ </ol><p>When one of the <code title=dom-path-addText><a href=#dom-path-addtext>addText()</a></code> and <code title=dom-path-addPathByStrokingText><a href=#dom-path-addpathbystrokingtext>addPathByStrokingText()</a></code>
+ variants that take as argument a <code><a href=#path>Path</a></code> object is
+ invoked, the method must run the following algorithm:</p>
<ol><li><p>Let <var title="">target</var> be the <code><a href=#path>Path</a></code>
object on which the method was invoked.</li>
@@ -36462,10 +36612,11 @@
that was provided in the method's arguments.</li>
<li><p>Run the <a href=#text-preparation-algorithm>text preparation algorithm</a>, 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><a href=#canvasdrawingstyles>CanvasDrawingStyles</a></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
@@ -36492,7 +36643,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><a href=#center>center</a></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>
@@ -36541,20 +36692,12 @@
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><a href=#dom-context-2d-addstroketext>addStrokeText()</a></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><a href=#dom-context-2d-linewidth>lineWidth</a></code>,
- <code title=dom-context-2d-lineCap><a href=#dom-context-2d-linecap>lineCap</a></code>, <code title=dom-context-2d-lineJoin><a href=#dom-context-2d-linejoin>lineJoin</a></code>, and (if
- appropriate) <code title=dom-context-2d-miterLimit><a href=#dom-context-2d-miterlimit>miterLimit</a></code> attributes).
- These subpaths in <var title="">glyph subpaths</var> must also
- all wind clockwise.</p>
+ <li><p>If the method is <code title=dom-path-addPathByStrokingText><a href=#dom-path-addpathbystrokingtext>addPathByStrokingText()</a></code>,
+ replace <var title="">glyph subpaths</var> by the result of <a href=#trace-a-path title="trace a path">tracing</a> <var title="">glyph
+ subpaths</var>, using the <code><a href=#canvasdrawingstyles>CanvasDrawingStyles</a></code> object
+ argument for the line styles.</p>
- <li><p>Transform all the coordinates and lines in <var title="">glyph subpaths</var> by the <a href=#transformations title=dom-context-2d-transformation>current transformation
- matrix</a> of <var title="">target</var>.</li>
+ <li><p>Transform all the coordinates and lines in <var title="">glyph subpaths</var> by the transformation matrix <var title="">transform</var>, if it is not null.</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
@@ -36573,8 +36716,134 @@
</ol></div>
- <h6 id=fill-and-stroke-styles><span class=secno>4.8.11.1.7 </span>Fill and stroke styles</h6>
+ <h6 id=transformations><span class=secno>4.8.11.1.7 </span><dfn title=dom-context-2d-transformation>Transformations</dfn></h6>
+
+ <p>Each <code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code> object has a
+ <i>current transformation matrix</i>, as well as methods (described
+ in this section) to manipulate it. When a
+ <code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></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 <a href=#current-default-path>current default path</a>, and when painting text,
+ shapes, and <code><a href=#path>Path</a></code> objects, on
+ <code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code> objects.</p> <!-- conformance
+ criteria for actual drawing are described in the various sections
+ below -->
+
+ <p class=note>Most of the API uses <code><a href=#svgmatrix>SVGMatrix</a></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><a href=#dom-context-2d-scale>scale</a></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><a href=#dom-context-2d-rotate>rotate</a></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><a href=#dom-context-2d-translate>translate</a></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><a href=#dom-context-2d-transform>transform</a></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><a href=#dom-context-2d-settransform>setTransform</a></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 id=dom-context-2d-scale 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 id=dom-context-2d-rotate 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 id=dom-context-2d-translate 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 id=dom-context-2d-transform 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><td><var title="">b</var></td>
+ <td><var title="">d</var></td>
+ <td><var title="">f</var></td>
+ <tr><td>0</td>
+ <td>0</td>
+ <td>1</td>
+ </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 id=dom-context-2d-settransform 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><a href=#dom-context-2d-transform title=dom-context-2d-transform>transform</a>(<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 id=fill-and-stroke-styles><span class=secno>4.8.11.1.8 </span>Fill and stroke styles</h6>
+
<dl class=domintro><dt><var title="">context</var> . <code title=dom-context-2d-fillStyle><a href=#dom-context-2d-fillstyle>fillStyle</a></code> [ = <var title="">value</var> ]</dt>
<dd>
@@ -36966,7 +37235,7 @@
- <h6 id=drawing-rectangles-to-the-canvas><span class=secno>4.8.11.1.8 </span>Drawing rectangles to the canvas</h6>
+ <h6 id=drawing-rectangles-to-the-canvas><span class=secno>4.8.11.1.9 </span>Drawing rectangles to the canvas</h6>
<p>There are three methods that immediately draw rectangles to the
bitmap. They each take four arguments; the first two give the <var title="">x</var> and <var title="">y</var> coordinates of the top
@@ -36983,9 +37252,9 @@
<span title=""><var title="">y</var>+<var title="">h</var></span>)</span>,
<span title="">(<var title="">x</var>, <span title=""><var title="">y</var>+<var title="">h</var></span>)</span>.</p>
- <p>Shapes are painted without affecting the current default path,
- and are subject to the <a href=#clipping-region title="clipping region">clipping
- region</a>, and, with the exception of <code title=dom-context-2d-clearRect><a href=#dom-context-2d-clearrect>clearRect()</a></code>, also <a href=#shadows title=shadows>shadow effects</a>, <a href=#dom-context-2d-globalalpha title=dom-context-2d-globalAlpha>global alpha</a>, and <a href=#dom-context-2d-globalcompositeoperation title=dom-context-2d-globalCompositeOperation>global composition
+ <p>Shapes are painted without affecting the <a href=#current-default-path>current default
+ path</a>, and are subject to the <a href=#clipping-region title="clipping
+ region">clipping region</a>, and, with the exception of <code title=dom-context-2d-clearRect><a href=#dom-context-2d-clearrect>clearRect()</a></code>, also <a href=#shadows title=shadows>shadow effects</a>, <a href=#dom-context-2d-globalalpha title=dom-context-2d-globalAlpha>global alpha</a>, and <a href=#dom-context-2d-globalcompositeoperation title=dom-context-2d-globalCompositeOperation>global composition
operators</a>.</p>
</div>
@@ -37025,19 +37294,28 @@
rectangular area using the <code title=dom-context-2d-fillStyle><a href=#dom-context-2d-fillstyle>fillStyle</a></code>. If either height
or width are zero, this method has no effect.</p>
- <p>The <dfn id=dom-context-2d-strokerect title=dom-context-2d-strokeRect><code>strokeRect(<var title="">x</var>, <var title="">y</var>, <var title="">w</var>, <var title="">h</var>)</code></dfn> method must stroke the specified
- rectangle's path using the <code title=dom-context-2d-strokeStyle><a href=#dom-context-2d-strokestyle>strokeStyle</a></code>, <code title=dom-context-2d-lineWidth><a href=#dom-context-2d-linewidth>lineWidth</a></code>, <code title=dom-context-2d-lineJoin><a href=#dom-context-2d-linejoin>lineJoin</a></code>, and (if
- appropriate) <code title=dom-context-2d-miterLimit><a href=#dom-context-2d-miterlimit>miterLimit</a></code> attributes. If
- both height and width are zero, this method has no effect, since
- there is no path to stroke (it's a point). If only one of the two is
- zero, then the method will draw a line instead (the path for the
- outline is just a straight line along the non-zero dimension).</p>
+ <p>The <dfn id=dom-context-2d-strokerect title=dom-context-2d-strokeRect><code>strokeRect(<var title="">x</var>, <var title="">y</var>, <var title="">w</var>, <var title="">h</var>)</code></dfn> method must take the result of <a href=#trace-a-path title="trace a path">tracing the path</a> described below, using
+ the <code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code> object's line styles, and
+ fill it with the <code title=dom-context-2d-strokeStyle><a href=#dom-context-2d-strokestyle>strokeStyle</a></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 <a href=#trace-a-path>trace a path</a> 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 id=drawing-text-to-the-canvas><span class=secno>4.8.11.1.9 </span>Drawing text to the canvas</h6>
+ <h6 id=drawing-text-to-the-canvas><span class=secno>4.8.11.1.10 </span>Drawing text to the canvas</h6>
<dl class=domintro><dt><var title="">context</var> . <code title=dom-context-2d-fillText><a href=#dom-context-2d-filltext>fillText</a></code>(<var title="">text</var>, <var title="">x</var>, <var title="">y</var> [, <var title="">maxWidth</var> ] )</dt>
<dt><var title="">context</var> . <code title=dom-context-2d-strokeText><a href=#dom-context-2d-stroketext>strokeText</a></code>(<var title="">text</var>, <var title="">x</var>, <var title="">y</var> [, <var title="">maxWidth</var> ] )</dt>
@@ -37100,9 +37378,10 @@
<code title=dom-context-2d-fillStyle><a href=#dom-context-2d-fillstyle>fillStyle</a></code> must be
applied to the shapes and <code title=dom-context-2d-strokeStyle><a href=#dom-context-2d-strokestyle>strokeStyle</a></code> must be
ignored. For <code title=dom-context-2d-strokeText><a href=#dom-context-2d-stroketext>strokeText()</a></code>, the reverse
- holds and <code title=dom-context-2d-strokeStyle><a href=#dom-context-2d-strokestyle>strokeStyle</a></code> must be
- applied to the shape outlines, along with the <code title=dom-context-2d-lineWidth><a href=#dom-context-2d-linewidth>lineWidth</a></code>, <code title=dom-context-2d-lineCap><a href=#dom-context-2d-linecap>lineCap</a></code>, <code title=dom-context-2d-lineJoin><a href=#dom-context-2d-linejoin>lineJoin</a></code>, and (if
- appropriate) <code title=dom-context-2d-miterLimit><a href=#dom-context-2d-miterlimit>miterLimit</a></code> attributes,
+ holds: <code title=dom-context-2d-strokeStyle><a href=#dom-context-2d-strokestyle>strokeStyle</a></code>
+ must be applied to the result of <a href=#trace-a-path title="trace a
+ path">tracing</a> the shapes using the
+ <code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code> object for the line styles,
and <code title=dom-context-2d-fillStyle><a href=#dom-context-2d-fillstyle>fillStyle</a></code> must
be ignored.</p>
@@ -37317,18 +37596,18 @@
- <h6 id=drawing-paths-to-the-canvas><span class=secno>4.8.11.1.10 </span>Drawing paths to the canvas</h6>
+ <h6 id=drawing-paths-to-the-canvas><span class=secno>4.8.11.1.11 </span>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 <a href=#drawing-state>drawing
- state</a>. The current default path is a <a href=#concept-path title=concept-path>path</a>, as described in the previous
- section.</p>
+ <p>The context always has a <dfn id=current-default-path>current default path</dfn>. There
+ is only one <a href=#current-default-path>current default path</a>, it is not part of the
+ <a href=#drawing-state>drawing state</a>. The <a href=#current-default-path>current default path</a> is
+ a <a href=#concept-path title=concept-path>path</a>, as described above.</p>
<dl class=domintro><dt><var title="">context</var> . <code title=dom-context-2d-beginPath><a href=#dom-context-2d-beginpath>beginPath</a></code>()</dt>
<dd>
- <p>Resets the current default path.</p>
+ <p>Resets the <a href=#current-default-path>current default path</a>.</p>
</dd>
@@ -37337,7 +37616,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 <a href=#current-default-path>current default path</a> or the given path with the current fill style.</p>
</dd>
@@ -37347,7 +37626,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 <a href=#current-default-path>current default path</a> or the given path with the current stroke style.</p>
</dd>
@@ -37358,7 +37637,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
+ <a href=#current-default-path>current default path</a> or hte given path, following the platform
conventions for focus rings.</p>
</dd>
@@ -37372,7 +37651,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>
+ <a href=#current-default-path>current default path</a> 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
@@ -37387,7 +37666,7 @@
<dd>
- <p>Scrolls the current default path into view. This is especially
+ <p>Scrolls the <a href=#current-default-path>current default path</a> into view. This is especially
useful on devices with small screens, where the whole canvas might
not be visible at once.</p>
@@ -37399,8 +37678,7 @@
<dd>
- <p>Further constrains the clipping region to the current default
- path.</p>
+ <p>Further constrains the clipping region to the <a href=#current-default-path>current default path</a>.</p>
</dd>
@@ -37410,30 +37688,31 @@
<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 <a href=#current-default-path>current default path</a>.</p>
</dd>
</dl><div class=impl>
<p>The <dfn id=dom-context-2d-beginpath 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
+ <a href=#current-default-path>current default path</a> 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><a href=#path>Path</a></code> argument, if one was
- provided, or the current default path otherwise.</p>
+ provided, or the <a href=#current-default-path>current default path</a> otherwise.</p>
<p>When the intended path is a <code><a href=#path>Path</a></code> object, the
coordinates of its subpaths must be transformed according to the
<code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code> object's <a href=#transformations title=dom-context-2d-transformation>current transformation
matrix</a> when used by these methods (without affecting the
<code><a href=#path>Path</a></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>
+ <a href=#current-default-path>current default path</a>, it is not affected by the
+ transform. (This is because transformations already affect the
+ <a href=#current-default-path>current default path</a> when it is constructed, so
+ applying it when it is painted as well would result in a double
+ transformation.)</p>
<p>The <dfn id=dom-context-2d-fill 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><a href=#dom-context-2d-fillstyle>fillStyle</a></code>, and using the
@@ -37447,23 +37726,24 @@
once.</p>
<p>The <dfn id=dom-context-2d-stroke 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><a href=#dom-context-2d-linewidth>lineWidth</a></code>,
- <code title=dom-context-2d-lineCap><a href=#dom-context-2d-linecap>lineCap</a></code>, <code title=dom-context-2d-lineJoin><a href=#dom-context-2d-linejoin>lineJoin</a></code>, and (if
- appropriate) <code title=dom-context-2d-miterLimit><a href=#dom-context-2d-miterlimit>miterLimit</a></code> attributes, and
- then fill the combined stroke area using the <code title=dom-context-2d-strokeStyle><a href=#dom-context-2d-strokestyle>strokeStyle</a></code> attribute.</p>
+ must apply the <a href=#trace-a-path title="trace a path">trace</a> the intended
+ path, using the <code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code> object for the
+ line styles, and then fill the combined stroke area using the <code title=dom-context-2d-strokeStyle><a href=#dom-context-2d-strokestyle>strokeStyle</a></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 <a href=#trace-a-path>trace a
+ path</a> 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>
+ <a href=#current-default-path>current default path</a>.</p>
<p>Paths, when filled or stroked, must be painted without affecting
- the current default path or any <code><a href=#path>Path</a></code> objects, and must
- be subject to <a href=#shadows title=shadows>shadow effects</a>, <a href=#dom-context-2d-globalalpha title=dom-context-2d-globalAlpha>global alpha</a>, the <a href=#clipping-region title="clipping region">clipping region</a>, and <a href=#dom-context-2d-globalcompositeoperation title=dom-context-2d-globalCompositeOperation>global composition
+ the <a href=#current-default-path>current default path</a> or any <code><a href=#path>Path</a></code>
+ objects, and must be subject to <a href=#shadows title=shadows>shadow
+ effects</a>, <a href=#dom-context-2d-globalalpha title=dom-context-2d-globalAlpha>global
+ alpha</a>, the <a href=#clipping-region title="clipping region">clipping
+ region</a>, and <a href=#dom-context-2d-globalcompositeoperation title=dom-context-2d-globalCompositeOperation>global composition
operators</a>. (The effect of transformations is described above
and varies based on which path is being used.)</p>
@@ -37695,7 +37975,7 @@
- <h6 id=drawing-images-to-the-canvas><span class=secno>4.8.11.1.11 </span>Drawing images to the canvas</h6>
+ <h6 id=drawing-images-to-the-canvas><span class=secno>4.8.11.1.12 </span>Drawing images to the canvas</h6>
<p>To draw images onto the canvas, the <dfn id=dom-context-2d-drawimage title=dom-context-2d-drawImage><code>drawImage</code></dfn> method
can be used.</p>
@@ -37839,7 +38119,7 @@
- <h6 id=pixel-manipulation><span class=secno>4.8.11.1.12 </span><dfn>Pixel manipulation</dfn></h6>
+ <h6 id=pixel-manipulation><span class=secno>4.8.11.1.13 </span><dfn>Pixel manipulation</dfn></h6>
<dl class=domintro><dt><var title="">imagedata</var> = <var title="">context</var> . <code title=dom-context-2d-createImageData><a href=#dom-context-2d-createimagedata>createImageData</a></code>(<var title="">sw</var>, <var title="">sh</var>)</dt>
@@ -38175,7 +38455,7 @@
- <h6 id=compositing><span class=secno>4.8.11.1.13 </span>Compositing</h6>
+ <h6 id=compositing><span class=secno>4.8.11.1.14 </span>Compositing</h6>
<dl class=domintro><dt><var title="">context</var> . <code title=dom-context-2d-globalAlpha><a href=#dom-context-2d-globalalpha>globalAlpha</a></code> [ = <var title="">value</var> ]</dt>
@@ -38337,7 +38617,7 @@
- <h6 id=shadows><span class=secno>4.8.11.1.14 </span><dfn>Shadows</dfn></h6>
+ <h6 id=shadows><span class=secno>4.8.11.1.15 </span><dfn>Shadows</dfn></h6>
<p>All drawing operations are affected by the four global shadow
attributes.</p>
@@ -38478,7 +38758,7 @@
<div class=impl>
- <h6 id=drawing-model><span class=secno>4.8.11.1.15 </span><dfn>Drawing model</dfn></h6>
+ <h6 id=drawing-model><span class=secno>4.8.11.1.16 </span><dfn>Drawing model</dfn></h6>
<p>When a shape or image is painted, user agents must follow these
steps, in the order given (or act as if they do):</p>
@@ -38509,7 +38789,7 @@
</ol></div>
- <h6 id=best-practices><span class=secno>4.8.11.1.16 </span>Best practices</h6>
+ <h6 id=best-practices><span class=secno>4.8.11.1.17 </span>Best practices</h6>
<p><i>This section is non-normative.</i></p>
@@ -38571,7 +38851,7 @@
attribute.</p>
- <h6 id=examples><span class=secno>4.8.11.1.17 </span>Examples</h6>
+ <h6 id=examples><span class=secno>4.8.11.1.18 </span>Examples</h6>
<p><i>This section is non-normative.</i></p>
Modified: index
===================================================================
--- index 2012-03-13 22:54:57 UTC (rev 7027)
+++ index 2012-03-19 22:29:20 UTC (rev 7028)
@@ -240,7 +240,7 @@
<header class=head id=head><p><a class=logo href=http://www.whatwg.org/><img alt=WHATWG height=101 src=/images/logo width=101></a></p>
<hgroup><h1 class=allcaps>HTML</h1>
- <h2 class="no-num no-toc">Living Standard — Last Updated 13 March 2012</h2>
+ <h2 class="no-num no-toc">Living Standard — Last Updated 19 March 2012</h2>
</hgroup><dl><dt><strong>Web developer edition:</strong></dt>
<dd><strong><a href=http://developers.whatwg.org/>http://developers.whatwg.org/</a></strong></dd>
<dt>Multiple-page version:</dt>
@@ -599,22 +599,23 @@
<li><a href=#2dcontext><span class=secno>4.8.11.1 </span>The 2D context</a>
<ol>
<li><a href=#the-canvas-state><span class=secno>4.8.11.1.1 </span>The canvas state</a></li>
- <li><a href=#transformations><span class=secno>4.8.11.1.2 </span>Transformations</a></li>
+ <li><a href=#drawingstyle-objects><span class=secno>4.8.11.1.2 </span><code>DrawingStyle</code> objects</a></li>
<li><a href=#line-styles><span class=secno>4.8.11.1.3 </span>Line styles</a></li>
<li><a href=#text-styles><span class=secno>4.8.11.1.4 </span>Text styles</a></li>
<li><a href=#building-paths><span class=secno>4.8.11.1.5 </span>Building paths</a></li>
<li><a href=#path-objects><span class=secno>4.8.11.1.6 </span><code>Path</code> objects</a></li>
- <li><a href=#fill-and-stroke-styles><span class=secno>4.8.11.1.7 </span>Fill and stroke styles</a></li>
- <li><a href=#drawing-rectangles-to-the-canvas><span class=secno>4.8.11.1.8 </span>Drawing rectangles to the canvas</a></li>
- <li><a href=#drawing-text-to-the-canvas><span class=secno>4.8.11.1.9 </span>Drawing text to the canvas</a></li>
- <li><a href=#drawing-paths-to-the-canvas><span class=secno>4.8.11.1.10 </span>Drawing paths to the canvas</a></li>
- <li><a href=#drawing-images-to-the-canvas><span class=secno>4.8.11.1.11 </span>Drawing images to the canvas</a></li>
- <li><a href=#pixel-manipulation><span class=secno>4.8.11.1.12 </span>Pixel manipulation</a></li>
- <li><a href=#compositing><span class=secno>4.8.11.1.13 </span>Compositing</a></li>
- <li><a href=#shadows><span class=secno>4.8.11.1.14 </span>Shadows</a></li>
- <li><a href=#drawing-model><span class=secno>4.8.11.1.15 </span>Drawing model</a></li>
- <li><a href=#best-practices><span class=secno>4.8.11.1.16 </span>Best practices</a></li>
- <li><a href=#examples><span class=secno>4.8.11.1.17 </span>Examples</a></ol></li>
+ <li><a href=#transformations><span class=secno>4.8.11.1.7 </span>Transformations</a></li>
+ <li><a href=#fill-and-stroke-styles><span class=secno>4.8.11.1.8 </span>Fill and stroke styles</a></li>
+ <li><a href=#drawing-rectangles-to-the-canvas><span class=secno>4.8.11.1.9 </span>Drawing rectangles to the canvas</a></li>
+ <li><a href=#drawing-text-to-the-canvas><span class=secno>4.8.11.1.10 </span>Drawing text to the canvas</a></li>
+ <li><a href=#drawing-paths-to-the-canvas><span class=secno>4.8.11.1.11 </span>Drawing paths to the canvas</a></li>
+ <li><a href=#drawing-images-to-the-canvas><span class=secno>4.8.11.1.12 </span>Drawing images to the canvas</a></li>
+ <li><a href=#pixel-manipulation><span class=secno>4.8.11.1.13 </span>Pixel manipulation</a></li>
+ <li><a href=#compositing><span class=secno>4.8.11.1.14 </span>Compositing</a></li>
+ <li><a href=#shadows><span class=secno>4.8.11.1.15 </span>Shadows</a></li>
+ <li><a href=#drawing-model><span class=secno>4.8.11.1.16 </span>Drawing model</a></li>
+ <li><a href=#best-practices><span class=secno>4.8.11.1.17 </span>Best practices</a></li>
+ <li><a href=#examples><span class=secno>4.8.11.1.18 </span>Examples</a></ol></li>
<li><a href=#color-spaces-and-color-correction><span class=secno>4.8.11.2 </span>Color spaces and color correction</a></li>
<li><a href=#security-with-canvas-elements><span class=secno>4.8.11.3 </span>Security with <code>canvas</code> elements</a></ol></li>
<li><a href=#the-map-element><span class=secno>4.8.12 </span>The <code>map</code> element</a></li>
@@ -4176,9 +4177,20 @@
</dd>
+
+<!--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 id=svgmatrix><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
@@ -34877,6 +34889,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 <a href=#dom-context-2d-scale title=dom-context-2d-scale>scale</a>(double x, double y);
+ void <a href=#dom-context-2d-rotate title=dom-context-2d-rotate>rotate</a>(double angle);
+ void <a href=#dom-context-2d-translate title=dom-context-2d-translate>translate</a>(double x, double y);
+ void <a href=#dom-context-2d-transform title=dom-context-2d-transform>transform</a>(double a, double b, double c, double d, double e, double f);
+ void <a href=#dom-context-2d-settransform title=dom-context-2d-setTransform>setTransform</a>(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 <a href=#dom-context-2d-globalalpha title=dom-context-2d-globalAlpha>globalAlpha</a>; // (default 1.0)
attribute DOMString <a href=#dom-context-2d-globalcompositeoperation title=dom-context-2d-globalCompositeOperation>globalCompositeOperation</a>; // (default source-over)
@@ -34890,7 +34914,7 @@
http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2008-August/015567.html
-->
- // colors and styles (see also the <a href=#canvaslinestyles>CanvasLineStyles</a> interface)
+ // colors and styles (see also the <a href=#canvasdrawingstyles>CanvasDrawingStyles</a> interface)
attribute any <a href=#dom-context-2d-strokestyle title=dom-context-2d-strokeStyle>strokeStyle</a>; // (default black)
attribute any <a href=#dom-context-2d-fillstyle title=dom-context-2d-fillStyle>fillStyle</a>; // (default black)
<a href=#canvasgradient>CanvasGradient</a> <a href=#dom-context-2d-createlineargradient title=dom-context-2d-createLinearGradient>createLinearGradient</a>(double x0, double y0, double x1, double y1);
@@ -34925,7 +34949,7 @@
boolean <a href=#dom-context-2d-ispointinpath title=dom-context-2d-isPointInPath>isPointInPath</a>(double x, double y);
boolean <a href=#dom-context-2d-ispointinpath title=dom-context-2d-isPointInPath>isPointInPath</a>(<a href=#path>Path</a> path, double x, double y);
- // text (see also the <a href=#canvastext>CanvasText</a> interface)
+ // text (see also the <a href=#canvasdrawingstyles>CanvasDrawingStyles</a> interface)
void <a href=#dom-context-2d-filltext title=dom-context-2d-fillText>fillText</a>(DOMString text, double x, double y, optional double maxWidth);
void <a href=#dom-context-2d-stroketext title=dom-context-2d-strokeText>strokeText</a>(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);
@@ -34944,36 +34968,22 @@
void <a href=#dom-context-2d-putimagedata title=dom-context-2d-putImageData>putImageData</a>(<a href=#imagedata>ImageData</a> imagedata, double dx, double dy);
void <a href=#dom-context-2d-putimagedata title=dom-context-2d-putImageData>putImageData</a>(<a href=#imagedata>ImageData</a> imagedata, double dx, double dy, double dirtyX, double dirtyY, double dirtyWidth, double dirtyHeight);
};
-<a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a> implements <a href=#canvastransformation>CanvasTransformation</a>;
-<a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a> implements <a href=#canvaslinestyles>CanvasLineStyles</a>;
+<a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a> implements <a href=#canvasdrawingstyles>CanvasDrawingStyles</a>;
<a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a> implements <a href=#canvaspathmethods>CanvasPathMethods</a>;
-<a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a> implements <a href=#canvastext>CanvasText</a>;
[NoInterfaceObject]
-interface <dfn id=canvastransformation>CanvasTransformation</dfn> {
- // transformations (default transform is the identity matrix)
- void <a href=#dom-context-2d-scale title=dom-context-2d-scale>scale</a>(double x, double y);
- void <a href=#dom-context-2d-rotate title=dom-context-2d-rotate>rotate</a>(double angle);
- void <a href=#dom-context-2d-translate title=dom-context-2d-translate>translate</a>(double x, double y);
- void <a href=#dom-context-2d-transform title=dom-context-2d-transform>transform</a>(double a, double b, double c, double d, double e, double f);
- void <a href=#dom-context-2d-settransform title=dom-context-2d-setTransform>setTransform</a>(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 id=canvaslinestyles>CanvasLineStyles</dfn> {
+interface <dfn id=canvasdrawingstyles>CanvasDrawingStyles</dfn> {
// line caps/joins
attribute double <a href=#dom-context-2d-linewidth title=dom-context-2d-lineWidth>lineWidth</a>; // (default 1)
attribute DOMString <a href=#dom-context-2d-linecap title=dom-context-2d-lineCap>lineCap</a>; // "butt", "round", "square" (default "butt")
attribute DOMString <a href=#dom-context-2d-linejoin title=dom-context-2d-lineJoin>lineJoin</a>; // "round", "bevel", "miter" (default "miter")
attribute double <a href=#dom-context-2d-miterlimit title=dom-context-2d-miterLimit>miterLimit</a>; // (default 10)
-};
-[NoInterfaceObject]
-interface <dfn id=canvastext>CanvasText</dfn> {
+ // dashed lines
+ void <a href=#dom-context-2d-setlinedash title=dom-context-2d-setLineDash>setLineDash</a>(sequence<double> segments); // default empty
+ sequence<double> <a href=#dom-context-2d-getlinedash title=dom-context-2d-getLineDash>getLineDash</a>();
+ attribute double <a href=#dom-context-2d-linedashoffset title=dom-context-2d-lineDashOffset>lineDashOffset</a>;
+
// text
attribute DOMString <a href=#dom-context-2d-font title=dom-context-2d-font>font</a>; // (default 10px sans-serif)
attribute DOMString <a href=#dom-context-2d-textalign title=dom-context-2d-textAlign>textAlign</a>; // "start", "end", "left", "right", "center" (default: "start")
@@ -35014,20 +35024,21 @@
readonly attribute <a href=#uint8clampedarray>Uint8ClampedArray</a> <a href=#dom-imagedata-data title=dom-imagedata-data>data</a>;
};
-[<a href=#dom-path title=dom-Path>Constructor</a>(optional <a href=#element>Element</a> scope)]
+[<a href=#dom-drawingstyle title=dom-DrawingStyle>Constructor</a>(optional <a href=#element>Element</a> scope)]
+interface <dfn id=drawingstyle>DrawingStyle</dfn> { };
+<a href=#drawingstyle>DrawingStyle</a> implements <a href=#canvasdrawingstyles>CanvasDrawingStyles</a>;
+
+[<a href=#dom-path title=dom-Path>Constructor</a>,
+ <a href=#dom-path-withdata title=dom-Path-withdata>Constructor</a>(DOMString d)]
interface <dfn id=path>Path</dfn> {
- void <a href=#dom-path-addpathdata title=dom-path-addPathData>addPathData</a>(DOMString d);
- void <a href=#dom-path-addfill title=dom-path-addFill>addFill</a>(<a href=#path>Path</a> path);
- void <a href=#dom-path-addstroke title=dom-path-addStroke>addStroke</a>(<a href=#path>Path</a> 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, <a href=#path>Path</a> path, optional double maxWidth);
- void <span title=dom-path-addStrokeText>addStrokeText</span>(DOMString text, <a href=#path>Path</a> path, optional double maxWidth);
+ void <a href=#dom-path-addpath title=dom-path-addPath>addPath</a>(<a href=#path>Path</a> path, <a href=#svgmatrix>SVGMatrix</a>? transformation);
+ void <a href=#dom-path-addpathbystrokingpath title=dom-path-addPathByStrokingPath>addPathByStrokingPath</a>(<a href=#path>Path</a> path, <a href=#canvasdrawingstyles>CanvasDrawingStyles</a> styles, <a href=#svgmatrix>SVGMatrix</a>? transformation);
+ void <a href=#dom-path-addtext title=dom-path-addText>addText</a>(DOMString text, <a href=#canvasdrawingstyles>CanvasDrawingStyles</a> styles, <a href=#svgmatrix>SVGMatrix</a>? transformation, double x, double y, optional double maxWidth);
+ void <a href=#dom-path-addpathbystrokingtext title=dom-path-addPathByStrokingText>addPathByStrokingText</a>(DOMString text, <a href=#canvasdrawingstyles>CanvasDrawingStyles</a> styles, <a href=#svgmatrix>SVGMatrix</a>? transformation, double x, double y, optional double maxWidth);
+ void <a href=#dom-path-addtext title=dom-path-addText>addText</a>(DOMString text, <a href=#canvasdrawingstyles>CanvasDrawingStyles</a> styles, <a href=#svgmatrix>SVGMatrix</a>? transformation, <a href=#path>Path</a> path, optional double maxWidth);
+ void <a href=#dom-path-addpathbystrokingtext title=dom-path-addPathByStrokingText>addPathByStrokingText</a>(DOMString text, <a href=#canvasdrawingstyles>CanvasDrawingStyles</a> styles, <a href=#svgmatrix>SVGMatrix</a>? transformation, <a href=#path>Path</a> path, optional double maxWidth);
};
-<a href=#path>Path</a> implements <a href=#canvastransformation>CanvasTransformation</a>;
-<a href=#path>Path</a> implements <a href=#canvaslinestyles>CanvasLineStyles</a>;
-<a href=#path>Path</a> implements <a href=#canvaspathmethods>CanvasPathMethods</a>;
-<a href=#path>Path</a> implements <a href=#canvastext>CanvasText</a>;</pre>
+<a href=#path>Path</a> implements <a href=#canvaspathmethods>CanvasPathMethods</a>;</pre>
<!-- ARC-ORDER note (see above):
some demos rely on the precise order of the arc() and arcTo()
@@ -35105,10 +35116,11 @@
<ul class=brief><li>The current <a href=#transformations title=dom-context-2d-transformation>transformation matrix</a>.</li>
<li>The current <a href=#clipping-region>clipping region</a>.</li>
<li>The current values of the following attributes: <code title=dom-context-2d-strokeStyle><a href=#dom-context-2d-strokestyle>strokeStyle</a></code>, <code title=dom-context-2d-fillStyle><a href=#dom-context-2d-fillstyle>fillStyle</a></code>, <code title=dom-context-2d-globalAlpha><a href=#dom-context-2d-globalalpha>globalAlpha</a></code>, <code title=dom-context-2d-lineWidth><a href=#dom-context-2d-linewidth>lineWidth</a></code>, <code title=dom-context-2d-lineCap><a href=#dom-context-2d-linecap>lineCap</a></code>, <code title=dom-context-2d-lineJoin><a href=#dom-context-2d-linejoin>lineJoin</a></code>, <code title=dom-context-2d-miterLimit><a href=#dom-context-2d-miterlimit>miterLimit</a></code>, <code title=dom-context-2d-shadowOffsetX><a href=#dom-context-2d-shadowoffsetx>shadowOffsetX</a></code>, <code title=dom-context-2d-shadowOffsetY><a href=#dom-context-2d-shadowoffsety>shadowOffsetY</a></code>, <code title=dom-context-2d-shadowBlur><a href=#dom-context-2d-shado
wblur>shadowBlur</a></code>, <code title=dom-context-2d-shadowColor><a href=#dom-context-2d-shadowcolor>shadowColor</a></code>, <code title=dom-context-2d-globalCompositeOperation><a href=#dom-context-2d-globalcompositeoperation>globalCompositeOperation</a></code>, <code title=dom-context-2d-font><a href=#dom-context-2d-font>font</a></code>, <code title=dom-context-2d-textAlign><a href=#dom-context-2d-textalign>textAlign</a></code>, <code title=dom-context-2d-textBaseline><a href=#dom-context-2d-textbaseline>textBaseline</a></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><a href=#dom-context-2d-beginpath>beginPath()</a></code> method. The
- current bitmap is a property of the canvas, not the context.</p>
+ </ul><p class=note>The <a href=#current-default-path>current default path</a> and the
+ current bitmap are not part of the drawing state. The <a href=#current-default-path>current
+ default path</a> is persistent, and can only be reset using the
+ <code title=dom-context-2d-beginPath><a href=#dom-context-2d-beginpath>beginPath()</a></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><a href=#dom-context-2d-save>save</a></code>()</dt>
@@ -35158,132 +35170,48 @@
</div>
- <h6 id=transformations><span class=secno>4.8.11.1.2 </span><dfn title=dom-context-2d-transformation>Transformations</dfn></h6>
+ <h6 id=drawingstyle-objects><span class=secno>4.8.11.1.2 </span><code><a href=#drawingstyle>DrawingStyle</a></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><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code> objects and to
+ <code><a href=#drawingstyle>DrawingStyle</a></code> objects. This section defines the
+ constructor used to obtain a <code><a href=#drawingstyle>DrawingStyle</a></code> object. This
+ object is then used by methods on <code><a href=#path>Path</a></code> objects to
+ control how text and paths are rasterised and stroked.</p>
- <div class=impl>
+ <dl class=domintro><dt><var title="">styles</var> = new <code title=dom-DrawingStyle><a href=#dom-drawingstyle>DrawingStyle</a></code>([ <var title="">element</var> ])</dt>
- <p>Any object that implements the <code><a href=#canvastransformation>CanvasTransformation</a></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><a href=#dom-context-2d-scale>scale</a></code>(<var title="">x</var>, <var title="">y</var>)</dt>
- <dt><var title="">path</var> . <code title=dom-context-2d-scale><a href=#dom-context-2d-scale>scale</a></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>
+ <p>Creates a new <code><a href=#drawingstyle>DrawingStyle</a></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><a href=#dom-context-2d-rotate>rotate</a></code>(<var title="">angle</var>)</dt>
- <dt><var title="">path</var> . <code title=dom-context-2d-rotate><a href=#dom-context-2d-rotate>rotate</a></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><a href=#dom-context-2d-translate>translate</a></code>(<var title="">x</var>, <var title="">y</var>)</dt>
- <dt><var title="">path</var> . <code title=dom-context-2d-translate><a href=#dom-context-2d-translate>translate</a></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><a href=#dom-context-2d-transform>transform</a></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><a href=#dom-context-2d-transform>transform</a></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><a href=#dom-context-2d-settransform>setTransform</a></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><a href=#dom-context-2d-settransform>setTransform</a></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 id=dom-context-2d-scale 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><a href=#drawingstyle>DrawingStyle</a></code> object has a <dfn id=styles-scope-node>styles scope
+ node</dfn>.</p>
- <p>The <dfn id=dom-context-2d-rotate 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 id=dom-drawingstyle title=dom-DrawingStyle><code>DrawingStyle()</code></dfn>
+ constructor, when invoked, must return a newly created
+ <code><a href=#drawingstyle>DrawingStyle</a></code> object. If the constructor was passed an
+ argument, then the <code><a href=#drawingstyle>DrawingStyle</a></code> object's <a href=#styles-scope-node>styles
+ scope node</a> is that element. Otherwise, the object's
+ <a href=#styles-scope-node>styles scope node</a> is the <code><a href=#document>Document</a></code> object
+ of the <a href=#active-document>active document</a> of the <a href=#browsing-context>browsing
+ context</a> of the <code><a href=#window>Window</a></code> object on which the
+ interface object of the invoked constructor is found.</p>
- <p>The <dfn id=dom-context-2d-translate 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 id=dom-context-2d-transform 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><td><var title="">b</var></td>
- <td><var title="">d</var></td>
- <td><var title="">f</var></td>
- <tr><td>0</td>
- <td>0</td>
- <td>1</td>
- </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 id=dom-context-2d-settransform 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><a href=#dom-context-2d-transform title=dom-context-2d-transform>transform</a>(<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 id=line-styles><span class=secno>4.8.11.1.3 </span>Line styles</h6>
<dl class=domintro><dt><var title="">context</var> . <code title=dom-context-2d-lineWidth><a href=#dom-context-2d-linewidth>lineWidth</a></code> [ = <var title="">value</var> ]</dt>
- <dt><var title="">path</var> . <code title=dom-context-2d-lineWidth><a href=#dom-context-2d-linewidth>lineWidth</a></code> [ = <var title="">value</var> ]</dt>
+ <dt><var title="">styles</var> . <code title=dom-context-2d-lineWidth><a href=#dom-context-2d-linewidth>lineWidth</a></code> [ = <var title="">value</var> ]</dt>
<dd>
@@ -35295,7 +35223,7 @@
</dd>
<dt><var title="">context</var> . <code title=dom-context-2d-lineCap><a href=#dom-context-2d-linecap>lineCap</a></code> [ = <var title="">value</var> ]</dt>
- <dt><var title="">path</var> . <code title=dom-context-2d-lineCap><a href=#dom-context-2d-linecap>lineCap</a></code> [ = <var title="">value</var> ]</dt>
+ <dt><var title="">styles</var> . <code title=dom-context-2d-lineCap><a href=#dom-context-2d-linecap>lineCap</a></code> [ = <var title="">value</var> ]</dt>
<dd>
@@ -35310,7 +35238,7 @@
</dd>
<dt><var title="">context</var> . <code title=dom-context-2d-lineJoin><a href=#dom-context-2d-linejoin>lineJoin</a></code> [ = <var title="">value</var> ]</dt>
- <dt><var title="">path</var> . <code title=dom-context-2d-lineJoin><a href=#dom-context-2d-linejoin>lineJoin</a></code> [ = <var title="">value</var> ]</dt>
+ <dt><var title="">styles</var> . <code title=dom-context-2d-lineJoin><a href=#dom-context-2d-linejoin>lineJoin</a></code> [ = <var title="">value</var> ]</dt>
<dd>
@@ -35325,7 +35253,7 @@
</dd>
<dt><var title="">context</var> . <code title=dom-context-2d-miterLimit><a href=#dom-context-2d-miterlimit>miterLimit</a></code> [ = <var title="">value</var> ]</dt>
- <dt><var title="">path</var> . <code title=dom-context-2d-miterLimit><a href=#dom-context-2d-miterlimit>miterLimit</a></code> [ = <var title="">value</var> ]</dt>
+ <dt><var title="">styles</var> . <code title=dom-context-2d-miterLimit><a href=#dom-context-2d-miterlimit>miterLimit</a></code> [ = <var title="">value</var> ]</dt>
<dd>
@@ -35336,11 +35264,48 @@
</dd>
+
+ <dt><var title="">context</var> . <code title=dom-context-2d-setLineDash><a href=#dom-context-2d-setlinedash>setLineDash</a></code>(<var title="">segments</var>)</dt>
+ <dt><var title="">styles</var> . <code title=dom-context-2d-setLineDash><a href=#dom-context-2d-setlinedash>setLineDash</a></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><a href=#dom-context-2d-getlinedash>getLineDash</a></code>()</dt>
+ <dt><var title="">segments</var> = <var title="">styles</var> . <code title=dom-context-2d-getLineDash><a href=#dom-context-2d-getlinedash>getLineDash</a></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><a href=#dom-context-2d-linedashoffset>lineDashOffset</a></code></dt>
+ <dt><var title="">styles</var> . <code title=dom-context-2d-lineDashOffset><a href=#dom-context-2d-linedashoffset>lineDashOffset</a></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><a href=#canvaslinestyles>CanvasLineStyles</a></code>
- interface have attributes (defined in this section) that control how
- lines are treated by the object.</p>
+ <p>Objects that implement the <code><a href=#canvasdrawingstyles>CanvasDrawingStyles</a></code>
+ interface have attributes and methods (defined in this section) that
+ control how lines are treated by the object.</p>
<p>The <dfn id=dom-context-2d-linewidth title=dom-context-2d-lineWidth><code>lineWidth</code></dfn>
attribute gives the width of lines, in coordinate space units. On
@@ -35349,22 +35314,14 @@
value unchanged; other values must change the current value to the
new value.</p>
- <p>When the object implementing the <code><a href=#canvaslinestyles>CanvasLineStyles</a></code>
+ <p>When the object implementing the <code><a href=#canvasdrawingstyles>CanvasDrawingStyles</a></code>
interface is created, the <code title=dom-context-2d-lineWidth><a href=#dom-context-2d-linewidth>lineWidth</a></code> attribute must
initially have the value <code>1.0</code>.</p>
<hr><p>The <dfn id=dom-context-2d-linecap 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>,
@@ -35372,7 +35329,7 @@
must be changed to the new value; other values must ignored, leaving
the value unchanged.</p>
- <p>When the object implementing the <code><a href=#canvaslinestyles>CanvasLineStyles</a></code>
+ <p>When the object implementing the <code><a href=#canvasdrawingstyles>CanvasDrawingStyles</a></code>
interface is created, the <code title=dom-context-2d-lineCap><a href=#dom-context-2d-linecap>lineCap</a></code> attribute must
initially have the value <code>butt</code>.</p>
@@ -35387,90 +35344,331 @@
must be changed to the new value; other values must be ignored,
leaving the value unchanged.</p>
- <p>When the object implementing the <code><a href=#canvaslinestyles>CanvasLineStyles</a></code>
+ <p>When the object implementing the <code><a href=#canvasdrawingstyles>CanvasDrawingStyles</a></code>
interface is created, the <code title=dom-context-2d-lineJoin><a href=#dom-context-2d-linejoin>lineJoin</a></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>
+ <hr><p>When the <code title=dom-context-2d-lineJoin><a href=#dom-context-2d-linejoin>lineJoin</a></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 id=dom-context-2d-miterlimit 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><a href=#canvasdrawingstyles>CanvasDrawingStyles</a></code>
+ interface is created, the <code title=dom-context-2d-miterLimit><a href=#dom-context-2d-miterlimit>miterLimit</a></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><a href=#dom-context-2d-linejoin>lineJoin</a></code> attribute controls
- whether anything else is rendered. The three aforementioned values
- have the following meanings:</p>
+ <hr><p>Each <code><a href=#canvasdrawingstyles>CanvasDrawingStyles</a></code> object has a <dfn id=dash-list>dash
+ list</dfn>, which is either empty or consists of an even number of
+ positive non-zero numbers. Initially, the <a href=#dash-list>dash list</a>
+ must be empty.</p>
- <p>The <code>bevel</code> value means that this is all that is
- rendered at joins.</p>
+ <p>When the <dfn id=dom-context-2d-setlinedash title=dom-context-2d-setLineDash><code>setLineDash()</code></dfn>
+ method is invoked, it must run the following steps:</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>
+ <ol><li><p>Let <var title="">a</var> be a copy of the array provided as
+ the argument.</li>
- <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>
+ <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.</li>
- <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>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>.</li>
- <p>The miter limit ratio can be explicitly set using the <dfn id=dom-context-2d-miterlimit title=dom-context-2d-miterLimit><code>miterLimit</code></dfn>
+ <li><p>Let the object's <a href=#dash-list>dash list</a> be <var title="">a</var>.</li>
+
+ </ol><p>When the <dfn id=dom-context-2d-getlinedash 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 <a href=#dash-list>dash list</a>, 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 id=dom-context-2d-linedashoffset 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><a href=#canvaslinestyles>CanvasLineStyles</a></code>
- interface is created, the <code title=dom-context-2d-miterLimit><a href=#dom-context-2d-miterlimit>miterLimit</a></code> attribute must
- initially have the value <code>10.0</code>.</p>
+ <p>When the object implementing the <code><a href=#canvasdrawingstyles>CanvasDrawingStyles</a></code>
+ interface is created, the <code title=dom-context-2d-lineDashOffset><a href=#dom-context-2d-linedashoffset>lineDashOffset</a></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 id=trace-a-path>trace a <span>path</span></dfn>,
+ given an object <var title="">style</var> that implements the
+ <code><a href=#canvasdrawingstyles>CanvasDrawingStyles</a></code> interface, it must run the following
+ algorith. This algorithm returns a new <a href=#path>path</a>.</p>
-<!--v6: Another request has been for hairline width lines, that remain
-hairline width with transform. ack Shaun Morris. -->
+ <ol><li><p>Let <var title="">path</var> be a copy of the path being
+ traced.</li>
- </div>
+ <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).</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.</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> <a href=#dash-list>dash list</a> is
+ empty, jump to the step labeled <i>joins</i>.</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.</li>
+
+ <li><p>Let <var title="">offset</var> be the value of the <var title="">styles</var> <code title=dom-context-2d-lineDashOffset><a href=#dom-context-2d-linedashoffset>lineDashOffset</a></code>, in
+ coordinate space units.</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>.</li>
+
+ <li><p>Let <var title="">position</var> be 0.</li>
+
+ <li><p>Let <var title="">index</var> be 0.</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>).</li>
+
+ <li><p><i>Dash On</i>: Let <var title="">segment length</var> be
+ the value of the <var title="">styles</var> <a href=#dash-list>dash
+ list</a>'s <var title="">index</var>th entry.</li>
+
+ <li><p>Increment <var title="">position</var> by <var title="">segment length</var>.</li>
+
+ <li><p>If <var title="">position</var> is greater than <var title="">width</var>, then jump to the step labeled
+ <i>joins</i>.</li>
+
+ <li><p>If <var title="">segment length</var> is non-zero, let <var title="">current state</var> be <i>on</i>.</li>
+
+ <li><p>Increment <var title="">index</var> by one.</li>
+
+ <li><p><i>Dash Off</i>: Let <var title="">segment length</var> be
+ the value of the <var title="">styles</var> <a href=#dash-list>dash
+ list</a>'s <var title="">index</var>th entry.</li>
+
+ <li><p>Let <var title="">start</var> be the offset <var title="">position</var> on <var title="">L</var>.</li>
+
+ <li><p>Increment <var title="">position</var> by <var title="">segment length</var>.</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>.</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>.</li>
+
+ <li><p>If <var title="">segment length</var> is greater than zero,
+ let <var title="">positioned-at-on-dash</var> be false.</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>
+ <a href=#dash-list>dash list</a>, then let <var title="">index</var> be
+ 0.</li>
+
+ <li><p>Return to the step labeled <i>dash on</i>.</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.</li>
+
+ <li>
+
+ <p>Create a new <a href=#path>path</a> 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><a href=#dom-context-2d-linewidth>lineWidth</a></code> width, replacing
+ each point with the end cap necessary to satisfy the <var title="">styles</var> <code title=dom-context-2d-lineCap><a href=#dom-context-2d-linecap>lineCap</a></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><a href=#dom-context-2d-linejoin>lineJoin</a></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><a href=#dom-context-2d-linecap>lineCap</a></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><a href=#dom-context-2d-linewidth>lineWidth</a></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><a href=#dom-context-2d-linewidth>lineWidth</a></code> width and the
+ width of half the <var title="">styles</var> <code title=dom-context-2d-lineWidth><a href=#dom-context-2d-linewidth>lineWidth</a></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><a href=#dom-context-2d-linejoin>lineJoin</a></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><a href=#dom-context-2d-miterlimit>miterLimit</a></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.</li>
+
+ </ol><!--v6: Another request has been for hairline width lines, that remain
+hairline width with transform. ack Shaun Morris. --></div>
+
+
<h6 id=text-styles><span class=secno>4.8.11.1.4 </span>Text styles</h6>
<dl class=domintro><dt><var title="">context</var> . <code title=dom-context-2d-font><a href=#dom-context-2d-font>font</a></code> [ = <var title="">value</var> ]</dt>
- <dt><var title="">path</var> . <code title=dom-context-2d-font><a href=#dom-context-2d-font>font</a></code> [ = <var title="">value</var> ]</dt>
+ <dt><var title="">styles</var> . <code title=dom-context-2d-font><a href=#dom-context-2d-font>font</a></code> [ = <var title="">value</var> ]</dt>
<dd>
@@ -35486,7 +35684,7 @@
</dd>
<dt><var title="">context</var> . <code title=dom-context-2d-textAlign><a href=#dom-context-2d-textalign>textAlign</a></code> [ = <var title="">value</var> ]</dt>
- <dt><var title="">path</var> . <code title=dom-context-2d-textAlign><a href=#dom-context-2d-textalign>textAlign</a></code> [ = <var title="">value</var> ]</dt>
+ <dt><var title="">styles</var> . <code title=dom-context-2d-textAlign><a href=#dom-context-2d-textalign>textAlign</a></code> [ = <var title="">value</var> ]</dt>
<dd>
@@ -35499,7 +35697,7 @@
</dd>
<dt><var title="">context</var> . <code title=dom-context-2d-textBaseline><a href=#dom-context-2d-textbaseline>textBaseline</a></code> [ = <var title="">value</var> ]</dt>
- <dt><var title="">path</var> . <code title=dom-context-2d-textBaseline><a href=#dom-context-2d-textbaseline>textBaseline</a></code> [ = <var title="">value</var> ]</dt>
+ <dt><var title="">styles</var> . <code title=dom-context-2d-textBaseline><a href=#dom-context-2d-textbaseline>textBaseline</a></code> [ = <var title="">value</var> ]</dt>
<dd>
@@ -35513,13 +35711,13 @@
</dl><div class=impl>
- <p>Objects that implement the <code><a href=#canvastext>CanvasText</a></code> interface have
- attributes (defined in this section) that control how text is laid
- out (rasterized or outlined) by the object. Such objects also have a
- <dfn id=font-style-source-node>font style source node</dfn>. For
+ <p>Objects that implement the <code><a href=#canvasdrawingstyles>CanvasDrawingStyles</a></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 id=font-style-source-node>font style source node</dfn>. For
<code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code> objects, this is the
- <code><a href=#the-canvas-element>canvas</a></code> element. For <code><a href=#path>Path</a></code> objects, it's the
- <a href=#path-scope-node>path scope node</a>.</p>
+ <code><a href=#the-canvas-element>canvas</a></code> element. For <code><a href=#drawingstyle>DrawingStyle</a></code> objects,
+ it's the <a href=#styles-scope-node>styles scope node</a>.</p>
<p>The <dfn id=dom-context-2d-font title=dom-context-2d-font><code>font</code></dfn> IDL
attribute, on setting, must be parsed the same way as the 'font'
@@ -35566,7 +35764,7 @@
</div>
- <p>When the object implementing the <code><a href=#canvastext>CanvasText</a></code>
+ <p>When the object implementing the <code><a href=#canvasdrawingstyles>CanvasDrawingStyles</a></code>
interface is created, the font of the context must be set to 10px
sans-serif. When the 'font-size' component is set to lengths using
percentages, 'em' or 'ex' units, or the 'larger' or 'smaller'
@@ -35591,7 +35789,7 @@
the value is one of <code title="">start</code>, <code title="">end</code>, <code title="">left</code>, <code title="">right</code>, or <code title="">center</code>, then the
value must be changed to the new value. Otherwise, the new value
must be ignored. When the object implementing the
- <code><a href=#canvastext>CanvasText</a></code> interface is created, the <code title=dom-context-2d-textAlign><a href=#dom-context-2d-textalign>textAlign</a></code> attribute must
+ <code><a href=#canvasdrawingstyles>CanvasDrawingStyles</a></code> interface is created, the <code title=dom-context-2d-textAlign><a href=#dom-context-2d-textalign>textAlign</a></code> attribute must
initially have the value <code title="">start</code>.</p>
<p>The <dfn id=dom-context-2d-textbaseline title=dom-context-2d-textBaseline><code>textBaseline</code></dfn>
@@ -35601,7 +35799,7 @@
or <code title=dom-context-2d-textBaseline-bottom><a href=#dom-context-2d-textbaseline-bottom>bottom</a></code>,
then the value must be changed to the new value. Otherwise, the new
value must be ignored. When the object implementing the
- <code><a href=#canvastext>CanvasText</a></code> interface is created, the <code title=dom-context-2d-textBaseline><a href=#dom-context-2d-textbaseline>textBaseline</a></code> attribute
+ <code><a href=#canvasdrawingstyles>CanvasDrawingStyles</a></code> interface is created, the <code title=dom-context-2d-textBaseline><a href=#dom-context-2d-textbaseline>textBaseline</a></code> attribute
must initially have the value <code title="">alphabetic</code>.</p>
</div>
@@ -35636,11 +35834,11 @@
</dl><p>The <dfn id=text-preparation-algorithm>text preparation algorithm</dfn> is as follows. It takes
as input a string <var title="">text</var>, a
- <code><a href=#canvastext>CanvasText</a></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><a href=#center>center</a></i>. (Most callers of this
+ <code><a href=#canvasdrawingstyles>CanvasDrawingStyles</a></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
@@ -35702,7 +35900,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><a href=#center>center</a></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><a href=#dom-context-2d-textalign>textAlign</a></code> and <code title=dom-context-2d-textBaseline><a href=#dom-context-2d-textbaseline>textBaseline</a></code> values as
follows:</p>
@@ -35744,7 +35942,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><a href=#center>center</a></i>.</dd>
+ <i title="">center</i>.</dd>
</dl><p>Vertical position:</p>
@@ -36069,18 +36267,12 @@
<p>The following methods allow authors to manipulate the <a href=#concept-path title=concept-path>paths</a> of objects implementing the
<code><a href=#canvaspathmethods>CanvasPathMethods</a></code> interface.</p>
- <p>The points and lines added to an object's <a href=#concept-path title=concept-path>path</a> by these methods must be
- transformed according to the <a href=#transformations title=dom-context-2d-transformation>current transformation
- matrix</a> of the object implementing the
- <code><a href=#canvaspathmethods>CanvasPathMethods</a></code> interface before they are added to
- the path.</p>
+ <p>For <code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code> objects, the points and
+ lines added to <a href=#current-default-path>current default path</a> by these methods
+ must be transformed according to the <a href=#transformations title=dom-context-2d-transformation>current transformation
+ matrix</a> before they are added to the path.</p>
- <p class=note>All objects implementing the
- <code><a href=#canvaspathmethods>CanvasPathMethods</a></code> interface also implement the
- <code><a href=#canvastransformation>CanvasTransformation</a></code> interface, and thus have a <a href=#transformations title=dom-context-2d-transformation>current transformation
- matrix</a>.</p>
-
<p>The <dfn id=dom-context-2d-moveto 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>
@@ -36246,93 +36438,90 @@
<code><a href=#path>Path</a></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><a href=#dom-path>Path</a></code>([ <var title="">element</var> ])</dt>
+ <dl class=domintro><dt><var title="">path</var> = new <code title=dom-Path><a href=#dom-path>Path</a></code>()</dt>
<dd>
- <p>Creates a new <code><a href=#path>Path</a></code> object, optionally using a specific element for resolving relative keywords and sizes in font specifications.</p>
+ <p>Creates a new empty <code><a href=#path>Path</a></code> object.</p>
</dd>
- <dt><var title="">path</var> . <code title=dom-path-addPathData><a href=#dom-path-addpathdata>addPathData</a></code>(<var title="">d</var>)</dt>
+ <dt><var title="">path</var> = new <code title=dom-Path-withdata><a href=#dom-path-withdata>Path</a></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><a href=#dom-path-addfill>addFill</a></code>(<var title="">path</var>)</dt>
- <dt><var title="">path</var> . <code title=dom-path-addStroke><a href=#dom-path-addstroke>addStroke</a></code>(<var title="">path</var>)</dt>
+ <dt><var title="">path</var> . <code title=dom-path-addPath><a href=#dom-path-addpath>addPath</a></code>(<var title="">path</var>, <var title="">transform</var>)</dt>
+ <dt><var title="">path</var> . <code title=dom-path-addPathByStrokingPath><a href=#dom-path-addpathbystrokingpath>addPathByStrokingPath</a></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><a href=#drawingstyle>DrawingStyle</a></code> object or a <code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></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><a href=#dom-path-addtext>addText</a></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><a href=#dom-path-addtext>addText</a></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><a href=#dom-path-addpathbystrokingtext>addPathByStrokingText</a></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><a href=#dom-path-addpathbystrokingtext>addPathByStrokingText</a></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><a href=#drawingstyle>DrawingStyle</a></code> object or a <code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code> object.</p>
+
</dd>
</dl><div class=impl>
- <p>Each <code><a href=#path>Path</a></code> object has a <dfn id=path-scope-node>path scope node</dfn>.</p>
+ <p>The <dfn id=dom-path title=dom-Path><code>Path()</code></dfn> constructor,
+ when invoked, must return a newly created <code><a href=#path>Path</a></code>
+ object.</p>
- <p>The <dfn id=dom-path title=dom-path><code>Path()</code></dfn> constructor,
- when invoked, must return a newly created <code><a href=#path>Path</a></code> object.
- If the constructor was passed an argument, then the
- <code><a href=#path>Path</a></code> object's <a href=#path-scope-node>path scope node</a> is that
- element. Otherwise, the object's <a href=#path-scope-node>path scope node</a> is
- the <code><a href=#document>Document</a></code> object of the <a href=#active-document>active
- document</a> of the <a href=#browsing-context>browsing context</a> of the
- <code><a href=#window>Window</a></code> object on which the interface object of the
- invoked constructor is found.</p>
+ <hr><p>The <dfn id=dom-path-withdata title=dom-Path-withdata><code>Path(<var title="">d</var>)</code></dfn> constructor must run the following
+ steps:</p>
+ <ol><li>
- <p>The <dfn id=dom-path-addpathdata title=dom-path-addPathData><code>addPathData(<var title="">d</var>)</code> method must run the following steps:</dfn></p>
+ <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>
- <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></li>
+ <p class=note>The resulting path could be empty. SVG defines
+ error handling rules for parsing and applying path data.</p>
- <li><p>If this failed in some way, then throw a
- <code><a href=#syntaxerror>SyntaxError</a></code> exception, and abort these steps.</li>
+ </li>
- <li><p>Transform all the coordinates and lines in the SVG path by
- the <a href=#transformations title=dom-context-2d-transformation>current
- transformation matrix</a> of the <code><a href=#path>Path</a></code>
- object.</li>
-
<li><p>Let (<var title="">x</var>, <var title="">y</var>) be the
last point in the SVG path.</li>
- <li><p>Add all the subpaths in the SVG path, if any, to the
- <code><a href=#path>Path</a></code> object. </p>
+ <li><p>Create a new <code><a href=#path>Path</a></code> object and add all the
+ subpaths in the SVG path, if any, to that <code><a href=#path>Path</a></code> object.
+ </p>
<li><p>Create a new subpath in the <code><a href=#path>Path</a></code> object with
(<var title="">x</var>, <var title="">y</var>) as the only point in
the subpath.</li>
- </ol><p>The <dfn id=dom-path-addfill title=dom-path-addFill><code>addFill(<var title="">b</var>)</code></dfn> method, when invoked on a
- <code><a href=#path>Path</a></code> object <var title="">a</var>, must run the
- following steps:</p>
+ <li><p>Return the <code><a href=#path>Path</a></code> object as the constructed
+ object.</li>
+ </ol><hr><p>The <dfn id=dom-path-addpath title=dom-path-addPath><code>addPath(<var title="">b</var>, <var title="">transform</var>)</code></dfn>
+ method, when invoked on a <code><a href=#path>Path</a></code> object <var title="">a</var>, must run the following steps:</p>
+
<ol><li><p>If the <code><a href=#path>Path</a></code> object <var title="">b</var> has
no subpaths, abort these steps.</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>.</li>
- <li><p>Transform all the coordinates and lines in <var title="">c</var> by the <a href=#transformations title=dom-context-2d-transformation>current transformation
- matrix</a> of <var title="">a</var>.</li>
+ <li><p>Transform all the coordinates and lines in <var title="">c</var> by the transform matrix <var title="">transform</var>, if it is not null.</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>.</li>
@@ -36342,7 +36531,7 @@
<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.</li>
- </ol><p>The <dfn id=dom-path-addstroke title=dom-path-addStroke><code>addStroke(<var title="">b</var>)</code></dfn> method, when invoked on a
+ </ol><hr><p>The <dfn id=dom-path-addpathbystrokingpath 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><a href=#path>Path</a></code> object <var title="">a</var>, must run the
following steps:</p>
@@ -36352,49 +36541,12 @@
<li><p>Create a copy of all the subpaths in <var title="">b</var>.
Let this copy be known as <var title="">c</var>.</li>
- <li><p>Transform all the coordinates and lines in <var title="">c</var> by the <a href=#transformations title=dom-context-2d-transformation>current transformation
- matrix</a> of <var title="">a</var>.</li>
+ <li><p>Transform all the coordinates and lines in <var title="">c</var> by transformation matrix <var title="">transform</var>, if it is not null.</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><a href=#dom-context-2d-linewidth>lineWidth</a></code>, <code title=dom-context-2d-lineCap><a href=#dom-context-2d-linecap>lineCap</a></code>, <code title=dom-context-2d-lineJoin><a href=#dom-context-2d-linejoin>lineJoin</a></code>, and (if
- appropriate) <code title=dom-context-2d-miterLimit><a href=#dom-context-2d-miterlimit>miterLimit</a></code> attributes).
- 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 <a href=#trace-a-path title="trace a path">tracing</a> <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>.</li>
@@ -36403,43 +36555,41 @@
<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.</li>
- </ol><p>The <dfn id=dom-context-2d-addfilltext title=dom-context-2d-addFillText><code>addFillText()</code></dfn> and
- <dfn id=dom-context-2d-addstroketext title=dom-context-2d-addStrokeText><code>addStrokeText()</code></dfn>
+ </ol><hr><p>The <dfn id=dom-path-addtext title=dom-path-addText><code>addText()</code></dfn>
+ and <dfn id=dom-path-addpathbystrokingtext 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><a href=#canvasdrawingstyles>CanvasDrawingStyles</a></code> object
+ argument for the text and (if appropriate) line styles to use, an
+ <code><a href=#svgmatrix>SVGMatrix</a></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><a href=#dom-context-2d-addstroketext>addFillText()</a></code> and <code title=dom-context-2d-addStrokeText><a href=#dom-context-2d-addstroketext>addStrokeText()</a></code> variants
+ <p>When one of the <code title=dom-path-addText><a href=#dom-path-addtext>addText()</a></code> and <code title=dom-path-addPathByStrokingText><a href=#dom-path-addpathbystrokingtext>addPathByStrokingText()</a></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 <a href=#text-preparation-algorithm>text preparation algorithm</a>, passing it
- <var title="">text</var>, the <code><a href=#path>Path</a></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><a href=#canvasdrawingstyles>CanvasDrawingStyles</a></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.</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
+ <a href=#path>path</a> 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><a href=#dom-context-2d-addstroketext>addStrokeText()</a></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><a href=#path>Path</a></code> object (the <code title=dom-context-2d-lineWidth><a href=#dom-context-2d-linewidth>lineWidth</a></code>, <code title=dom-context-2d-lineCap><a href=#dom-context-2d-linecap>lineCap</a></code>, <code title=dom-context-2d-lineJoin><a href=#dom-context-2d-linejoin>lineJoin</a></code>, and (if
- appropriate) <code title=dom-context-2d-miterLimit><a href=#dom-context-2d-miterlimit>miterLimit</a></code> attributes).
- These subpaths in <var title="">glyph subpaths</var> must also all
- wind clockwise.</p>
+ <li><p>If the method is <code title=dom-path-addPathByStrokingText><a href=#dom-path-addpathbystrokingtext>addPathByStrokingText()</a></code>,
+ replace <var title="">glyph subpaths</var> by the result of <a href=#trace-a-path title="trace a path">tracing</a> <var title="">glyph
+ subpaths</var>, using the <code><a href=#canvasdrawingstyles>CanvasDrawingStyles</a></code> object
+ argument for the line styles.</p>
- <li><p>Transform all the coordinates and lines in <var title="">glyph subpaths</var> by the <a href=#transformations title=dom-context-2d-transformation>current transformation
- matrix</a> of the <code><a href=#path>Path</a></code> object.</li>
+ <li><p>Transform all the coordinates and lines in <var title="">glyph subpaths</var> by the transformation matrix <var title="">transform</var>, if it is not null.</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>.</li>
@@ -36451,9 +36601,9 @@
(<var title="">x<sub title="">final</sub></var>, <var title="">y<sub title="">final</sub></var>) as the only point in the
subpath.</li>
- </ol><p>When one of the <code title=dom-context-2d-addFillText><a href=#dom-context-2d-addfilltext>addFillText()</a></code> and <code title=dom-context-2d-addStrokeText><a href=#dom-context-2d-addstroketext>addStrokeText()</a></code> variants
- that take as argument a <code><a href=#path>Path</a></code> object is invoked, the
- method must run the following algorithm:</p>
+ </ol><p>When one of the <code title=dom-path-addText><a href=#dom-path-addtext>addText()</a></code> and <code title=dom-path-addPathByStrokingText><a href=#dom-path-addpathbystrokingtext>addPathByStrokingText()</a></code>
+ variants that take as argument a <code><a href=#path>Path</a></code> object is
+ invoked, the method must run the following algorithm:</p>
<ol><li><p>Let <var title="">target</var> be the <code><a href=#path>Path</a></code>
object on which the method was invoked.</li>
@@ -36462,10 +36612,11 @@
that was provided in the method's arguments.</li>
<li><p>Run the <a href=#text-preparation-algorithm>text preparation algorithm</a>, 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><a href=#canvasdrawingstyles>CanvasDrawingStyles</a></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
@@ -36492,7 +36643,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><a href=#center>center</a></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>
@@ -36541,20 +36692,12 @@
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><a href=#dom-context-2d-addstroketext>addStrokeText()</a></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><a href=#dom-context-2d-linewidth>lineWidth</a></code>,
- <code title=dom-context-2d-lineCap><a href=#dom-context-2d-linecap>lineCap</a></code>, <code title=dom-context-2d-lineJoin><a href=#dom-context-2d-linejoin>lineJoin</a></code>, and (if
- appropriate) <code title=dom-context-2d-miterLimit><a href=#dom-context-2d-miterlimit>miterLimit</a></code> attributes).
- These subpaths in <var title="">glyph subpaths</var> must also
- all wind clockwise.</p>
+ <li><p>If the method is <code title=dom-path-addPathByStrokingText><a href=#dom-path-addpathbystrokingtext>addPathByStrokingText()</a></code>,
+ replace <var title="">glyph subpaths</var> by the result of <a href=#trace-a-path title="trace a path">tracing</a> <var title="">glyph
+ subpaths</var>, using the <code><a href=#canvasdrawingstyles>CanvasDrawingStyles</a></code> object
+ argument for the line styles.</p>
- <li><p>Transform all the coordinates and lines in <var title="">glyph subpaths</var> by the <a href=#transformations title=dom-context-2d-transformation>current transformation
- matrix</a> of <var title="">target</var>.</li>
+ <li><p>Transform all the coordinates and lines in <var title="">glyph subpaths</var> by the transformation matrix <var title="">transform</var>, if it is not null.</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
@@ -36573,8 +36716,134 @@
</ol></div>
- <h6 id=fill-and-stroke-styles><span class=secno>4.8.11.1.7 </span>Fill and stroke styles</h6>
+ <h6 id=transformations><span class=secno>4.8.11.1.7 </span><dfn title=dom-context-2d-transformation>Transformations</dfn></h6>
+
+ <p>Each <code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code> object has a
+ <i>current transformation matrix</i>, as well as methods (described
+ in this section) to manipulate it. When a
+ <code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></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 <a href=#current-default-path>current default path</a>, and when painting text,
+ shapes, and <code><a href=#path>Path</a></code> objects, on
+ <code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code> objects.</p> <!-- conformance
+ criteria for actual drawing are described in the various sections
+ below -->
+
+ <p class=note>Most of the API uses <code><a href=#svgmatrix>SVGMatrix</a></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><a href=#dom-context-2d-scale>scale</a></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><a href=#dom-context-2d-rotate>rotate</a></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><a href=#dom-context-2d-translate>translate</a></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><a href=#dom-context-2d-transform>transform</a></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><a href=#dom-context-2d-settransform>setTransform</a></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 id=dom-context-2d-scale 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 id=dom-context-2d-rotate 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 id=dom-context-2d-translate 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 id=dom-context-2d-transform 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><td><var title="">b</var></td>
+ <td><var title="">d</var></td>
+ <td><var title="">f</var></td>
+ <tr><td>0</td>
+ <td>0</td>
+ <td>1</td>
+ </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 id=dom-context-2d-settransform 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><a href=#dom-context-2d-transform title=dom-context-2d-transform>transform</a>(<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 id=fill-and-stroke-styles><span class=secno>4.8.11.1.8 </span>Fill and stroke styles</h6>
+
<dl class=domintro><dt><var title="">context</var> . <code title=dom-context-2d-fillStyle><a href=#dom-context-2d-fillstyle>fillStyle</a></code> [ = <var title="">value</var> ]</dt>
<dd>
@@ -36966,7 +37235,7 @@
- <h6 id=drawing-rectangles-to-the-canvas><span class=secno>4.8.11.1.8 </span>Drawing rectangles to the canvas</h6>
+ <h6 id=drawing-rectangles-to-the-canvas><span class=secno>4.8.11.1.9 </span>Drawing rectangles to the canvas</h6>
<p>There are three methods that immediately draw rectangles to the
bitmap. They each take four arguments; the first two give the <var title="">x</var> and <var title="">y</var> coordinates of the top
@@ -36983,9 +37252,9 @@
<span title=""><var title="">y</var>+<var title="">h</var></span>)</span>,
<span title="">(<var title="">x</var>, <span title=""><var title="">y</var>+<var title="">h</var></span>)</span>.</p>
- <p>Shapes are painted without affecting the current default path,
- and are subject to the <a href=#clipping-region title="clipping region">clipping
- region</a>, and, with the exception of <code title=dom-context-2d-clearRect><a href=#dom-context-2d-clearrect>clearRect()</a></code>, also <a href=#shadows title=shadows>shadow effects</a>, <a href=#dom-context-2d-globalalpha title=dom-context-2d-globalAlpha>global alpha</a>, and <a href=#dom-context-2d-globalcompositeoperation title=dom-context-2d-globalCompositeOperation>global composition
+ <p>Shapes are painted without affecting the <a href=#current-default-path>current default
+ path</a>, and are subject to the <a href=#clipping-region title="clipping
+ region">clipping region</a>, and, with the exception of <code title=dom-context-2d-clearRect><a href=#dom-context-2d-clearrect>clearRect()</a></code>, also <a href=#shadows title=shadows>shadow effects</a>, <a href=#dom-context-2d-globalalpha title=dom-context-2d-globalAlpha>global alpha</a>, and <a href=#dom-context-2d-globalcompositeoperation title=dom-context-2d-globalCompositeOperation>global composition
operators</a>.</p>
</div>
@@ -37025,19 +37294,28 @@
rectangular area using the <code title=dom-context-2d-fillStyle><a href=#dom-context-2d-fillstyle>fillStyle</a></code>. If either height
or width are zero, this method has no effect.</p>
- <p>The <dfn id=dom-context-2d-strokerect title=dom-context-2d-strokeRect><code>strokeRect(<var title="">x</var>, <var title="">y</var>, <var title="">w</var>, <var title="">h</var>)</code></dfn> method must stroke the specified
- rectangle's path using the <code title=dom-context-2d-strokeStyle><a href=#dom-context-2d-strokestyle>strokeStyle</a></code>, <code title=dom-context-2d-lineWidth><a href=#dom-context-2d-linewidth>lineWidth</a></code>, <code title=dom-context-2d-lineJoin><a href=#dom-context-2d-linejoin>lineJoin</a></code>, and (if
- appropriate) <code title=dom-context-2d-miterLimit><a href=#dom-context-2d-miterlimit>miterLimit</a></code> attributes. If
- both height and width are zero, this method has no effect, since
- there is no path to stroke (it's a point). If only one of the two is
- zero, then the method will draw a line instead (the path for the
- outline is just a straight line along the non-zero dimension).</p>
+ <p>The <dfn id=dom-context-2d-strokerect title=dom-context-2d-strokeRect><code>strokeRect(<var title="">x</var>, <var title="">y</var>, <var title="">w</var>, <var title="">h</var>)</code></dfn> method must take the result of <a href=#trace-a-path title="trace a path">tracing the path</a> described below, using
+ the <code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code> object's line styles, and
+ fill it with the <code title=dom-context-2d-strokeStyle><a href=#dom-context-2d-strokestyle>strokeStyle</a></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 <a href=#trace-a-path>trace a path</a> 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 id=drawing-text-to-the-canvas><span class=secno>4.8.11.1.9 </span>Drawing text to the canvas</h6>
+ <h6 id=drawing-text-to-the-canvas><span class=secno>4.8.11.1.10 </span>Drawing text to the canvas</h6>
<dl class=domintro><dt><var title="">context</var> . <code title=dom-context-2d-fillText><a href=#dom-context-2d-filltext>fillText</a></code>(<var title="">text</var>, <var title="">x</var>, <var title="">y</var> [, <var title="">maxWidth</var> ] )</dt>
<dt><var title="">context</var> . <code title=dom-context-2d-strokeText><a href=#dom-context-2d-stroketext>strokeText</a></code>(<var title="">text</var>, <var title="">x</var>, <var title="">y</var> [, <var title="">maxWidth</var> ] )</dt>
@@ -37100,9 +37378,10 @@
<code title=dom-context-2d-fillStyle><a href=#dom-context-2d-fillstyle>fillStyle</a></code> must be
applied to the shapes and <code title=dom-context-2d-strokeStyle><a href=#dom-context-2d-strokestyle>strokeStyle</a></code> must be
ignored. For <code title=dom-context-2d-strokeText><a href=#dom-context-2d-stroketext>strokeText()</a></code>, the reverse
- holds and <code title=dom-context-2d-strokeStyle><a href=#dom-context-2d-strokestyle>strokeStyle</a></code> must be
- applied to the shape outlines, along with the <code title=dom-context-2d-lineWidth><a href=#dom-context-2d-linewidth>lineWidth</a></code>, <code title=dom-context-2d-lineCap><a href=#dom-context-2d-linecap>lineCap</a></code>, <code title=dom-context-2d-lineJoin><a href=#dom-context-2d-linejoin>lineJoin</a></code>, and (if
- appropriate) <code title=dom-context-2d-miterLimit><a href=#dom-context-2d-miterlimit>miterLimit</a></code> attributes,
+ holds: <code title=dom-context-2d-strokeStyle><a href=#dom-context-2d-strokestyle>strokeStyle</a></code>
+ must be applied to the result of <a href=#trace-a-path title="trace a
+ path">tracing</a> the shapes using the
+ <code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code> object for the line styles,
and <code title=dom-context-2d-fillStyle><a href=#dom-context-2d-fillstyle>fillStyle</a></code> must
be ignored.</p>
@@ -37317,18 +37596,18 @@
- <h6 id=drawing-paths-to-the-canvas><span class=secno>4.8.11.1.10 </span>Drawing paths to the canvas</h6>
+ <h6 id=drawing-paths-to-the-canvas><span class=secno>4.8.11.1.11 </span>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 <a href=#drawing-state>drawing
- state</a>. The current default path is a <a href=#concept-path title=concept-path>path</a>, as described in the previous
- section.</p>
+ <p>The context always has a <dfn id=current-default-path>current default path</dfn>. There
+ is only one <a href=#current-default-path>current default path</a>, it is not part of the
+ <a href=#drawing-state>drawing state</a>. The <a href=#current-default-path>current default path</a> is
+ a <a href=#concept-path title=concept-path>path</a>, as described above.</p>
<dl class=domintro><dt><var title="">context</var> . <code title=dom-context-2d-beginPath><a href=#dom-context-2d-beginpath>beginPath</a></code>()</dt>
<dd>
- <p>Resets the current default path.</p>
+ <p>Resets the <a href=#current-default-path>current default path</a>.</p>
</dd>
@@ -37337,7 +37616,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 <a href=#current-default-path>current default path</a> or the given path with the current fill style.</p>
</dd>
@@ -37347,7 +37626,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 <a href=#current-default-path>current default path</a> or the given path with the current stroke style.</p>
</dd>
@@ -37358,7 +37637,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
+ <a href=#current-default-path>current default path</a> or hte given path, following the platform
conventions for focus rings.</p>
</dd>
@@ -37372,7 +37651,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>
+ <a href=#current-default-path>current default path</a> 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
@@ -37387,7 +37666,7 @@
<dd>
- <p>Scrolls the current default path into view. This is especially
+ <p>Scrolls the <a href=#current-default-path>current default path</a> into view. This is especially
useful on devices with small screens, where the whole canvas might
not be visible at once.</p>
@@ -37399,8 +37678,7 @@
<dd>
- <p>Further constrains the clipping region to the current default
- path.</p>
+ <p>Further constrains the clipping region to the <a href=#current-default-path>current default path</a>.</p>
</dd>
@@ -37410,30 +37688,31 @@
<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 <a href=#current-default-path>current default path</a>.</p>
</dd>
</dl><div class=impl>
<p>The <dfn id=dom-context-2d-beginpath 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
+ <a href=#current-default-path>current default path</a> 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><a href=#path>Path</a></code> argument, if one was
- provided, or the current default path otherwise.</p>
+ provided, or the <a href=#current-default-path>current default path</a> otherwise.</p>
<p>When the intended path is a <code><a href=#path>Path</a></code> object, the
coordinates of its subpaths must be transformed according to the
<code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code> object's <a href=#transformations title=dom-context-2d-transformation>current transformation
matrix</a> when used by these methods (without affecting the
<code><a href=#path>Path</a></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>
+ <a href=#current-default-path>current default path</a>, it is not affected by the
+ transform. (This is because transformations already affect the
+ <a href=#current-default-path>current default path</a> when it is constructed, so
+ applying it when it is painted as well would result in a double
+ transformation.)</p>
<p>The <dfn id=dom-context-2d-fill 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><a href=#dom-context-2d-fillstyle>fillStyle</a></code>, and using the
@@ -37447,23 +37726,24 @@
once.</p>
<p>The <dfn id=dom-context-2d-stroke 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><a href=#dom-context-2d-linewidth>lineWidth</a></code>,
- <code title=dom-context-2d-lineCap><a href=#dom-context-2d-linecap>lineCap</a></code>, <code title=dom-context-2d-lineJoin><a href=#dom-context-2d-linejoin>lineJoin</a></code>, and (if
- appropriate) <code title=dom-context-2d-miterLimit><a href=#dom-context-2d-miterlimit>miterLimit</a></code> attributes, and
- then fill the combined stroke area using the <code title=dom-context-2d-strokeStyle><a href=#dom-context-2d-strokestyle>strokeStyle</a></code> attribute.</p>
+ must apply the <a href=#trace-a-path title="trace a path">trace</a> the intended
+ path, using the <code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code> object for the
+ line styles, and then fill the combined stroke area using the <code title=dom-context-2d-strokeStyle><a href=#dom-context-2d-strokestyle>strokeStyle</a></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 <a href=#trace-a-path>trace a
+ path</a> 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>
+ <a href=#current-default-path>current default path</a>.</p>
<p>Paths, when filled or stroked, must be painted without affecting
- the current default path or any <code><a href=#path>Path</a></code> objects, and must
- be subject to <a href=#shadows title=shadows>shadow effects</a>, <a href=#dom-context-2d-globalalpha title=dom-context-2d-globalAlpha>global alpha</a>, the <a href=#clipping-region title="clipping region">clipping region</a>, and <a href=#dom-context-2d-globalcompositeoperation title=dom-context-2d-globalCompositeOperation>global composition
+ the <a href=#current-default-path>current default path</a> or any <code><a href=#path>Path</a></code>
+ objects, and must be subject to <a href=#shadows title=shadows>shadow
+ effects</a>, <a href=#dom-context-2d-globalalpha title=dom-context-2d-globalAlpha>global
+ alpha</a>, the <a href=#clipping-region title="clipping region">clipping
+ region</a>, and <a href=#dom-context-2d-globalcompositeoperation title=dom-context-2d-globalCompositeOperation>global composition
operators</a>. (The effect of transformations is described above
and varies based on which path is being used.)</p>
@@ -37695,7 +37975,7 @@
- <h6 id=drawing-images-to-the-canvas><span class=secno>4.8.11.1.11 </span>Drawing images to the canvas</h6>
+ <h6 id=drawing-images-to-the-canvas><span class=secno>4.8.11.1.12 </span>Drawing images to the canvas</h6>
<p>To draw images onto the canvas, the <dfn id=dom-context-2d-drawimage title=dom-context-2d-drawImage><code>drawImage</code></dfn> method
can be used.</p>
@@ -37839,7 +38119,7 @@
- <h6 id=pixel-manipulation><span class=secno>4.8.11.1.12 </span><dfn>Pixel manipulation</dfn></h6>
+ <h6 id=pixel-manipulation><span class=secno>4.8.11.1.13 </span><dfn>Pixel manipulation</dfn></h6>
<dl class=domintro><dt><var title="">imagedata</var> = <var title="">context</var> . <code title=dom-context-2d-createImageData><a href=#dom-context-2d-createimagedata>createImageData</a></code>(<var title="">sw</var>, <var title="">sh</var>)</dt>
@@ -38175,7 +38455,7 @@
- <h6 id=compositing><span class=secno>4.8.11.1.13 </span>Compositing</h6>
+ <h6 id=compositing><span class=secno>4.8.11.1.14 </span>Compositing</h6>
<dl class=domintro><dt><var title="">context</var> . <code title=dom-context-2d-globalAlpha><a href=#dom-context-2d-globalalpha>globalAlpha</a></code> [ = <var title="">value</var> ]</dt>
@@ -38337,7 +38617,7 @@
- <h6 id=shadows><span class=secno>4.8.11.1.14 </span><dfn>Shadows</dfn></h6>
+ <h6 id=shadows><span class=secno>4.8.11.1.15 </span><dfn>Shadows</dfn></h6>
<p>All drawing operations are affected by the four global shadow
attributes.</p>
@@ -38478,7 +38758,7 @@
<div class=impl>
- <h6 id=drawing-model><span class=secno>4.8.11.1.15 </span><dfn>Drawing model</dfn></h6>
+ <h6 id=drawing-model><span class=secno>4.8.11.1.16 </span><dfn>Drawing model</dfn></h6>
<p>When a shape or image is painted, user agents must follow these
steps, in the order given (or act as if they do):</p>
@@ -38509,7 +38789,7 @@
</ol></div>
- <h6 id=best-practices><span class=secno>4.8.11.1.16 </span>Best practices</h6>
+ <h6 id=best-practices><span class=secno>4.8.11.1.17 </span>Best practices</h6>
<p><i>This section is non-normative.</i></p>
@@ -38571,7 +38851,7 @@
attribute.</p>
- <h6 id=examples><span class=secno>4.8.11.1.17 </span>Examples</h6>
+ <h6 id=examples><span class=secno>4.8.11.1.18 </span>Examples</h6>
<p><i>This section is non-normative.</i></p>
Modified: source
===================================================================
--- source 2012-03-13 22:54:57 UTC (rev 7027)
+++ source 2012-03-19 22:29:20 UTC (rev 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<double> segments); // default empty
+ sequence<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>
More information about the Commit-Watchers
mailing list