- From: poot <cvsmail@w3.org>
- Date: Tue, 06 Mar 2012 18:28:47 -0500
- To: public-html-diffs@w3.org
2Dapi; hixie: Factor our the path methods (whatwg r7017)
http://dev.w3.org/cvsweb/html5/2dcontext/Overview.html?r1=1.123&r2=1.124&f=h
http://html5.org/tools/web-apps-tracker?from=7016&to=7017
===================================================================
RCS file: /sources/public/html5/2dcontext/Overview.html,v
retrieving revision 1.123
retrieving revision 1.124
diff -u -d -r1.123 -r1.124
--- Overview.html 6 Mar 2012 23:23:57 -0000 1.123
+++ Overview.html 6 Mar 2012 23:28:35 -0000 1.124
@@ -534,16 +534,8 @@
void <a href="#dom-context-2d-fillrect" title="dom-context-2d-fillRect">fillRect</a>(double x, double y, double w, double h);
void <a href="#dom-context-2d-strokerect" title="dom-context-2d-strokeRect">strokeRect</a>(double x, double y, double w, double h);
- // path API
+ // default path API (see also <a href="#canvaspathmethods">CanvasPathMethods</a>)
void <a href="#dom-context-2d-beginpath" title="dom-context-2d-beginPath">beginPath</a>();
- void <a href="#dom-context-2d-closepath" title="dom-context-2d-closePath">closePath</a>();
- void <a href="#dom-context-2d-moveto" title="dom-context-2d-moveTo">moveTo</a>(double x, double y);
- void <a href="#dom-context-2d-lineto" title="dom-context-2d-lineTo">lineTo</a>(double x, double y);
- void <a href="#dom-context-2d-quadraticcurveto" title="dom-context-2d-quadraticCurveTo">quadraticCurveTo</a>(double cpx, double cpy, double x, double y);
- void <a href="#dom-context-2d-beziercurveto" title="dom-context-2d-bezierCurveTo">bezierCurveTo</a>(double cp1x, double cp1y, double cp2x, double cp2y, double x, double y);
- void <a href="#dom-context-2d-arcto" title="dom-context-2d-arcTo">arcTo</a>(double x1, double y1, double x2, double y2, double radius);
- void <a href="#dom-context-2d-rect" title="dom-context-2d-rect">rect</a>(double x, double y, double w, double h);
- void <a href="#dom-context-2d-arc" title="dom-context-2d-arc">arc</a>(double x, double y, double radius, double startAngle, double endAngle, optional boolean anticlockwise);
void <a href="#dom-context-2d-fill" title="dom-context-2d-fill">fill</a>();
void <a href="#dom-context-2d-stroke" title="dom-context-2d-stroke">stroke</a>();
void <a href="#dom-context-2d-drawsystemfocusring" title="dom-context-2d-drawSystemFocusRing">drawSystemFocusRing</a>(<span>Element</span> element);
@@ -571,6 +563,7 @@
};
<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="#canvaspathmethods">CanvasPathMethods</a>;
<a href="#canvasrenderingcontext2d">CanvasRenderingContext2D</a> implements <a href="#canvastext">CanvasText</a>;
[NoInterfaceObject]
@@ -600,6 +593,19 @@
attribute DOMString <a href="#dom-context-2d-textbaseline" title="dom-context-2d-textBaseline">textBaseline</a>; // "top", "hanging", "middle", "alphabetic", "ideographic", "bottom" (default: "alphabetic")
};
+[NoInterfaceObject]
+interface <dfn id="canvaspathmethods">CanvasPathMethods</dfn> {
+ // shared path API methods
+ void <a href="#dom-context-2d-closepath" title="dom-context-2d-closePath">closePath</a>();
+ void <a href="#dom-context-2d-moveto" title="dom-context-2d-moveTo">moveTo</a>(double x, double y);
+ void <a href="#dom-context-2d-lineto" title="dom-context-2d-lineTo">lineTo</a>(double x, double y);
+ void <a href="#dom-context-2d-quadraticcurveto" title="dom-context-2d-quadraticCurveTo">quadraticCurveTo</a>(double cpx, double cpy, double x, double y);
+ void <a href="#dom-context-2d-beziercurveto" title="dom-context-2d-bezierCurveTo">bezierCurveTo</a>(double cp1x, double cp1y, double cp2x, double cp2y, double x, double y);
+ void <a href="#dom-context-2d-arcto" title="dom-context-2d-arcTo">arcTo</a>(double x1, double y1, double x2, double y2, double radius);
+ void <a href="#dom-context-2d-rect" title="dom-context-2d-rect">rect</a>(double x, double y, double w, double h);
+ void <a href="#dom-context-2d-arc" title="dom-context-2d-arc">arc</a>(double x, double y, double radius, double startAngle, double endAngle, optional boolean anticlockwise);
+};
+
interface <dfn id="canvasgradient">CanvasGradient</dfn> {
// opaque object
void <a href="#dom-canvasgradient-addcolorstop" title="dom-canvasgradient-addColorStop">addColorStop</a>(double offset, DOMString color);
@@ -666,9 +672,9 @@
</div><h2 id="the-canvas-state"><span class="secno">2 </span>The canvas state</h2><p>Each context maintains a stack of drawing states. <dfn id="drawing-state" title="drawing state">Drawing states</dfn> consist of:<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-2-shadowblur">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 path and the current bitmap are not part
- of the drawing state. The current 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
+ </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.<dl class="domintro"><dt><var title="">context</var> . <code title="dom-context-2d-save"><a href="#dom-context-2d-save">save</a></code>()</dt>
<dd>
@@ -1586,9 +1592,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 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 current default path,
+ and are subject to the <a href="#clipping-region" title="clipping region">clipping
+ region</a>, and, with the exception of <code title="dom-context-2d-clearRect"><a href="#dom-context-2d-clearrect">clearRect()</a></code>, also <a href="#shadows" title="shadows">shadow effects</a>, <a href="#dom-context-2d-globalalpha" title="dom-context-2d-globalAlpha">global alpha</a>, and <a href="#dom-context-2d-globalcompositeoperation" title="dom-context-2d-globalCompositeOperation">global composition
operators</a>.</p>
</div><dl class="domintro"><dt><var title="">context</var> . <code title="dom-context-2d-clearRect"><a href="#dom-context-2d-clearrect">clearRect</a></code>(<var title="">x</var>, <var title="">y</var>, <var title="">w</var>, <var title="">h</var>)</dt>
@@ -1634,22 +1640,16 @@
zero, then the method will draw a line instead (the path for the
outline is just a straight line along the non-zero dimension).</p>
- </div><h2 id="complex-shapes-paths"><span class="secno">9 </span>Complex shapes (paths)</h2><p>The context always has a current path. There is only one current
- path, it is not part of the <a href="#drawing-state">drawing state</a>.<p>A <dfn id="path">path</dfn> has a list of zero or more subpaths. Each
- subpath consists of a list of one or more points, connected by
- straight or curved lines, and a flag indicating whether the subpath
- is closed or not. A closed subpath is one where the last point of
- the subpath is connected to the first point of the subpath by a
- straight line. Subpaths with fewer than two points are ignored when
- painting the path.<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 path.</p>
-
- </dd>
-
- <dt><var title="">context</var> . <code title="dom-context-2d-moveTo"><a href="#dom-context-2d-moveto">moveTo</a></code>(<var title="">x</var>, <var title="">y</var>)</dt>
+ </div><h2 id="complex-shapes-paths"><span class="secno">9 </span>Complex shapes (paths)</h2><p>Each object implementing the <code><a href="#canvaspathmethods">CanvasPathMethods</a></code>
+ interface has a <a href="#path">path</a>. A <dfn id="path">path</dfn> has a list of
+ zero or more subpaths. Each subpath consists of a list of one or
+ more points, connected by straight or curved lines, and a flag
+ indicating whether the subpath is closed or not. A closed subpath is
+ one where the last point of the subpath is connected to the first
+ point of the subpath by a straight line. Subpaths with fewer than
+ two points are ignored when painting the path.<p>When an object implementing the <code><a href="#canvaspathmethods">CanvasPathMethods</a></code>
+ interface is created, its <a href="#path">path</a> must be initialized to
+ zero subpaths.<dl class="domintro"><dt><var title="">context</var> . <code title="dom-context-2d-moveTo"><a href="#dom-context-2d-moveto">moveTo</a></code>(<var title="">x</var>, <var title="">y</var>)</dt>
<dd>
@@ -1725,86 +1725,21 @@
</dd>
- <dt><var title="">context</var> . <code title="dom-context-2d-fill"><a href="#dom-context-2d-fill">fill</a></code>()</dt>
-
- <dd>
-
- <p>Fills the subpaths with the current fill style.</p>
-
- </dd>
-
- <dt><var title="">context</var> . <code title="dom-context-2d-stroke"><a href="#dom-context-2d-stroke">stroke</a></code>()</dt>
-
- <dd>
-
- <p>Strokes the subpaths with the current stroke style.</p>
-
- </dd>
-
- <dt><var title="">context</var> . <code title="dom-context-2d-drawSystemFocusRing"><a href="#dom-context-2d-drawsystemfocusring">drawSystemFocusRing</a></code>(<var title="">element</var>)</dt>
-
- <dd>
-
- <p>If the given element is focused, draws a focus ring around the
- current path, following the platform conventions for focus
- rings.</p>
-
- </dd>
-
- <dt><var title="">shouldDraw</var> = <var title="">context</var> . <code title="dom-context-2d-drawCustomFocusRing"><a href="#dom-context-2d-drawcustomfocusring">drawCustomFocusRing</a></code>(<var title="">element</var>)</dt>
-
- <dd>
-
- <p>If the given element is focused, and the user has configured
- his system to draw focus rings in a particular manner (for
- example, high contrast focus rings), draws a focus ring around the
- current path and returns false.</p>
-
- <p>Otherwise, returns true if the given element is focused, and
- false otherwise. This can thus be used to determine when to draw a
- focus ring (see <a href="#drawCustomFocusRingExample">the
- example</a> below).</p>
-
- </dd>
-
- <dt><var title="">context</var> . <code title="dom-context-2d-scrollPathIntoView"><a href="#dom-context-2d-scrollpathintoview">scrollPathIntoView</a></code>()</dt>
-
- <dd>
-
- <p>Scrolls the current path into view. This is especially useful
- on devices with small screens, where the whole canvas might not be
- visible at once.</p>
-
- </dd>
-
- <dt><var title="">context</var> . <code title="dom-context-2d-clip"><a href="#dom-context-2d-clip">clip</a></code>()</dt>
-
- <dd>
-
- <p>Further constrains the clipping region to the given path.</p>
-
- </dd>
-
- <dt><var title="">context</var> . <code title="dom-context-2d-isPointInPath"><a href="#dom-context-2d-ispointinpath">isPointInPath</a></code>(<var title="">x</var>, <var title="">y</var>)</dt>
-
- <dd>
-
- <p>Returns true if the given point is in the current path.</p>
-
- </dd>
-
</dl><div class="impl">
- <p>Initially, the context's path must have zero subpaths.</p>
-
- <p>The points and lines added to the path by these methods must be
- transformed according to the <a href="#transformations" title="dom-context-2d-transformation">current transformation
- matrix</a> as they are added.</p>
+ <p>The following methods allow authors to manipulate the <a href="#path" title="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="#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>The <dfn id="dom-context-2d-beginpath" title="dom-context-2d-beginPath"><code>beginPath()</code></dfn>
- method must empty the list of subpaths so that the context once
- again has zero subpaths.</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
@@ -1812,19 +1747,19 @@
only) point.</p>
<p>When the user agent is to <dfn id="ensure-there-is-a-subpath">ensure there is a subpath</dfn>
- for a coordinate (<var title="">x</var>, <var title="">y</var>), the
- user agent must check to see if the context has any subpaths, and if
- it does not, then the user agent must create a new subpath with the
- point (<var title="">x</var>, <var title="">y</var>) as its first
- (and only) point, as if the <code title="dom-context-2d-moveTo"><a href="#dom-context-2d-moveto">moveTo()</a></code> method had been
- called.</p>
+ for a coordinate (<var title="">x</var>, <var title="">y</var>) on a
+ <a href="#path">path</a>, the user agent must check to see if the
+ <a href="#path">path</a> has any subpaths, and if it does not, then the
+ user agent must create a new subpath with the point (<var title="">x</var>, <var title="">y</var>) as its first (and only)
+ point, as if the <code title="dom-context-2d-moveTo"><a href="#dom-context-2d-moveto">moveTo()</a></code>
+ method had been called.</p>
<p>The <dfn id="dom-context-2d-closepath" title="dom-context-2d-closePath"><code>closePath()</code></dfn>
- method must do nothing if the context has no subpaths. Otherwise, it
- must mark the last subpath as closed, create a new subpath whose
- first point is the same as the previous subpath's first point, and
- finally add this new subpath to the path.</p>
+ method must do nothing if the object's path has no subpaths.
+ Otherwise, it must mark the last subpath as closed, create a new
+ subpath whose first point is the same as the previous subpath's
+ first point, and finally add this new subpath to the path.</p>
<p class="note">If the last subpath had more than one point in its
list of points, then this is equivalent to adding a straight line
@@ -1834,12 +1769,12 @@
<p>New points and the lines connecting them are added to subpaths
using the methods described below. In all cases, the methods only
- modify the last subpath in the context's paths.</p>
+ modify the last subpath in the object's path.</p>
<p>The <dfn id="dom-context-2d-lineto" title="dom-context-2d-lineTo"><code>lineTo(<var title="">x</var>, <var title="">y</var>)</code></dfn> method must
- <a href="#ensure-there-is-a-subpath">ensure there is a subpath</a> for <span title="">(<var title="">x</var>, <var title="">y</var>)</span> if the context has
- no subpaths. Otherwise, it must connect the last point in the
+ <a href="#ensure-there-is-a-subpath">ensure there is a subpath</a> for <span title="">(<var title="">x</var>, <var title="">y</var>)</span> if the object's path
+ has no subpaths. Otherwise, it must connect the last point in the
subpath to the given point (<var title="">x</var>, <var title="">y</var>) using a straight line, and must then add the given
point (<var title="">x</var>, <var title="">y</var>) to the
subpath.</p>
@@ -1900,11 +1835,11 @@
<hr><p>The <dfn id="dom-context-2d-arc" title="dom-context-2d-arc"><code>arc(<var title="">x</var>, <var title="">y</var>, <var title="">radius</var>,
<var title="">startAngle</var>, <var title="">endAngle</var>, <var title="">anticlockwise</var>)</code></dfn> method draws an arc. If
- the context has any subpaths, then the method must add a straight
- line from the last point in the subpath to the start point of the
- arc. In any case, it must draw the arc between the start point of
- the arc and the end point of the arc, and add the start and end
- points of the arc to the subpath. The arc and its start and end
+ the object's path has any subpaths, then the method must add a
+ straight line from the last point in the subpath to the start point
+ of the arc. In any case, it must draw the arc between the start
+ point of the arc and the end point of the arc, and add the start and
+ end points of the arc to the subpath. The arc and its start and end
points are defined as follows:</p>
<p>Consider a circle that has its origin at (<var title="">x</var>,
@@ -1924,9 +1859,9 @@
if the <var title="">anticlockwise</var> argument is true, and
clockwise otherwise. Since the points are on the circle, as opposed
to being simply angles from zero, the arc can never cover an angle
- greater than <span title="">2π</span> radians. If the two points are the
- same, or if the radius is zero, then the arc is defined as being of
- zero length in both directions.</p>
+ greater than <span title="">2π</span> radians. If the two points
+ are the same, or if the radius is zero, then the arc is defined as
+ being of zero length in both directions.</p>
<p>Negative values for <var title="">radius</var> must cause the
implementation to throw an <code>IndexSizeError</code>
@@ -1942,9 +1877,95 @@
+ </div><hr><p>The context always has a current default path. There is only one
+ current default path, it is not part of the <a href="#drawing-state">drawing
+ state</a>. The current default path is a <a href="#path">path</a>, as
+ described in the previous section.<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>
+
+ </dd>
+
+ <dt><var title="">context</var> . <code title="dom-context-2d-fill"><a href="#dom-context-2d-fill">fill</a></code>()</dt>
+
+ <dd>
+
+ <p>Fills the subpaths of the current default path with the current fill style.</p>
+
+ </dd>
+
+ <dt><var title="">context</var> . <code title="dom-context-2d-stroke"><a href="#dom-context-2d-stroke">stroke</a></code>()</dt>
+
+ <dd>
+
+ <p>Strokes the subpaths of the currnet default path with the current stroke style.</p>
+
+ </dd>
+
+ <dt><var title="">context</var> . <code title="dom-context-2d-drawSystemFocusRing"><a href="#dom-context-2d-drawsystemfocusring">drawSystemFocusRing</a></code>(<var title="">element</var>)</dt>
+
+ <dd>
+
+ <p>If the given element is focused, draws a focus ring around the
+ current default path, following the platform conventions for focus
+ rings.</p>
+
+ </dd>
+
+ <dt><var title="">shouldDraw</var> = <var title="">context</var> . <code title="dom-context-2d-drawCustomFocusRing"><a href="#dom-context-2d-drawcustomfocusring">drawCustomFocusRing</a></code>(<var title="">element</var>)</dt>
+
+ <dd>
+
+ <p>If the given element is focused, and the user has configured
+ his system to draw focus rings in a particular manner (for
+ example, high contrast focus rings), draws a focus ring around the
+ current default path and returns false.</p>
+
+ <p>Otherwise, returns true if the given element is focused, and
+ false otherwise. This can thus be used to determine when to draw a
+ focus ring (see <a href="#drawCustomFocusRingExample">the
+ example</a> below).</p>
+
+ </dd>
+
+ <dt><var title="">context</var> . <code title="dom-context-2d-scrollPathIntoView"><a href="#dom-context-2d-scrollpathintoview">scrollPathIntoView</a></code>()</dt>
+
+ <dd>
+
+ <p>Scrolls the current default path into view. This is especially
+ useful on devices with small screens, where the whole canvas might
+ not be visible at once.</p>
+
+ </dd>
+
+ <dt><var title="">context</var> . <code title="dom-context-2d-clip"><a href="#dom-context-2d-clip">clip</a></code>()</dt>
+
+ <dd>
+
+ <p>Further constrains the clipping region to the current default
+ path.</p>
+
+ </dd>
+
+ <dt><var title="">context</var> . <code title="dom-context-2d-isPointInPath"><a href="#dom-context-2d-ispointinpath">isPointInPath</a></code>(<var title="">x</var>, <var title="">y</var>)</dt>
+
+ <dd>
+
+ <p>Returns true if the given point is in the current default
+ path.</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>
<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 current path, using
+ method must fill all the subpaths of the current default path, using
<code title="dom-context-2d-fillStyle"><a href="#dom-context-2d-fillstyle">fillStyle</a></code>, and using
the non-zero winding number rule. Open subpaths must be implicitly
closed when being filled (without affecting the actual
@@ -1956,19 +1977,17 @@
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 current 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
+ must calculate the strokes of all the subpaths of the current
+ default 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>
+ 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>Paths, when filled or stroked, must be painted without affecting
- the current path, 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 current default path, 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>. (Transformations affect the path when the path is
created, not when it is painted, though the stroke <em>style</em> is
still affected by the transformation during painting.)</p>
@@ -1987,8 +2006,9 @@
<p>If the user has requested the use of particular focus rings
(e.g. high-contrast focus rings), or if the <var title="">element</var> would have a focus ring drawn around it,
- then draw a focus ring of the appropriate style along the path,
- following platform conventions, and abort these steps.</p>
+ then draw a focus ring of the appropriate style along the current
+ default path, following platform conventions, and abort these
+ steps.</p>
<p class="note">Some platforms only draw focus rings around
elements that have been focused from the keyboard, and not those
@@ -2009,9 +2029,10 @@
<li>
<p>Optionally, <a href="#inform">inform the user</a> that the
- focus is at the location given by the path. User agents may wait
- until the next time the <span>event loop</span> reaches its
- "update the rendering" step to optionally inform the user.</p>
+ focus is at the location given by the current default path. User
+ agents may wait until the next time the <span>event loop</span>
+ reaches its "update the rendering" step to optionally inform the
+ user.</p>
</li>
@@ -2026,8 +2047,8 @@
<p>If the user has requested the use of particular focus rings
(e.g. high-contrast focus rings), then draw a focus ring of the
- appropriate style along the path, return false, and abort these
- steps.</p>
+ appropriate style along the current default path, return false,
+ and abort these steps.</p>
<p>The focus ring should not be subject to the <a href="#shadows" title="shadows">shadow effects</a>, the <a href="#dom-context-2d-globalalpha" title="dom-context-2d-globalAlpha">global alpha</a>, or the <a href="#dom-context-2d-globalcompositeoperation" title="dom-context-2d-globalCompositeOperation">global composition
operators</a>, but <em>should</em> be subject to the <a href="#clipping-region" title="clipping region">clipping region</a>.</p>
@@ -2037,9 +2058,10 @@
<li>
<p>Optionally, <a href="#inform">inform the user</a> that the
- focus is at the location given by the path. User agents may wait
- until the next time the <span>event loop</span> reaches its
- "update the rendering" step to optionally inform the user.</p>
+ focus is at the location given by the current default path. User
+ agents may wait until the next time the <span>event loop</span>
+ reaches its "update the rendering" step to optionally inform the
+ user.</p>
</li>
@@ -2051,7 +2073,7 @@
<ol><li><p>Let <var title="">notional child</var> be a hypothetical
element that is a rendered child of the <code>canvas</code> element
whose dimensions are exactly the rectangle of the bounding box of
- the current path.</li>
+ the current default path.</li>
<li><p><span title="scroll an element into view">Scroll <var title="">notional child</var> into view</span> with the <var title="">align to top flag</var> set.</p>
@@ -2076,9 +2098,9 @@
<hr><p>The <dfn id="dom-context-2d-clip" title="dom-context-2d-clip"><code>clip()</code></dfn>
method must create a new <dfn id="clipping-region">clipping region</dfn> by calculating
the intersection of the current clipping region and the area
- described by the current path, using the non-zero winding number
- rule. Open subpaths must be implicitly closed when computing the
- clipping region, without affecting the actual subpaths. The new
+ described by the current default path, using the non-zero winding
+ number rule. Open subpaths must be implicitly closed when computing
+ the clipping region, without affecting the actual subpaths. The new
clipping region replaces the current clipping region.</p>
<p>When the context is initialized, the clipping region must be set
@@ -2091,11 +2113,11 @@
<hr><p>The <dfn id="dom-context-2d-ispointinpath" title="dom-context-2d-isPointInPath"><code>isPointInPath(<var title="">x</var>, <var title="">y</var>)</code></dfn> method must
return true if the point given by the <var title="">x</var> and <var title="">y</var> coordinates passed to the method, when treated as
coordinates in the canvas coordinate space unaffected by the current
- transformation, is inside the current path as determined by the
- non-zero winding number rule; and must return false
- otherwise. Points on the path itself are considered to be inside the
- path. If either of the arguments is infinite or NaN, then the method
- must return false.</p>
+ transformation, is inside the current default path as determined by
+ the non-zero winding number rule; and must return false otherwise.
+ Points on the path itself must be considered to be inside the path.
+ If either of the arguments is infinite or NaN, then the method must
+ return false.</p>
</div><div class="example" id="drawCustomFocusRingExample">
Received on Tuesday, 6 March 2012 23:28:51 UTC