Browse files

[giow] (0) add dashed lines and change how Path objects work to inste…

…ad use external line and font styles and transformation objects

Affected topics: Canvas, HTML

git-svn-id: http://svn.whatwg.org/webapps@7028 340c8d12-0b0e-0410-8428-c7bf67bfef74
  • Loading branch information...
1 parent 51969cb commit e98867822cb7647443377874e35dafd4efc13274 @Hixie Hixie committed Mar 19, 2012
Showing with 2,319 additions and 1,417 deletions.
  1. +738 −458 complete.html
  2. +738 −458 index
  3. +843 −501 source
View
1,196 complete.html
738 additions, 458 deletions not shown because the diff is too large. Please use a local Git client to view these changes.
View
1,196 index
738 additions, 458 deletions not shown because the diff is too large. Please use a local Git client to view these changes.
View
1,344 source
@@ -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,8 +3171,23 @@ a.setAttribute('href', 'http://example.com/'); // change the content attribute d
</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>
@@ -40556,6 +40572,18 @@ dictionary <dfn>TrackEventInit</dfn> : <span>EventInit</span> {
// 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 @@ dictionary <dfn>TrackEventInit</dfn> : <span>EventInit</span> {
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 @@ dictionary <dfn>TrackEventInit</dfn> : <span>EventInit</span> {
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 @@ dictionary <dfn>TrackEventInit</dfn> : <span>EventInit</span> {
void <span title="dom-context-2d-putImageData">putImageData</span>(<span>ImageData</span> imagedata, double dx, double dy);
void <span title="dom-context-2d-putImageData">putImageData</span>(<span>ImageData</span> imagedata, double dx, double dy, double dirtyX, double dirtyY, double dirtyWidth, double dirtyHeight);
};
-<span>CanvasRenderingContext2D</span> implements <span>CanvasTransformation</span>;
-<span>CanvasRenderingContext2D</span> implements <span>CanvasLineStyles</span>;
+<span>CanvasRenderingContext2D</span> implements <span>CanvasDrawingStyles</span>;
<span>CanvasRenderingContext2D</span> implements <span>CanvasPathMethods</span>;
-<span>CanvasRenderingContext2D</span> implements <span>CanvasText</span>;
[NoInterfaceObject]
-interface <dfn>CanvasTransformation</dfn> {
- // transformations (default transform is the identity matrix)
- void <span title="dom-context-2d-scale">scale</span>(double x, double y);
- void <span title="dom-context-2d-rotate">rotate</span>(double angle);
- void <span title="dom-context-2d-translate">translate</span>(double x, double y);
- void <span title="dom-context-2d-transform">transform</span>(double a, double b, double c, double d, double e, double f);
- void <span title="dom-context-2d-setTransform">setTransform</span>(double a, double b, double c, double d, double e, double f);
-<!--
- // v7 we've also received requests (though not many so far) for:
- void skew(...); // is this common enough that one can't just use setTransform()?
- void reflect(...); and void mirror(...); // aren't negative values in scale() sufficient for these?
--->};
-
-[NoInterfaceObject]
-interface <dfn>CanvasLineStyles</dfn> {
+interface <dfn>CanvasDrawingStyles</dfn> {
// line caps/joins
attribute double <span title="dom-context-2d-lineWidth">lineWidth</span>; // (default 1)
attribute DOMString <span title="dom-context-2d-lineCap">lineCap</span>; // "butt", "round", "square" (default "butt")
attribute DOMString <span title="dom-context-2d-lineJoin">lineJoin</span>; // "round", "bevel", "miter" (default "miter")
attribute double <span title="dom-context-2d-miterLimit">miterLimit</span>; // (default 10)
-};
-[NoInterfaceObject]
-interface <dfn>CanvasText</dfn> {
+ // dashed lines
+ void <span title="dom-context-2d-setLineDash">setLineDash</span>(sequence&lt;double> segments); // default empty
+ sequence&lt;double> <span title="dom-context-2d-getLineDash">getLineDash</span>();
+ attribute double <span title="dom-context-2d-lineDashOffset">lineDashOffset</span>;
+
// text
attribute DOMString <span title="dom-context-2d-font">font</span>; // (default 10px sans-serif)
attribute DOMString <span title="dom-context-2d-textAlign">textAlign</span>; // "start", "end", "left", "right", "center" (default: "start")
@@ -40693,20 +40707,21 @@ interface <dfn>ImageData</dfn> {
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 @@ interface <dfn>Path</dfn> {
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 @@ idea from Mihai:
</div>
- <h6><dfn title="dom-context-2d-transformation">Transformations</dfn></h6>
-
- <p>The transformation matrix is applied to coordinates when creating
- shapes and paths.</p> <!-- conformance criteria for actual drawing
- are described in the various sections below -->
-
- <div class="impl">
-
- <p>Any object that implements the <code>CanvasTransformation</code>
- interface has a <i>current transformation matrix</i>. When such an
- object is created, its transformation matrix must be initialized to
- the identity transform. It may then be adjusted using the
- transformation methods described in this section.</p>
-
- <p>The transformations must be performed in reverse order.</p>
+ <h6><code>DrawingStyle</code> objects</h6>
- <p class="note">For instance, if a scale transformation that doubles
- the width is applied to the canvas, followed by a rotation
- transformation that rotates drawing operations by a quarter turn,
- and a rectangle twice as wide as it is tall is then drawn on the
- canvas, the actual result will be a square.</p>
- <!-- q.v. http://goo.gl/5RLrN -->
-
- </div>
+ <p>All the line styles (line width, caps, joins, and dash patterns)
+ and text styles (fonts) described in the next two sections apply to
+ <code>CanvasRenderingContext2D</code> objects and to
+ <code>DrawingStyle</code> objects. This section defines the
+ constructor used to obtain a <code>DrawingStyle</code> object. This
+ object is then used by methods on <code>Path</code> objects to
+ control how text and paths are rasterised and stroked.</p>
<dl class="domintro">
- <dt><var title="">context</var> . <code title="dom-context-2d-scale">scale</code>(<var title="">x</var>, <var title="">y</var>)</dt>
- <dt><var title="">path</var> . <code title="dom-context-2d-scale">scale</code>(<var title="">x</var>, <var title="">y</var>)</dt>
+ <dt><var title="">styles</var> = new <code title="dom-DrawingStyle">DrawingStyle</code>([ <var title="">element</var> ])</dt>
<dd>
- <p>Changes the transformation matrix to apply a scaling transformation with the given characteristics.</p>
-
- </dd>
-
- <dt><var title="">context</var> . <code title="dom-context-2d-rotate">rotate</code>(<var title="">angle</var>)</dt>
- <dt><var title="">path</var> . <code title="dom-context-2d-rotate">rotate</code>(<var title="">angle</var>)</dt>
-
- <dd>
-
- <p>Changes the transformation matrix to apply a rotation transformation with the given characteristics. The angle is in radians.</p>
-
- </dd>
-
- <dt><var title="">context</var> . <code title="dom-context-2d-translate">translate</code>(<var title="">x</var>, <var title="">y</var>)</dt>
- <dt><var title="">path</var> . <code title="dom-context-2d-translate">translate</code>(<var title="">x</var>, <var title="">y</var>)</dt>
-
- <dd>
-
- <p>Changes the transformation matrix to apply a translation transformation with the given characteristics.</p>
-
- </dd>
-
- <dt><var title="">context</var> . <code title="dom-context-2d-transform">transform</code>(<var title="">a</var>, <var title="">b</var>, <var title="">c</var>, <var title="">d</var>, <var title="">e</var>, <var title="">f</var>)</dt>
- <dt><var title="">path</var> . <code title="dom-context-2d-transform">transform</code>(<var title="">a</var>, <var title="">b</var>, <var title="">c</var>, <var title="">d</var>, <var title="">e</var>, <var title="">f</var>)</dt>
-
- <dd>
-
- <p>Changes the transformation matrix to apply the matrix given by the arguments as described below.</p>
-
- </dd>
-
- <dt><var title="">context</var> . <code title="dom-context-2d-setTransform">setTransform</code>(<var title="">a</var>, <var title="">b</var>, <var title="">c</var>, <var title="">d</var>, <var title="">e</var>, <var title="">f</var>)</dt>
- <dt><var title="">path</var> . <code title="dom-context-2d-setTransform">setTransform</code>(<var title="">a</var>, <var title="">b</var>, <var title="">c</var>, <var title="">d</var>, <var title="">e</var>, <var title="">f</var>)</dt>
-
- <dd>
-
- <p>Changes the transformation matrix <em>to</em> the matrix given by the arguments as described below.</p>
+ <p>Creates a new <code>DrawingStyle</code> object, optionally
+ using a specific element for resolving relative keywords and sizes
+ in font specifications.</p>
</dd>
</dl>
<div class="impl">
- <p>The <dfn title="dom-context-2d-scale"><code>scale(<var
- title="">x</var>, <var title="">y</var>)</code></dfn> method must
- add the scaling transformation described by the arguments to the
- transformation matrix. The <var title="">x</var> argument represents
- the scale factor in the horizontal direction and the <var
- title="">y</var> argument represents the scale factor in the
- vertical direction. The factors are multiples.</p>
-
- <p>The <dfn title="dom-context-2d-rotate"><code>rotate(<var
- title="">angle</var>)</code></dfn> method must add the rotation
- transformation described by the argument to the transformation
- matrix. The <var title="">angle</var> argument represents a
- clockwise rotation angle expressed in radians.</p>
-
- <p>The <dfn title="dom-context-2d-translate"><code>translate(<var
- title="">x</var>, <var title="">y</var>)</code></dfn> method must
- add the translation transformation described by the arguments to the
- transformation matrix. The <var title="">x</var> argument represents
- the translation distance in the horizontal direction and the <var
- title="">y</var> argument represents the translation distance in the
- vertical direction. The arguments are in coordinate space units.</p>
-
- <p>The <dfn title="dom-context-2d-transform"><code>transform(<var
- title="">a</var>, <var title="">b</var>, <var title="">c</var>, <var
- title="">d</var>, <var title="">e</var>, <var
- title="">f</var>)</code></dfn> method must replace the current
- transformation matrix with the result of multiplying the current
- transformation matrix with the matrix described by:</p>
-
- </div>
-
- <table class="matrix">
- <tr>
- <td><var title="">a</var></td>
- <td><var title="">c</var></td>
- <td><var title="">e</var></td>
- </tr>
- <tr>
- <td><var title="">b</var></td>
- <td><var title="">d</var></td>
- <td><var title="">f</var></td>
- </tr>
- <tr>
- <td>0</td>
- <td>0</td>
- <td>1</td>
- </tr>
- </table>
-
- <p class="note">The arguments <var title="">a</var>, <var
- title="">b</var>, <var title="">c</var>, <var title="">d</var>, <var
- title="">e</var>, and <var title="">f</var> are sometimes called
- <var title="">m11</var>, <var title="">m12</var>, <var
- title="">m21</var>, <var title="">m22</var>, <var title="">dx</var>,
- and <var title="">dy</var> or <var title="">m11</var>, <var
- title="">m21</var>, <var title="">m12</var>, <var
- title="">m22</var>, <var title="">dx</var>, and <var
- title="">dy</var>. Care should be taken in particular with the order
- of the second and third arguments (<var title="">b</var> and <var
- title="">c</var>) as their order varies from API to API and APIs
- sometimes use the notation <var title="">m12</var>/<var
- title="">m21</var> and sometimes <var title="">m21</var>/<var
- title="">m12</var> for those positions.</p>
-
- <div class="impl">
+ <p>Each <code>DrawingStyle</code> object has a <dfn>styles scope
+ node</dfn>.</p>
<p>The <dfn
- title="dom-context-2d-setTransform"><code>setTransform(<var
- title="">a</var>, <var title="">b</var>, <var
- title="">c</var>, <var title="">d</var>, <var title="">e</var>,
- <var title="">f</var>)</code></dfn> method must reset the current
- transform to the identity matrix, and then invoke the <code><span
- title="dom-context-2d-transform">transform</span>(<var
- title="">a</var>, <var title="">b</var>, <var
- title="">c</var>, <var title="">d</var>, <var title="">e</var>,
- <var title="">f</var>)</code> method with the same arguments.</p>
+ title="dom-DrawingStyle"><code>DrawingStyle()</code></dfn>
+ constructor, when invoked, must return a newly created
+ <code>DrawingStyle</code> object. If the constructor was passed an
+ argument, then the <code>DrawingStyle</code> object's <span>styles
+ scope node</span> is that element. Otherwise, the object's
+ <span>styles scope node</span> is the <code>Document</code> object
+ of the <span>active document</span> of the <span>browsing
+ context</span> of the <code>Window</code> object on which the
+ interface object of the invoked constructor is found.</p>
</div>
-
-
<h6>Line styles</h6>
<dl class="domintro">
<dt><var title="">context</var> . <code title="dom-context-2d-lineWidth">lineWidth</code> [ = <var title="">value</var> ]</dt>
- <dt><var title="">path</var> . <code title="dom-context-2d-lineWidth">lineWidth</code> [ = <var title="">value</var> ]</dt>
+ <dt><var title="">styles</var> . <code title="dom-context-2d-lineWidth">lineWidth</code> [ = <var title="">value</var> ]</dt>
<dd>
@@ -41044,7 +40944,7 @@ idea from Mihai:
</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 @@ idea from Mihai:
</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 @@ idea from Mihai:
</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 @@ idea from Mihai:
</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 @@ idea from Mihai:
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,25 +41047,17 @@ idea from Mihai:
<p>The <dfn
title="dom-context-2d-lineCap"><code>lineCap</code></dfn> attribute
- defines the type of endings that UAs will place on the end of
- lines. The three valid values are <code>butt</code>,
- <code>round</code>, and <code>square</code>. The <code>butt</code>
- value means that the end of each line has a flat edge perpendicular
- to the direction of the line (and that no additional line cap is
- added). The <code>round</code> value means that a semi-circle with
- the diameter equal to the width of the line must then be added on to
- the end of the line. The <code>square</code> value means that a
- rectangle with the length of the line width and the width of half
- the line width, placed flat against the edge perpendicular to the
- direction of the line, must be added at the end of each line.</p>
+ defines the type of endings that UAs will place on the end of lines.
+ The three valid values are <code>butt</code>, <code>round</code>,
+ and <code>square</code>.</p>
<p>On getting, it must return the current value. On setting, if the
new value is one of the literal strings <code>butt</code>,
<code>round</code>, and <code>square</code>, then the current value
must be changed to the new value; other values must ignored, leaving
the value unchanged.</p>
- <p>When the object implementing the <code>CanvasLineStyles</code>
+ <p>When the object implementing the <code>CanvasDrawingStyles</code>
interface is created, the <code
title="dom-context-2d-lineCap">lineCap</code> attribute must
initially have the value <code>butt</code>.</p>
@@ -41147,85 +41076,380 @@ idea from Mihai:
must be changed to the new value; other values must be ignored,
leaving the value unchanged.</p>
- <p>When the object implementing the <code>CanvasLineStyles</code>
+ <p>When the object implementing the <code>CanvasDrawingStyles</code>
interface is created, the <code
title="dom-context-2d-lineJoin">lineJoin</code> attribute must
initially have the value <code>miter</code>.</p>
<hr>
- <p>A join exists at any point in a subpath shared by two consecutive
- lines. When a subpath is closed, then a join also exists at its
- first point (equivalent to its last point) connecting the first and
- last lines in the subpath.</p>
-
- <p>In addition to the point where the join occurs, two additional
- points are relevant to each join, one for each line: the two corners
- found half the line width away from the join point, one
- perpendicular to each line, each on the side furthest from the other
- line.</p>
-
- <p>A filled triangle connecting these two opposite corners with a
- straight line, with the third point of the triangle being the join
- point, must be added at all joins. The <code
- title="dom-context-2d-lineJoin">lineJoin</code> attribute controls
- whether anything else is rendered. The three aforementioned values
- have the following meanings:</p>
-
- <p>The <code>bevel</code> value means that this is all that is
- rendered at joins.</p>
-
- <p>The <code>round</code> value means that a filled arc connecting
- the two aforementioned corners of the join, abutting (and not
- overlapping) the aforementioned triangle, with the diameter equal to
- the line width and the origin at the point of the join, must be
- added at joins.</p>
-
- <p>The <code>miter</code> value means that a second filled triangle
- must (if it can given the miter length) be added at the join,
- with one line being the line between the two aforementioned corners,
- abutting the first triangle, and the other two being continuations of
- the outside edges of the two joining lines, as long as required to
- intersect without going over the miter length.</p>
-
- <p>The miter length is the distance from the point where the join
- occurs to the intersection of the line edges on the outside of the
- join. The miter limit ratio is the maximum allowed ratio of the
- miter length to half the line width. If the miter length would cause
- the miter limit ratio to be exceeded, this second triangle must not
- be added.</p>
-
- <p>The miter limit ratio can be explicitly set using the <dfn
+ <p>When the <code title="dom-context-2d-lineJoin">lineJoin</code>
+ attribute has the value <code>miter</code>, strokes use the miter
+ limit ratio to decide how to render joins. The miter limit ratio can
+ be explicitly set using the <dfn
title="dom-context-2d-miterLimit"><code>miterLimit</code></dfn>
attribute. On getting, it must return the current value. On setting,
zero, negative, infinite, and NaN values must be ignored, leaving
the value unchanged; other values must change the current value to
the new value.</p>
- <p>When the object implementing the <code>CanvasLineStyles</code>
+ <p>When the object implementing the <code>CanvasDrawingStyles</code>
interface is created, the <code
title="dom-context-2d-miterLimit">miterLimit</code> attribute must
initially have the value <code>10.0</code>.</p>
- <!--
-v5: dashed lines have been requested. Philip Taylor provides these
-notes on what would need to be defined for dashed lines:
-> I don't think it's entirely trivial to add, to the detail that's
-> necessary in a specification. The common graphics APIs (at least
-> Cairo, Quartz and java.awt.Graphics, and any SVG implementation) all
-> have dashes specified by passing an array of dash lengths (alternating
-> on/off), so that should be alright as long as you define what units
-> it's measured in and what happens when you specify an odd number of
-> values and how errors are handled and what happens if you update the
-> array later. But after that, what does it do when stroking multiple
-> subpaths, in terms of offsetting the dashes? When you use strokeRect,
-> where is offset 0? Does moveTo reset the offset? How does it interact
-> with lineCap/lineJoin? All the potential issues need test cases too,
-> and the implementations need to make sure they handle any edge cases
-> that the underlying graphics library does differently. (SVG Tiny 1.2
-> appears to skip some of the problems by leaving things undefined and
-> allowing whatever behavior the graphics library has.)
--->
+ <hr>
+
+ <p>Each <code>CanvasDrawingStyles</code> object has a <dfn>dash
+ list</dfn>, which is either empty or consists of an even number of
+ positive non-zero numbers. Initially, the <span>dash list</span>
+ must be empty.</p>
+
+ <p>When the <dfn
+ title="dom-context-2d-setLineDash"><code>setLineDash()</code></dfn>
+ method is invoked, it must run the following steps:</p>
+
+ <ol>
+
+ <li><p>Let <var title="">a</var> be a copy of the array provided as
+ the argument.</p></li>
+
+ <li><p>If any value in the array is not finite (e.g. an Infinity or
+ a NaN value), or if any value is negative (less than zero), then
+ abort these steps.</p></li>
+
+ <li><p>If the number of elements in <var title="">a</var> is odd,
+ then let <var title="">a</var> be the concatentation of two copies
+ of <var title="">a</var>.</p></li>
+
+ <li><p>Let the object's <span>dash list</span> be <var
+ title="">a</var>.</p></li>
+
+ </ol>
+
+ <p>When the <dfn
+ title="dom-context-2d-getLineDash"><code>getLineDash()</code></dfn>
+ method is invoked, it must return a newly created array whose values
+ are the values of the object's <span>dash list</span>, in the same
+ order.</p>
+
+ <p>It is sometimes useful to change the "phase" of the dash pattern,
+ e.g. to achieve a "marching ants" effect. The phase can be set using
+ the <dfn
+ title="dom-context-2d-lineDashOffset"><code>lineDashOffset</code></dfn>
+ attribute. On getting, it must return the current value. On setting,
+ infinite and NaN values must be ignored, leaving the value
+ unchanged; other values must change the current value to the new
+ value.</p>
+
+ <p>When the object implementing the <code>CanvasDrawingStyles</code>
+ interface is created, the <code
+ title="dom-context-2d-lineDashOffset">lineDashOffset</code>
+ attribute must initially have the value <code>0.0</code>.</p>
+
+ <hr>
+
+ <p>When a user agent is to <dfn>trace a <span>path</span></dfn>,
+ given an object <var title="">style</var> that implements the
+ <code>CanvasDrawingStyles</code> interface, it must run the following
+ algorith. This algorithm returns a new <span>path</span>.</p>
+
+ <ol>
+
+ <li><p>Let <var title="">path</var> be a copy of the path being
+ traced.</p></li>
+
+ <li><p>Remove from <var title="">path</var> any subpaths containing
+ no lines (i.e. empty subpaths with zero points, and subpaths with
+ just one point).</p></li>
+
+ <li><p>Replace each point in each subpath of <var
+ title="">path</var> other than the first point and the last point
+ of each subpath by a <i>join</i> that joins the line leading to
+ that point to the line leading out of that point, such that the
+ subpaths all consist of two points (a starting point with a line
+ leading out of it, and an ending point with a line leading into
+ it), one or more lines (connecting the points and the joins), and
+ zero or more joins (each connecting one line to another), connected
+ together such that each subpath is a series of one or more lines
+ with a join between each one and a point on each end.</p></li>
+
+ <li><p>Add a straight closing line to each closed subpath in <var
+ title="">path</var> connecting the last point and the first point
+ of that subpath; change the last point to a join (from the
+ previously last line to the newly added closing line), and change
+ the first point to a join (from the newly added closing line to the
+ first line).</p>
+
+ <li><p>If the <var title="">styles</var> <span>dash list</span> is
+ empty, jump to the step labeled <i>joins</i>.</p></li>
+
+ <li><p>Let <var title="">width</var> be the aggregate length of all
+ the lines of all the subpaths in <var title="">path</var>, in
+ coordinate space units.</p></li>
+
+ <li><p>Let <var title="">offset</var> be the value of the <var
+ title="">styles</var> <code
+ title="dom-context-2d-lineDashOffset">lineDashOffset</code>, in
+ coordinate space units.</p></li>
+
+ <li>
+
+ <p>While <var title="">offset</var> is greater than <var
+ title="">width</var>, decrement it by <var
+ title="">width</var>.</p>
+
+ <p>While <var title="">offset</var> is less than <var
+ title="">width</var>, increment it by <var
+ title="">width</var>.</p>
+
+ </li>
+
+ <li><p><i>Offset subpath</i>: If <var title="">offset</var> is
+ non-zero, add a new subpath at the start of <var
+ title="">path</var> consisting of two points connected by a line
+ whose length is <var title="">offset</var> coordinate space units.
+ (This path is temporary and will be removed in the <i>joins</i>
+ step below. Its purpose is to offset the dash pattern.)</p>
+
+ <li><p>Define <var title="">L</var> to be a linear coordinate line
+ defined along all lines in all the subpaths in <var
+ title="">path</var>, such that the start of the first line in the
+ first subpath is defined as coordinate 0, and the end of the last
+ line in the last subpath is defined as coordinate <var
+ title="">width</var>.</p></li>
+
+ <li><p>Let <var title="">position</var> be 0.</p></li>
+
+ <li><p>Let <var title="">index</var> be 0.</p></li>
+
+ <li><p>Let <var title="">current state</var> be <i>off</i> (the
+ other states being <i>on</i> and <i>zero-on</i>).</p></li>
+
+ <li><p><i>Dash On</i>: Let <var title="">segment length</var> be
+ the value of the <var title="">styles</var> <span>dash
+ list</span>'s <var title="">index</var>th entry.</p></li>
+
+ <li><p>Increment <var title="">position</var> by <var
+ title="">segment length</var>.</p></li>
+
+ <li><p>If <var title="">position</var> is greater than <var
+ title="">width</var>, then jump to the step labeled
+ <i>joins</i>.</p></li>
+
+ <li><p>If <var title="">segment length</var> is non-zero, let <var
+ title="">current state</var> be <i>on</i>.</p></li>
+
+ <li><p>Increment <var title="">index</var> by one.</p></li>
+
+ <li><p><i>Dash Off</i>: Let <var title="">segment length</var> be
+ the value of the <var title="">styles</var> <span>dash
+ list</span>'s <var title="">index</var>th entry.</p></li>
+
+ <li><p>Let <var title="">start</var> be the offset <var
+ title="">position</var> on <var title="">L</var>.</p></li>
+
+ <li><p>Increment <var title="">position</var> by <var
+ title="">segment length</var>.</p></li>
+
+ <li><p>If <var title="">position</var> is greater than <var
+ title="">width</var>, then let <var title="">end</var> be the
+ offset <var title="">width</var> on <var title="">L</var>.
+ Otherwise, let <var title="">end</var> be the offset <var
+ title="">position</var> on <var title="">L</var>.</p></li>
+
+ <li>
+
+ <p>Jump to the first appropriate step:</p>
+
+ <dl class="switch">
+
+ <dt>If <var title="">segment length</var> is zero and <var title="">current state</var> is <i>off</i></dt>
+
+ <dd>
+
+ <p>Do nothing, just continue to the next step.</p>
+
+ </dd>
+
+
+ <dt>If <var title="">current state</var> is <i>off</i></dt>
+
+ <dd>
+
+ <p>Cut the line on which <var title="">end</var> finds itself
+ short at <var title="">end</var> and place a point there,
+ cutting the subpath that it was in in two; remove all line
+ segments, joins, points, and subpaths that are between <var
+ title="">start</var> and <var title="">end</var>; and finally
+ place a single point at <var title="">start</var> with no lines
+ connecting to it.</p>
+
+ <p>The point has a <i>directionality</i> for the purposes of
+ drawing line caps (see below). The directionality is the
+ direction that the original line had at that point (i.e. when
+ <var title="">L</var> was defined above).</p>
+
+ </dd>
+
+
+ <dt>Otherwise</dt>
+
+ <dd>
+
+ <p>Cut the line on which <var title="">start</var> finds itself
+ into two at <var title="">start</var> and place a point there,
+ cutting the subpath that it was in in two, and similarly cut the
+ line on which <var title="">end</var> finds itself short at <var
+ title="">end</var> and place a point there, cutting the subpath
+ that <em>it</em> was in in two, and then remove all line segments,
+ joins, points, and subpaths that are between <var
+ title="">start</var> and <var title="">end</var>.</p>
+
+ <p>If <var title="">start</var> and <var title="">end</var> are
+ the same point, then this results in just the line being cut in
+ two and two points being inserted there, with nothing being
+ removed, unless a join also happens to be at that point, in which
+ case the join must be removed.</p>
+
+ </dd>
+
+ </dl>
+
+ </li>
+
+ <li><p>If <var title="">position</var> is greater than <var
+ title="">width</var>, then jump to the step labeld
+ <i>joins</i>.</p></li>
+
+ <li><p>If <var title="">segment length</var> is greater than zero,
+ let <var title="">positioned-at-on-dash</var> be false.</p></li>
+
+ <li><p>Increment <var title="">index</var> by one. If it is equal
+ to the number of entries in the <var title="">styles</var>
+ <span>dash list</span>, then let <var title="">index</var> be
+ 0.</p></li>
+
+ <li><p>Return to the step labeled <i>dash on</i>.</p></li>
+
+ <li><p><i>Joins</i>: Remove from <var title="">path</var> any
+ subpath that originally formed part of the subpath added in the
+ <i>offset subpath</i> step above.</p></li>
+
+ <li>
+
+ <p>Create a new <span>path</span> that describes the result of
+ inflating the paths in <var title="">path</var> perpendicular to
+ the direction of the path to the <var title="">styles</var> <code
+ title="dom-context-2d-lineWidth">lineWidth</code> width, replacing
+ each point with the end cap necessary to satisfy the <var
+ title="">styles</var> <code
+ title="dom-context-2d-lineCap">lineCap</code> attribute as
+ described previously and elaborated below, and replacing each join
+ with the join necessary to satisfy the <var title="">styles</var>
+ <code title="dom-context-2d-lineJoin">lineJoin</code> type, as
+ defined below.</p>
+
+ <p><strong>Caps</strong>: Each point has a flat edge perpendicular
+ to the direction of the line coming out of it. This is them
+ augmented according to the value of the <var title="">styles</var>
+ <code title="dom-context-2d-lineCap">lineCap</code>. The
+ <code>butt</code> value means that no additional line cap is
+ added. The <code>round</code> value means that a semi-circle with
+ the diameter equal to the <var title="">styles</var> <code
+ title="dom-context-2d-lineWidth">lineWidth</code> width must
+ additionally be placed on to the line coming out of each point.
+ The <code>square</code> value means that a rectangle with the
+ length of the <var title="">styles</var> <code
+ title="dom-context-2d-lineWidth">lineWidth</code> width and the
+ width of half the <var title="">styles</var> <code
+ title="dom-context-2d-lineWidth">lineWidth</code> width, placed
+ flat against the edge perpendicular to the direction of the line
+ coming out of the point, must be added at each point.</p>
+
+ <p>Points with no lines coming out of them must have two caps
+ placed back-to-back as if it was really two points connected to
+ each other by an infinitesimally short straight line in the
+ direction of the point's <i>directionality</i> (as defined
+ above).</p>
+
+ <p><strong>Joins</strong>: In addition to the point where a join
+ occurs, two additional points are relevant to each join, one for
+ each line: the two corners found half the line width away from the
+ join point, one perpendicular to each line, each on the side
+ furthest from the other line.</p>
+
+ <p>A filled triangle connecting these two opposite corners with a
+ straight line, with the third point of the triangle being the join
+ point, must be added at all joins. The <code
+ title="dom-context-2d-lineJoin">lineJoin</code> attribute controls
+ whether anything else is rendered. The three aforementioned values
+ have the following meanings:</p>
+
+ <p>The <code>bevel</code> value means that this is all that is
+ rendered at joins.</p>
+
+ <p>The <code>round</code> value means that a filled arc connecting
+ the two aforementioned corners of the join, abutting (and not
+ overlapping) the aforementioned triangle, with the diameter equal
+ to the line width and the origin at the point of the join, must be
+ added at joins.</p>
+
+ <p>The <code>miter</code> value means that a second filled
+ triangle must (if it can given the miter length) be added at the
+ join, with one line being the line between the two aforementioned
+ corners, abutting the first triangle, and the other two being
+ continuations of the outside edges of the two joining lines, as
+ long as required to intersect without going over the miter
+ length.</p>
+
+ <p>The miter length is the distance from the point where the join
+ occurs to the intersection of the line edges on the outside of the
+ join. The miter limit ratio is the maximum allowed ratio of the
+ miter length to half the line width. If the miter length would
+ cause the miter limit ratio (as set by the <var
+ title="">style</var> <code
+ title="dom-context-2d-miterLimit">miterLimit</code> attribute) to
+ be exceeded, this second triangle must not be added.</p>
+
+ <p>Subpaths in the newly created path must wind clockwise,
+ regardless of the direction of paths in <var
+ title="">path</var>.</p>
+ <!--
+ ...because both of these examples result in two lines (assuming
+ non-zero winding rules, things are different under even/odd),
+ there's no "hole" where the lines overlap:
+
+ c.beginPath();
+ c.lineWidth=30;
+ c.moveTo(200,200); // subpath 1
+ c.lineTo(400,200);
+ c.moveTo(400,210); // subpath 2
+ c.lineTo(200,190);
+ c.stroke();
+
+ c.beginPath();
+ c.lineWidth=30;
+ c.moveTo(200,200); // subpath 1
+ c.lineTo(400,200);
+ c.lineTo(300,300);
+ c.closePath();
+ c.moveTo(400,210); // subpath 2
+ c.lineTo(200,190);
+ c.lineTo(300,300);
+ c.closePath();
+ c.stroke();
+
+ ...and we want the same result when you create the two subpaths
+ in each example above as two Paths, stroke them onto a third
+ Path, and then fill that Path on the context.
+ -->
+
+ </li>
+
+ <li><p>Return the newly created path.</p></li>
+
+ </ol>
<!--v6: Another request has been for hairline width lines, that remain
hairline width with transform. ack Shaun Morris. -->
@@ -41238,7 +41462,7 @@ hairline width with transform. ack Shaun Morris. -->
<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 @@ hairline width with transform. ack Shaun Morris. -->
</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 @@ hairline width with transform. ack Shaun Morris. -->
</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 @@ hairline width with transform. ack Shaun Morris. -->
<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 @@ hairline width with transform. ack Shaun Morris. -->
</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 @@ hairline width with transform. ack Shaun Morris. -->
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 @@ hairline width with transform. ack Shaun Morris. -->
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 @@ hairline width with transform. ack Shaun Morris. -->
<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 @@ hairline width with transform. ack Shaun Morris. -->
<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 @@ hairline width with transform. ack Shaun Morris. -->
<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,19 +42135,11 @@ try {
title="concept-path">paths</span> of objects implementing the
<code>CanvasPathMethods</code> interface.</p>
- <p>The points and lines added to an object's <span
- title="concept-path">path</span> by these methods must be
- transformed according to the <span
- title="dom-context-2d-transformation">current transformation
- matrix</span> of the object implementing the
- <code>CanvasPathMethods</code> interface before they are added to
- the path.</p>
-
- <p class="note">All objects implementing the
- <code>CanvasPathMethods</code> interface also implement the
- <code>CanvasTransformation</code> interface, and thus have a <span
+ <p>For <code>CanvasRenderingContext2D</code> objects, the points and
+ lines added to <span>current default path</span> by these methods
+ must be transformed according to the <span
title="dom-context-2d-transformation">current transformation
- matrix</span>.</p>
+ matrix</span> before they are added to the path.</p>
<p>The <dfn title="dom-context-2d-moveTo"><code>moveTo(<var
@@ -42159,93 +42375,95 @@ try {
<dl class="domintro">
- <dt><var title="">path</var> = new <code title="dom-path">Path</code>([ <var title="">element</var> ])</dt>
+ <dt><var title="">path</var> = new <code title="dom-Path">Path</code>()</dt>
<dd>
- <p>Creates a new <code>Path</code> object, optionally using a specific element for resolving relative keywords and sizes in font specifications.</p>
+ <p>Creates a new empty <code>Path</code> object.</p>
</dd>
- <dt><var title="">path</var> . <code title="dom-path-addPathData">addPathData</code>(<var title="">d</var>)</dt>
+ <dt><var title="">path</var> = new <code title="dom-Path-withdata">Path</code>(<var title="">d</var>)</dt>
<dd>
- <p>Adds to the path the path described by the argument, interpreted as SVG path data. <a href="#refsSVG">[SVG]</a></p>
+ <p>Creates a new path with the path described by the argument, interpreted as SVG path data. <a href="#refsSVG">[SVG]</a></p>
</dd>
- <dt><var title="">path</var> . <code title="dom-path-addFill">addFill</code>(<var title="">path</var>)</dt>
- <dt><var title="">path</var> . <code title="dom-path-addStroke">addStroke</code>(<var title="">path</var>)</dt>
+ <dt><var title="">path</var> . <code title="dom-path-addPath">addPath</code>(<var title="">path</var>, <var title="">transform</var>)</dt>
+ <dt><var title="">path</var> . <code title="dom-path-addPathByStrokingPath">addPathByStrokingPath</code>(<var title="">path</var>, <var title="">styles</var>, <var title="">transform</var>)</dt>
<dd>
<p>Adds to the path the path given by the argument.</p>
+ <p>In the case of the stroking variants, the line styles are taken from the <var title="">styles</var> argument, which can be either a <code>DrawingStyle</code> object or a <code>CanvasRenderingContext2D</code> object.</p>
+
</dd>
- <dt><var title="">path</var> . <code title="dom-path-addFillText">addFillText</code>(<var title="">text</var>, <var title="">x</var>, <var title="">y</var> [, <var title="">maxWidth</var> ])</dt>
- <dt><var title="">path</var> . <code title="dom-path-addFillText">addFillText</code>(<var title="">text</var>, <var title="">path</var> [, <var title="">maxWidth</var> ])</dt>
- <dt><var title="">path</var> . <code title="dom-path-addStrokeText">addStrokeText</code>(<var title="">text</var>, <var title="">x</var>, <var title="">y</var> [, <var title="">maxWidth</var> ])</dt>
- <dt><var title="">path</var> . <code title="dom-path-addStrokeText">addStrokeText</code>(<var title="">text</var>, <var title="">path</var> [, <var title="">maxWidth</var> ])</dt>
+ <dt><var title="">path</var> . <code title="dom-path-addText">addText</code>(<var title="">text</var>, <var title="">styles</var>, <var title="">transform</var>, <var title="">x</var>, <var title="">y</var> [, <var title="">maxWidth</var> ])</dt>
+ <dt><var title="">path</var> . <code title="dom-path-addText">addText</code>(<var title="">text</var>, <var title="">styles</var>, <var title="">transform</var>, <var title="">path</var> [, <var title="">maxWidth</var> ])</dt>
+ <dt><var title="">path</var> . <code title="dom-path-addPathByStrokingText">addPathByStrokingText</code>(<var title="">text</var>, <var title="">styles</var>, <var title="">transform</var>, <var title="">x</var>, <var title="">y</var> [, <var title="">maxWidth</var> ])</dt>
+ <dt><var title="">path</var> . <code title="dom-path-addPathByStrokingText">addPathByStrokingText</code>(<var title="">text</var>, <var title="">styles</var>, <var title="">transform</var>, <var title="">path</var> [, <var title="">maxWidth</var> ])</dt>
<dd>
<p>Adds to the path a series of subpaths corresponding to the given text. If the arguments give a coordinate, the text is drawn horizontally at the given coordinates. If the arguments give a path, the text is drawn along the path. If a maximum width is provided, the text will be scaled to fit that width if necessary.</p>
+ <p>The font, and in the case of the stroking variants, the line styles, are taken from the <var title="">styles</var> argument, which can be either a <code>DrawingStyle</code> object or a <code>CanvasRenderingContext2D</code> object.</p>
+
</dd>
</dl>
<div class="impl">
- <p>Each <code>Path</code> object has a <dfn>path scope node</dfn>.</p>
-
- <p>The <dfn title="dom-path"><code>Path()</code></dfn> constructor,
- when invoked, must return a newly created <code>Path</code> object.
- If the constructor was passed an argument, then the
- <code>Path</code> object's <span>path scope node</span> is that
- element. Otherwise, the object's <span>path scope node</span> is
- the <code>Document</code> object of the <span>active
- document</span> of the <span>browsing context</span> of the
- <code>Window</code> object on which the interface object of the
- invoked constructor is found.</p>
+ <p>The <dfn title="dom-Path"><code>Path()</code></dfn> constructor,
+ when invoked, must return a newly created <code>Path</code>
+ object.</p>
+ <hr>
- <p>The <dfn title="dom-path-addPathData"><code>addPathData(<var
- title="">d</var>)</code> method must run the following steps:</p>
+ <p>The <dfn title="dom-Path-withdata"><code>Path(<var
+ title="">d</var>)</code></dfn> constructor must run the following
+ steps:</p>
<ol>
- <li><p>Parse and interpret the <var title="">d</var> argument
- according to the SVG specification's rules for path data, thus
- obtaining an SVG path. <a href="#refsSVG">[SVG]</a></p></li>
+ <li>
- <li><p>If this failed in some way, then throw a
- <code>SyntaxError</code> exception, and abort these steps.</p></li>
+ <p>Parse and interpret the <var title="">d</var> argument
+ according to the SVG specification's rules for path data, thus
+ obtaining an SVG path. <a href="#refsSVG">[SVG]</a></p>
- <li><p>Transform all the coordinates and lines in the SVG path by
- the <span title="dom-context-2d-transformation">current
- transformation matrix</span> of the <code>Path</code>
- object.</p></li>
+ <p class="note">The resulting path could be empty. SVG defines
+ error handling rules for parsing and applying path data.</p>
+
+ </li>
<li><p>Let (<var title="">x</var>, <var title="">y</var>) be the
last point in the SVG path.</p></li>
- <li><p>Add all the subpaths in the SVG path, if any, to the
- <code>Path</code> object. </p>
+ <li><p>Create a new <code>Path</code> object and add all the
+ subpaths in the SVG path, if any, to that <code>Path</code> object.
+ </p>
<li><p>Create a new subpath in the <code>Path</code> object with
(<var title="">x</var>, <var title="">y</var>) as the only point in
the subpath.</p></li>
+ <li><p>Return the <code>Path</code> object as the constructed
+ object.</p></li>
+
</ol>
+ <hr>
- <p>The <dfn title="dom-path-addFill"><code>addFill(<var
- title="">b</var>)</code></dfn> method, when invoked on a
- <code>Path</code> object <var title="">a</var>, must run the
- following steps:</p>
+ <p>The <dfn title="dom-path-addPath"><code>addPath(<var
+ title="">b</var>, <var title="">transform</var>)</code></dfn>
+ method, when invoked on a <code>Path</code> object <var
+ title="">a</var>, must run the following steps:</p>
<ol>
@@ -42256,9 +42474,8 @@ try {
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 @@ try {
</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,53 +42507,13 @@ try {
Let this copy be known as <var title="">c</var>.</p></li>
<li><p>Transform all the coordinates and lines in <var
- title="">c</var> by the <span
- title="dom-context-2d-transformation">current transformation
- matrix</span> of <var title="">a</var>.</p></li>
-
- <li><p>Create a new list of subpaths <var title="">d</var>,
- consisting of the subpaths necessary to describe the result of
- tracing the subpaths in <var title="">c</var>, in the same order,
- while applying the line styles of <var title="">a</var> (the <code
- title="dom-context-2d-lineWidth">lineWidth</code>, <code
- title="dom-context-2d-lineCap">lineCap</code>, <code
- title="dom-context-2d-lineJoin">lineJoin</code>, and (if
- appropriate) <code
- title="dom-context-2d-miterLimit">miterLimit</code> attributes).
- Subpaths in <var title="">d</var> must wind clockwise, regardless
- of the direction of paths in <var title="">c</var>.</p>
+ title="">c</var> by transformation matrix <var
+ title="">transform</var>, if it is not null.</p></li>
- <!--
-
- Because both of these examples result in two lines (assuming
- non-zero winding rules, things are different under even/odd),
- there's no "hole" where the lines overlap:
-
- c.beginPath();
- c.lineWidth=30;
- c.moveTo(200,200); // subpath 1
- c.lineTo(400,200);
- c.moveTo(400,210); // subpath 2
- c.lineTo(200,190);
- c.stroke();
-
- c.beginPath();
- c.lineWidth=30;
- c.moveTo(200,200); // subpath 1
- c.lineTo(400,200);
- c.lineTo(300,300);
- c.closePath();
- c.moveTo(400,210); // subpath 2
- c.lineTo(200,190);
- c.lineTo(300,300);
- c.closePath();
- c.stroke();
-
- ...and we want the same result when you create the two subpaths
- in each example above as two Paths, stroke them onto a third
- Path, and then fill that Path on the context.
-
- -->
+ <li><p>Let a new list of subpaths <var title="">d</var> be the
+ result of <span title="trace a path">tracing</span> <var
+ title="">c</var>, using the <var title="">styles</var> argument for
+ the line styles.</p>
<li><p>Let (<var title="">x</var>, <var title="">y</var>) be the
last point in the last subpath of <var title="">d</var>.</p></li>
@@ -42346,60 +42527,56 @@ try {
</ol>
- <p>The <dfn
- title="dom-context-2d-addFillText"><code>addFillText()</code></dfn> and
- <dfn
- title="dom-context-2d-addStrokeText"><code>addStrokeText()</code></dfn>
+ <hr>
+
+ <p>The <dfn title="dom-path-addText"><code>addText()</code></dfn>
+ and <dfn
+ title="dom-path-addPathByStrokingText"><code>addPathByStrokingText()</code></dfn>
methods each come in two variants: one rendering text at a given
coordinate, and one rendering text along a given path. In both
- cases, a maximum width can optionally be provided.</p>
+ cases, the methods take a <code>CanvasDrawingStyles</code> object
+ argument for the text and (if appropriate) line styles to use, an
+ <code>SVGMatrix</code> object <var title="">transform</var> (which
+ can be null), and a maximum width can optionally be provided.</p>
<p>When one of the <code
- title="dom-context-2d-addStrokeText">addFillText()</code> and <code
- title="dom-context-2d-addStrokeText">addStrokeText()</code> variants
+ title="dom-path-addText">addText()</code> and <code
+ title="dom-path-addPathByStrokingText">addPathByStrokingText()</code> variants
that take as argument an (<var title="">x</var>, <var
title="">y</var>) coordinate is invoked, the method must run the
following algorithm:</p>
<ol>
<li><p>Run the <span>text preparation algorithm</span>, passing it
- <var title="">text</var>, the <code>Path</code> object, and, if the
- <var title="">maxWidth</var> argument was provided, that argument.
- Let <var title="">glyphs</var> be the result.</p>
+ <var title="">text</var>, the <code>CanvasDrawingStyles</code>
+ object argument, and, if the <var title="">maxWidth</var> argument
+ was provided, that argument. Let <var title="">glyphs</var> be the
+ result.</p>
<li><p>Move all the shapes in <var title="">glyphs</var> to the
right by <var title="">x</var> CSS pixels and down by <var
title="">y</var> CSS pixels.</p></li>
- <li><p>Let <var title="">glyph subpaths</var> be a list of subpaths
- describing the shapes given in <var title="">glyphs</var>, with
- each CSS pixel in the coordinate space of <var
- title="">glyphs</var> mapped to one coordinate space unit in <var
- title="">glyph subpaths</var>. Subpaths in <var title="">glyph
- subpaths</var> must wind clockwise, regardless of how the user
- agent's font subsystem renders fonts and regardless of how the
- fonts themselves are defined.</p>
+ <li><p>Let <var title="">glyph subpaths</var> be a
+ <span>path</span> describing the shapes given in <var
+ title="">glyphs</var>, with each CSS pixel in the coordinate space
+ of <var title="">glyphs</var> mapped to one coordinate space unit
+ in <var title="">glyph subpaths</var>. Subpaths in <var
+ title="">glyph subpaths</var> must wind clockwise, regardless of
+ how the user agent's font subsystem renders fonts and regardless of
+ how the fonts themselves are defined.</p>
<li><p>If the method is <code
- title="dom-context-2d-addStrokeText">addStrokeText()</code>,
- replace <var title="">glyph subpaths</var> by a new list of
- subpaths consisting of the subpaths necessary to describe the
- result of tracing the subpaths added to <var title="">glyph
- subpaths</var> in the preview step, in the same order, while
- applying the line styles of the <code>Path</code> object (the <code
- title="dom-context-2d-lineWidth">lineWidth</code>, <code
- title="dom-context-2d-lineCap">lineCap</code>, <code
- title="dom-context-2d-lineJoin">lineJoin</code>, and (if
- appropriate) <code
- title="dom-context-2d-miterLimit">miterLimit</code> attributes).
- These subpaths in <var title="">glyph subpaths</var> must also all
- wind clockwise.</p>
+ title="dom-path-addPathByStrokingText">addPathByStrokingText()</code>,
+ replace <var title="">glyph subpaths</var> by the result of <span
+ title="trace a path">tracing</span> <var title="">glyph
+ subpaths</var>, using the <code>CanvasDrawingStyles</code> object
+ argument for the line styles.</p>
<li><p>Transform all the coordinates and lines in <var
- title="">glyph subpaths</var> by the <span
- title="dom-context-2d-transformation">current transformation
- matrix</span> of the <code>Path</code> object.</p></li>
+ title="">glyph subpaths</var> by the transformation matrix <var
+ title="">transform</var>, if it is not null.</p></li>
<li><p>Let (<var title="">x<sub title="">final</sub></var>, <var
title="">y<sub title="">final</sub></var>) be the last point in the
@@ -42416,10 +42593,10 @@ try {
</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 @@ try {
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 @@ try {
<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 @@ try {
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 @@ try {
</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 @@ try {
<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,17 +43463,37 @@ try {
<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 @@ try {
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,19 +43812,18 @@ v6DVT (also check for '- -' bits in the part above) -->
<h6>Drawing paths to the canvas</h6>
- <p>The context always has a current default path. There is only one
- current default path, it is not part of the <span>drawing
- state</span>. The current default path is a <span
- title="concept-path">path</span>, as described in the previous
- section.</p>
+ <p>The context always has a <dfn>current default path</dfn>. There
+ is only one <span>current default path</span>, it is not part of the
+ <span>drawing state</span>. The <span>current default path</span> is
+ a <span title="concept-path">path</span>, as described above.</p>
<dl class="domintro">
<dt><var title="">context</var> . <code title="dom-context-2d-beginPath">beginPath</code>()</dt>
<dd>
- <p>Resets the current default path.</p>
+ <p>Resets the <span>current default path</span>.</p>
</dd>
@@ -43487,7 +43832,7 @@ v6DVT (also check for '- -' bits in the part above) -->
<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 @@ v6DVT (also check for '- -' bits in the part above) -->
<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 @@ v6DVT (also check for '- -' bits in the part above) -->
<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 @@ v6DVT (also check for '- -' bits in the part above) -->
<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 @@ v6DVT (also check for '- -' bits in the part above) -->
<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 @@ v6DVT (also check for '- -' bits in the part above) -->
<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 @@ v6DVT (also check for '- -' bits in the part above) -->
<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,23 +43914,25 @@ v6DVT (also check for '- -' bits in the part above) -->
<p>The <dfn
title="dom-context-2d-beginPath"><code>beginPath()</code></dfn>
- method must empty the list of subpaths in the context's current
- default path so that the it once again has zero subpaths.</p>
+ method must empty the list of subpaths in the context's
+ <span>current default path</span> so that the it once again has zero
+ subpaths.</p>
<p>Where the following method definitions use the term <i>intended
path</i>, it means the <code>Path</code> argument, if one was
- provided, or the current default path otherwise.</p>
+ provided, or the <span>current default path</span> otherwise.</p>
<p>When the intended path is a <code>Path</code> object, the
coordinates of its subpaths must be transformed according to the
<code>CanvasRenderingContext2D</code> object's <span
title="dom-context-2d-transformation">current transformation
matrix</span> when used by these methods (without affecting the
<code>Path</code> object itself). When the intended path is the
- current default path, it is not affected by the transform, (This is
- because transformations already affect the current default path when
- it is constructed, so applying it when it is painted as well would
- result in a double transformation.)</p>
+ <span>current default path</span>, it is not affected by the
+ transform. (This is because transformations already affect the
+ <span>current default path</span> when it is constructed, so
+ applying it when it is painted as well would result in a double
+ transformation.)</p>
<p>The <dfn title="dom-context-2d-fill"><code>fill()</code></dfn>
method must fill all the subpaths of the intended path, using <code
@@ -43603,28 +43948,25 @@ v6DVT (also check for '- -' bits in the part above) -->
<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>

0 comments on commit e988678

Please sign in to comment.