- From: Sam Ruby via cvs-syncmail <cvsmail@w3.org>
- Date: Thu, 18 Oct 2012 18:13:31 +0000
- To: public-html-commits@w3.org
Update of /sources/public/html5/2dcontext
In directory hutz:/tmp/cvs-serv2127
Modified Files:
Overview.html
Log Message:
commit 394cf8dc1548e0a27fc04899650ce90fa77e4b05
Author: Rik Cabanier <cabanier@adobe.com>
Date: Wed Sep 26 20:30:07 2012 -0700
Revert "Removed TextMetrics feature"
Revert "Removed Ellipse feature"
Revert "Removed imageSmoothing feature"
Revert "Removed Pattern Offset (setTransform) feature"
This reverts commit
- 68b1f03d27d9a82f6b8bb82e1e9edd8ff99dfc6d.
- 1bfd426dca764fbd08849011cfd85bf77ecfe9e8
- e8ec08463dfa481c140c30ead887c23364ad3e9b
- b6feda27b00465b4e604da7499df2b72daec4c66
(cherry picked from commit 34b933069bb13e7a19e1796a4913e9899dcd914c)
Conflicts:
source
Cherry picked reverts from Master to HTML5_canvas
Issue-201 features being reverted back into the HTML5_canvas spec.
Index: Overview.html
===================================================================
RCS file: /sources/public/html5/2dcontext/Overview.html,v
retrieving revision 1.183
retrieving revision 1.184
diff -u -d -r1.183 -r1.184
--- Overview.html 18 Oct 2012 16:43:47 -0000 1.183
+++ Overview.html 18 Oct 2012 18:13:29 -0000 1.184
@@ -588,10 +588,11 @@
<li><a href="#hit-regions"><span class="secno">14 </span>Hit regions</a></li>
<li><a href="#pixel-manipulation"><span class="secno">15 </span>Pixel manipulation</a></li>
<li><a href="#compositing"><span class="secno">16 </span>Compositing</a></li>
- <li><a href="#shadows"><span class="secno">17 </span>Shadows</a></li>
- <li><a href="#drawing-model"><span class="secno">18 </span>Drawing model</a></li>
- <li><a href="#best-practices"><span class="secno">19 </span>Best practices</a></li>
- <li><a href="#examples"><span class="secno">20 </span>Examples</a></li>
+ <li><a href="#image-smoothing"><span class="secno">17 </span>Image smoothing</a></li>
+ <li><a href="#shadows"><span class="secno">18 </span>Shadows</a></li>
+ <li><a href="#drawing-model"><span class="secno">19 </span>Drawing model</a></li>
+ <li><a href="#best-practices"><span class="secno">20 </span>Best practices</a></li>
+ <li><a href="#examples"><span class="secno">21 </span>Examples</a></li>
<li><a class="no-num" href="#references">References</a></li></ol>
<!--end-toc-->
<hr>
@@ -655,6 +656,12 @@
// compositing
attribute unrestricted double <a href="#dom-context-2d-globalalpha" title="dom-context-2d-globalAlpha">globalAlpha</a>; // (default 1.0)
attribute DOMString <a href="#dom-context-2d-globalcompositeoperation" title="dom-context-2d-globalCompositeOperation">globalCompositeOperation</a>; // (default source-over)
+<<<<<<< HEAD
+=======
+
+ // image smoothing
+ attribute boolean <a href="#dom-context-2d-imagesmoothingenabled" title="dom-context-2d-imageSmoothingEnabled">imageSmoothingEnabled</a>; // (default true)
+>>>>>>> 34b9330... Revert "Removed TextMetrics feature"
<!--
// v7 we've also received requests for:
- turning off antialiasing to avoid seams when patterns are painted next to each other
@@ -670,7 +677,7 @@
attribute (DOMString or CanvasGradient or CanvasPattern) <a href="#dom-context-2d-fillstyle" title="dom-context-2d-fillStyle">fillStyle</a>; // (default black)
<a href="#canvasgradient">CanvasGradient</a> <a href="#dom-context-2d-createlineargradient" title="dom-context-2d-createLinearGradient">createLinearGradient</a>(double x0, double y0, double x1, double y1);
<a href="#canvasgradient">CanvasGradient</a> <a href="#dom-context-2d-createradialgradient" title="dom-context-2d-createRadialGradient">createRadialGradient</a>(double x0, double y0, double r0, double x1, double y1, double r1);
- <a href="#canvaspattern">CanvasPattern</a> <a href="#dom-context-2d-createpattern" title="dom-context-2d-createPattern">createPattern</a>((<span>HTMLImageElement</span> or <span>HTMLCanvasElement</span> or <span>HTMLVideoElement</span>) image, [TreatNullAs=Emptytring]DOMString repetition);
+ <a href="#canvaspattern-0">CanvasPattern</a> <a href="#dom-context-2d-createpattern" title="dom-context-2d-createPattern">createPattern</a>((<span>HTMLImageElement</span> or <span>HTMLCanvasElement</span> or <span>HTMLVideoElement</span>) image, [TreatNullAs=Emptytring]DOMString repetition);
// shadows
attribute unrestricted double <a href="#dom-context-2d-shadowoffsetx" title="dom-context-2d-shadowOffsetX">shadowOffsetX</a>; // (default 0)
@@ -756,6 +763,7 @@
void <a href="#dom-context-2d-arcto" title="dom-context-2d-arcTo">arcTo</a>(unrestricted double x1, unrestricted double y1, unrestricted double x2, unrestricted double y2, unrestricted double radius); <!-- see ARC-ORDER note below -->
void <a href="#dom-context-2d-rect" title="dom-context-2d-rect">rect</a>(unrestricted double x, unrestricted double y, unrestricted double w, unrestricted double h);
void <a href="#dom-context-2d-arc" title="dom-context-2d-arc">arc</a>(unrestricted double x, unrestricted double y, unrestricted double radius, unrestricted double startAngle, unrestricted double endAngle, optional boolean anticlockwise = false); <!-- see ARC-ORDER note below -->
+ void <a href="#dom-context-2d-ellipse" title="dom-context-2d-ellipse">ellipse</a>(unrestricted double x, unrestricted double y, unrestricted double radiusX, unrestricted double radiusY, unrestricted double rotation, unrestricted double startAngle, unrestricted double endAngle, boolean anticlockwise); <!-- see ARC-ORDER note below -->
};
interface <dfn id="canvasgradient">CanvasGradient</dfn> {
@@ -767,8 +775,31 @@
// opaque object
};
+interface <dfn id="canvaspattern-0">CanvasPattern</dfn> {
+ // opaque object
+ void <a href="#dom-canvaspattern-settransform" title="dom-canvaspattern-setTransform">setTransform</a>(<span>SVGMatrix</span> transform);
+};
+
interface <dfn id="textmetrics">TextMetrics</dfn> {
- readonly attribute double <a href="#dom-textmetrics-width" title="dom-textmetrics-width">width</a>;
+<<<<<<< HEAD
+ readonly attribute double <a href="#dom-textmetrics-width-0" title="dom-textmetrics-width">width</a>;
+=======
+ // x-direction
+ readonly attribute double <a href="#dom-textmetrics-width-0" title="dom-textmetrics-width">width</a>; // advance width
+ readonly attribute double <a href="#dom-textmetrics-actualboundingboxleft" title="dom-textmetrics-actualBoundingBoxLeft">actualBoundingBoxLeft</a>;
+ readonly attribute double <a href="#dom-textmetrics-actualboundingboxright" title="dom-textmetrics-actualBoundingBoxRight">actualBoundingBoxRight</a>;
+
+ // y-direction
+ readonly attribute double <a href="#dom-textmetrics-fontboundingboxascent" title="dom-textmetrics-fontBoundingBoxAscent">fontBoundingBoxAscent</a>;
+ readonly attribute double <a href="#dom-textmetrics-fontboundingboxdescent" title="dom-textmetrics-fontBoundingBoxDescent">fontBoundingBoxDescent</a>;
+ readonly attribute double <a href="#dom-textmetrics-actualboundingboxascent" title="dom-textmetrics-actualBoundingBoxAscent">actualBoundingBoxAscent</a>;
+ readonly attribute double <a href="#dom-textmetrics-actualboundingboxdescent" title="dom-textmetrics-actualBoundingBoxDescent">actualBoundingBoxDescent</a>;
+ readonly attribute double <a href="#dom-textmetrics-emheightascent" title="dom-textmetrics-emHeightAscent">emHeightAscent</a>;
+ readonly attribute double <a href="#dom-textmetrics-emheightdescent" title="dom-textmetrics-emHeightDescent">emHeightDescent</a>;
+ readonly attribute double <a href="#dom-textmetrics-hangingbaseline" title="dom-textmetrics-hangingBaseline">hangingBaseline</a>;
+ readonly attribute double <a href="#dom-textmetrics-alphabeticbaseline" title="dom-textmetrics-alphabeticBaseline">alphabeticBaseline</a>;
+ readonly attribute double <a href="#dom-textmetrics-ideographicbaseline" title="dom-textmetrics-ideographicBaseline">ideographicBaseline</a>;
+>>>>>>> 34b9330... Revert "Removed TextMetrics feature"
};
dictionary <dfn id="hitregionoptions">HitRegionOptions</dfn> {
@@ -886,7 +917,11 @@
<ul class="brief">
<li>The current <a href="#transformations" title="dom-context-2d-transformation">transformation matrix</a>.</li>
<li>The current <a href="#clipping-region">clipping region</a>.</li>
- <li>The current values of the following attributes: <code title="dom-context-2d-strokeStyle"><a href="#dom-context-2d-strokestyle">strokeStyle</a></code>, <code title="dom-context-2d-fillStyle"><a href="#dom-context-2d-fillstyle">fillStyle</a></code>, <code title="dom-context-2d-globalAlpha"><a href="#dom-context-2d-globalalpha">globalAlpha</a></code>, <code title="dom-context-2d-lineWidth"><a href="#dom-context-2d-linewidth">lineWidth</a></code>, <code title="dom-context-2d-lineCap"><a href="#dom-context-2d-linecap">lineCap</a></code>, <code title="dom-context-2d-lineJoin"><a href="#dom-context-2d-linejoin">lineJoin</a></code>, <code title="dom-context-2d-miterLimit"><a href="#dom-context-2d-miterlimit">miterLimit</a></code>, <code title="dom-context-2d-shadowOffsetX"><a href="#dom-context-2d-shadowoffsetx">shadowOffsetX</a></code>, <code title="dom-context-2d-shadowOffsetY"><a href="#dom-context-2d-shadowoffsety">shadowOffsetY</a></code>, <code title="dom-context-2d-shadowBlur"><a href="#dom-context-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>
+ <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 U0003CU0003CU0003CU0003CU0003CU0003CU0003C="" head="" title="dom-context-2d-textBaseline"><a href="#dom-context-2d-textbaseline">textBaseline</a></code>.</li>
+=======
+ title="dom-context-2d-textBaseline">textBaseline, <code title="dom-context-2d-imageSmoothingEnabled"><a href="#dom-context-2d-imagesmoothingenabled">imageSmoothingEnabled</a></code>.
+ <li>The current <a href="#dash-list">dash list</a>.</li>
+>>>>>>> 34b9330... Revert "Removed TextMetrics feature"
</ul>
<p class="note">The <a href="#current-default-path">current default path</a> and the
@@ -1937,6 +1972,12 @@
current subpath, connected to the previous point by a straight
line.</p>
+ <p>If two radii are provided, the first controls the width of the
+ arc's ellipse, and the second controls the height. If only one is
+ provided, or if they are the same, the arc is from a circle. In
+ the case of an ellipse, the rotation argument controls the
+ clockwise inclination of the ellipse relative to the x-axis.</p>
+
<p>Throws an <code>IndexSizeError</code> exception if the given
radius is negative.</p>
@@ -2093,6 +2134,22 @@
</dd>
+ <dt><var title="">context</var> . <code title="dom-context-2d-ellipse"><a href="#dom-context-2d-ellipse">ellipse</a></code>(<var title="">x</var>, <var title="">y</var>, <var title="">radiusX</var>, <var title="">radiusY</var>, <var title="">rotation</var>, <var title="">startAngle</var>, <var title="">endAngle</var>, <var title="">anticlockwise</var>)</dt>
+ <dt><var title="">path</var> . <code title="dom-context-2d-ellipse"><a href="#dom-context-2d-ellipse">ellipse</a></code>(<var title="">x</var>, <var title="">y</var>, <var title="">radiusX</var>, <var title="">radiusY</var>, <var title="">rotation</var>, <var title="">startAngle</var>, <var title="">endAngle</var>, <var title="">anticlockwise</var>)</dt>
+
+ <dd>
+
+ <p>Adds points to the subpath such that the arc described by the
+ circumference of the ellipse described by the arguments, starting
+ at the given start angle and ending at the given end angle, going
+ in the given direction (defaulting to clockwise), is added to the
+ path, connected to the previous point by a straight line.</p>
+
+ <p>Throws an <code>IndexSizeError</code> exception if the given
+ radius is negative.</p>
+
+ </dd>
+
<dt><var title="">context</var> . <code title="dom-context-2d-rect"><a href="#dom-context-2d-rect">rect</a></code>(<var title="">x</var>, <var title="">y</var>, <var title="">w</var>, <var title="">h</var>)</dt>
<dt><var title="">path</var> . <code title="dom-context-2d-rect"><a href="#dom-context-2d-rect">rect</a></code>(<var title="">x</var>, <var title="">y</var>, <var title="">w</var>, <var title="">h</var>)</dt>
@@ -2196,12 +2253,19 @@
straight line.</p>
<p>Otherwise, let <var title="">The Arc</var> be the shortest arc
+<<<<<<< HEAD
given by circumference of the circle that has radius <var title="">radius</var> and that has one point tangent to the
half-infinite line that crosses the point (<var title="">x0</var>,
<var title="">y0</var>) and ends at the point (<var title="">x1</var>, <var title="">y1</var>), and that has a different
- point tangent to the half-infinite line that ends at the point (<var title="">x1</var>, <var title="">y1</var>) and crosses the point
+ point tangent to the half-infinite line that ends at the point (<var U0003Cvar="" U0003D="=====" by="" circumference="" ellipse="" given="" has="" of="" radius="" that="" the="" title="">radiusX</var> on the major axis and radius <var title="">radiusY</var> on the minor axis, and whose semi-major axis
+ is rotated <var title="">rotation</var> radians clockwise from the
+ positive x-axis, and that has one point tangent to the half-infinite
+ line that crosses the point (<var title="">x0</var>, <var title="">y0</var>) and ends at the point (<var title="">x1</var>,
+ <var title="">y1</var>), and that has a different point tangent to
+ the half-infinite line that ends at the point (<var>>>>>>> 34b9330... Revert "Removed TextMetrics feature"
+ title="">x1</var>, <var title="">y1</var>) and crosses the point
(<var title="">x2</var>, <var title="">y2</var>). The points at
- which this circle touches these two lines are called the start and
+ which this ellipse touches these two lines are called the start and
end tangent points respectively. The method must connect the point
(<var title="">x0</var>, <var title="">y0</var>) to the start
tangent point by a straight line, adding the start tangent point to
@@ -2212,7 +2276,7 @@
<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
+ <var title="">startAngle</var>, <var title="">endAngle</var>, <var U0003CU0003CU0003CU0003CU0003CU0003CU0003C="" head="" title="">anticlockwise</var>)</code></dfn> method draws an arc. If
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
@@ -2227,9 +2291,39 @@
start and end points respectively.</p>
<p>If the <var title="">anticlockwise</var> argument is omitted or
- false and <span title=""><var title="">endAngle</var>-<var title="">startAngle</var></span> is equal to or greater than <span title="">2π</span>, or, if the <var title="">anticlockwise</var>
+ false and <span title=""><var title="">endAngle</var>-<var U0003D="=====" title="">anticlockwise</var>) and <dfn id="dom-context-2d-ellipse" title="dom-context-2d-ellipse"><code>ellipse(<var title="">x</var>,
+ <var title="">y</var>, <var title="">radiusX</var>, <var title="">radiusY</var>, <var title="">rotation</var>, <var title="">startAngle</var>, <var title="">endAngle</var>, <var title="">anticlockwise</var>)</code></dfn> methods draw arcs.</span></p>
+
+ <p>The <code title="dom-context-2d-arc"><a href="#dom-context-2d-arc">arc()</a></code> method is
+ equivalent to the <code title="dom-context-2d-ellipse"><a href="#dom-context-2d-ellipse">ellipse()</a></code> method in the case
+ where the two radii are equal. When the <code title="dom-context-2d-arc"><a href="#dom-context-2d-arc">arc()</a></code> method is invoked, it must
+ act as if the <code title="dom-context-2d-ellipse"><a href="#dom-context-2d-ellipse">ellipse()</a></code>
+ method had been invoked with the <var title="">radiusX</var> and
+ <var title="">radiusY</var> arguments set to the value of the <var title="">radius</var> argument, the <var title="">rotation</var>
+ argument set to zero, and the other arguments set to the same values
+ as their identically named arguments on the <code title="dom-context-2d-arc"><a href="#dom-context-2d-arc">arc()</a></code> method.</p>
+
+ <p>When the <code title="dom-context-2d-ellipse"><a href="#dom-context-2d-ellipse">ellipse()</a></code>
+ method is invoked, it must proceed as follows. First, if 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. Then, it must add the start and end points of the arc to the
+ subpath, and connect them with an arc. The arc and its start and end
+ points are defined as follows:</p>
+
+ <p>Consider an ellipse that has its origin at (<var title="">x</var>, <var title="">y</var>), that has a major-axis
+ radius <var title="">radiusX</var> and a minor-axis radius <var title="">radiusY</var>, and that is rotated about its origin such
+ that its semi-major axis is inclined <var title="">rotation</var>
+ radians clockwise from the x-axis. The points at <var title="">startAngle</var> and <var title="">endAngle</var> along
+ this circle's circumference, measured in radians clockwise from the
+ ellipse's semi-major axis, are the start and end points
+ respectively.</p>
+
+ <p>If the <var title="">anticlockwise</var> argument false and <span title=""><var title="">endAngle</var>-<var>>>>>>> 34b9330... Revert "Removed TextMetrics feature"
+ title="">startAngle</var></span> is equal to or greater than <span title="">2π</span>, or, if the <var title="">anticlockwise</var>
argument is <em>true</em> and <span title=""><var title="">startAngle</var>-<var title="">endAngle</var></span> is
equal to or greater than <span title="">2π</span>, then the arc
+<<<<<<< HEAD
is the whole circumference of this circle.</p>
<p>Otherwise, the arc is the path along the circumference of this
@@ -2245,6 +2339,20 @@
implementation to throw an <code>IndexSizeError</code>
exception.</p>
+=======
+ is the whole circumference of this ellipse.<p></p>
+
+ <p>Otherwise, the arc is the path along the circumference of this
+ ellipse from the start point to the end point, going anti-clockwise
+ if the <var title="">anticlockwise</var> argument is true, and
+ clockwise otherwise. Since the points are on the ellipse, as opposed
+ to being simply angles from zero, the arc can never cover an angle
+ greater than <span title="">2π</span> radians.</p>
+
+ <p>Negative values for <var title="">radiusX</var> or <var title="">radiusY</var> must cause the implementation to throw an
+ <code>IndexSizeError</code> exception.</p>
+
+>>>>>>> 34b9330... Revert "Removed TextMetrics feature"
<hr>
<p>The <dfn id="dom-context-2d-rect" title="dom-context-2d-rect"><code>rect(<var title="">x</var>, <var title="">y</var>, <var title="">w</var>, <var title="">h</var>)</code></dfn> method must create a new subpath
@@ -2699,7 +2807,7 @@
<p>Can be set, to change the fill style.</p>
<p>The style can be either a string containing a CSS color, or a
- <code><a href="#canvasgradient">CanvasGradient</a></code> or <code><a href="#canvaspattern">CanvasPattern</a></code>
+ <code><a href="#canvasgradient">CanvasGradient</a></code> or <code><a href="#canvaspattern-0">CanvasPattern</a></code>
object. Invalid values are ignored.</p>
</dd>
@@ -2713,7 +2821,7 @@
<p>Can be set, to change the stroke style.</p>
<p>The style can be either a string containing a CSS color, or a
- <code><a href="#canvasgradient">CanvasGradient</a></code> or <code><a href="#canvaspattern">CanvasPattern</a></code>
+ <code><a href="#canvasgradient">CanvasGradient</a></code> or <code><a href="#canvaspattern-0">CanvasPattern</a></code>
object. Invalid values are ignored.</p>
</dd>
@@ -2756,24 +2864,24 @@
the shapes.</p>
<p>Both attributes can be either strings,
- <code><a href="#canvasgradient">CanvasGradient</a></code>s, or <code><a href="#canvaspattern">CanvasPattern</a></code>s. On
+ <code><a href="#canvasgradient">CanvasGradient</a></code>s, or <code><a href="#canvaspattern-0">CanvasPattern</a></code>s. On
setting, strings must be <span title="parsed as a CSS <color>
value">parsed as CSS <color> values</span> and the color
assigned, and <code><a href="#canvasgradient">CanvasGradient</a></code> and
- <code><a href="#canvaspattern">CanvasPattern</a></code> objects must be assigned themselves. <a href="#refsCSSCOLOR">[CSSCOLOR]</a> If the value is a string but
+ <code><a href="#canvaspattern-0">CanvasPattern</a></code> objects must be assigned themselves. <a href="#refsCSSCOLOR">[CSSCOLOR]</a> If the value is a string but
cannot be <span>parsed as a CSS <color> value</span>, or is
neither a string, a <code><a href="#canvasgradient">CanvasGradient</a></code>, nor a
- <code><a href="#canvaspattern">CanvasPattern</a></code>, then it must be ignored, and the
+ <code><a href="#canvaspattern-0">CanvasPattern</a></code>, then it must be ignored, and the
attribute must retain its previous value.</p>
- <p>When set to a <code><a href="#canvaspattern">CanvasPattern</a></code> or
+ <p>When set to a <code><a href="#canvaspattern-0">CanvasPattern</a></code> or
<code><a href="#canvasgradient">CanvasGradient</a></code> object, the assignment is
<span>live</span>, meaning that changes made to the object after the
assignment do affect subsequent stroking or filling of shapes.</p>
<p>On getting, if the value is a color, then the <a href="#serialization-of-a-color" title="serialization of a color">serialization of the color</a>
must be returned. Otherwise, if it is not a color but a
- <code><a href="#canvasgradient">CanvasGradient</a></code> or <code><a href="#canvaspattern">CanvasPattern</a></code>, then the
+ <code><a href="#canvasgradient">CanvasGradient</a></code> or <code><a href="#canvaspattern-0">CanvasPattern</a></code>, then the
respective object must be returned. (Such objects are opaque and
therefore only useful for assigning to other attributes or for
comparison to other gradients or patterns.)</p>
@@ -2869,6 +2977,15 @@
</dd>
+ <dt><var title="">pattern</var> . <code title="dom-canvaspattern-setTransform"><a href="#dom-canvaspattern-settransform">setTransform</a></code>(<var title="">transform</var>)</dt>
+
+ <dd>
+
+ <p>Sets the transformation matrix that will be used when rendering
+ the pattern during a fill or stroke painting operation.</p>
+
+ </dd>
+
</dl>
<div class="impl">
@@ -2964,7 +3081,7 @@
<hr>
<p>Patterns are represented by objects implementing the opaque
- <code><a href="#canvaspattern">CanvasPattern</a></code> interface.</p>
+ <code><a href="#canvaspattern-0">CanvasPattern</a></code> interface.</p>
<dl class="domintro">
@@ -2972,7 +3089,7 @@
<dd>
- <p>Returns a <code><a href="#canvaspattern">CanvasPattern</a></code> object that uses the given image
+ <p>Returns a <code><a href="#canvaspattern-0">CanvasPattern</a></code> object that uses the given image
and repeats in the direction(s) given by the <var title="">repetition</var> argument.</p>
<p>The allowed values for <var title="">repetition</var> are <code title="">repeat</code> (both directions), <code title="">repeat-x</code> (horizontal only), <code title="">repeat-y</code> (vertical only), and <code title="">no-repeat</code> (neither). If the <var title="">repetition</var> argument is empty, the value <code title="">repeat</code> is used.</p>
@@ -3002,7 +3119,7 @@
value is given, then the user agent must throw a <code>SyntaxError</code>
exception. User agents must recognize the four values described above
exactly (e.g. they must not do case folding). Except as specified
- below, the method must return a <code><a href="#canvaspattern">CanvasPattern</a></code> object
+ below, the method must return a <code><a href="#canvaspattern-0">CanvasPattern</a></code> object
suitably initialized.</p>
<p>The <var title="">image</var> argument is an instance of either
@@ -3024,6 +3141,7 @@
exception.</p>
<!-- drawImage() has an equivalent paragraph -->
+<<<<<<< HEAD
<p>Patterns must be painted so that the top left of the first image
is anchored at the origin of the coordinate space, and images are
then repeated horizontally to the left and right, if the
@@ -3051,8 +3169,68 @@
the filter uses 'repeat' behavior, regardless of the value of
<var title="">repetition</var>.)
<!-- drawImage() has a similar paragraph with different rules -->
+=======
+ </p><p>Patterns have a transformation matrix, which controls how the
+ pattern is used when it is painted. Initially, a pattern's
+ transformation matrix must be the identity transform.</p>
- </p><p>When the <code title="dom-context-2d-createPattern"><a href="#dom-context-2d-createpattern">createPattern()</a></code> method
+ <p>When the <dfn id="dom-canvaspattern-settransform" title="dom-canvaspattern-setTransform"><code>setTransform()</code></dfn>
+ method is invoked on the pattern, the user agent must replace the
+ pattern's transformation matrix with the one described by the
+ <code>SVGMatrix</code> object provided as an argument to the
+ method.</p>
+
+ <p>When a pattern is to be rendered within an area, the user agent
+ must run the following steps to determine what is rendered:</p>
+
+ <ol>
+
+ <li><p>Create an infinite transparent black bitmap.</p></li>
+
+ <li>
+
+ <p>Place a copy of the image on the bitmap, anchored such that its
+ top left corner is at the origin of the coordinate space, with one
+ coordinate space unit per CSS pixel of the image, then place
+ repeated copies of this image horizontally to the left and right,
+ if the <code>repeat-x</code> string was specified, or vertically
+ up and down, if the <code>repeat-y</code> string was specified, or
+ in all four directions all over the bitmap, if the
+ <code>repeat</code> string was specified.</p>
+
+ <p>If the original image data is a bitmap image, the value painted
+ at a point in the area of the repetitions is computed by filtering
+ the original image data. If the <code title="dom-context-2d-imageSmoothingEnabled"><a href="#dom-context-2d-imagesmoothingenabled">imageSmoothingEnabled</a></code>
+ attribute is set to true, then the user agent may use any
+ filtering algorithm (for example bilinear interpolation or
+ nearest-neighbor). If the <code title="dom-context-2d-imageSmoothingEnabled"><a href="#dom-context-2d-imagesmoothingenabled">imageSmoothingEnabled</a></code>
+ attribute is set to false, the image must be rendered using
+ nearest-neighbor interpolation. When such a filtering algorithm
+ requires a pixel value from outside the original image data, it
+ must instead use the value from wrapping the pixel's coordinates
+ to the original image's dimensions. (That is, the filter uses
+ 'repeat' behavior, regardless of the value of <var title="">repetition</var>.)
+ <!-- drawImage() has similar paragraphs with different rules -->
+
+ </p></li>
+
+ <li><p>Transform the resulting bitmap according to the pattern's
+ transformation matrix.</p></li>
+
+ <li><p>Transform the resulting bitmap again, this time according to
+ the <a href="#transformations" title="dom-context-2d-transformation">current
+ transformation matrix</a>.</p></li>
+
+ <li><p>Replace any part of the image outside the area in which the
+ pattern is to be rendered with transparent black.</p></li>
+
+ <li><p>The resulting bitmap is what is to be rendered, with the
+ same origin and same scale.</p></li>
+
+ </ol>
+>>>>>>> 34b9330... Revert "Removed TextMetrics feature"
+
+ <p>When the <code title="dom-context-2d-createPattern"><a href="#dom-context-2d-createpattern">createPattern()</a></code> method
is passed an animated image as its <var title="">image</var>
argument, the user agent must use the poster frame of the animation,
or, if there is no poster frame, the first frame of the
@@ -3213,7 +3391,21 @@
</dd>
- <dt><var title="">metrics</var> . <code title="dom-textmetrics-width"><a href="#dom-textmetrics-width">width</a></code></dt>
+ <dt><var title="">metrics</var> . <code title="dom-textmetrics-width"><a href="#dom-textmetrics-width-0">width</a></code></dt>
+<<<<<<< HEAD
+=======
+ <dt><var title="">metrics</var> . <code title="dom-textmetrics-actualBoundingBoxLeft"><a href="#dom-textmetrics-actualboundingboxleft">actualBoundingBoxLeft</a></code></dt>
+ <dt><var title="">metrics</var> . <code title="dom-textmetrics-actualBoundingBoxRight"><a href="#dom-textmetrics-actualboundingboxright">actualBoundingBoxRight</a></code></dt>
+ <dt><var title="">metrics</var> . <code title="dom-textmetrics-fontBoundingBoxAscent"><a href="#dom-textmetrics-fontboundingboxascent">fontBoundingBoxAscent</a></code></dt>
+ <dt><var title="">metrics</var> . <code title="dom-textmetrics-fontBoundingBoxDescent"><a href="#dom-textmetrics-fontboundingboxdescent">fontBoundingBoxDescent</a></code></dt>
+ <dt><var title="">metrics</var> . <code title="dom-textmetrics-actualBoundingBoxAscent"><a href="#dom-textmetrics-actualboundingboxascent">actualBoundingBoxAscent</a></code></dt>
+ <dt><var title="">metrics</var> . <code title="dom-textmetrics-actualBoundingBoxDescent"><a href="#dom-textmetrics-actualboundingboxdescent">actualBoundingBoxDescent</a></code></dt>
+ <dt><var title="">metrics</var> . <code title="dom-textmetrics-emHeightAscent"><a href="#dom-textmetrics-emheightascent">emHeightAscent</a></code></dt>
+ <dt><var title="">metrics</var> . <code title="dom-textmetrics-emHeightDescent"><a href="#dom-textmetrics-emheightdescent">emHeightDescent</a></code></dt>
+ <dt><var title="">metrics</var> . <code title="dom-textmetrics-hangingBaseline"><a href="#dom-textmetrics-hangingbaseline">hangingBaseline</a></code></dt>
+ <dt><var title="">metrics</var> . <code title="dom-textmetrics-alphabeticBaseline"><a href="#dom-textmetrics-alphabeticbaseline">alphabeticBaseline</a></code></dt>
+ <dt><var title="">metrics</var> . <code title="dom-textmetrics-ideographicBaseline"><a href="#dom-textmetrics-ideographicbaseline">ideographicBaseline</a></code></dt>
+>>>>>>> 34b9330... Revert "Removed TextMetrics feature"
<dd>
@@ -3443,7 +3635,7 @@
inline element set to the current font of the context as given by
the <code title="dom-context-2d-font"><a href="#dom-context-2d-font">font</a></code> attribute, and
must then create a new <code><a href="#textmetrics">TextMetrics</a></code> object with its
- <code title="dom-textmetrics-width"><a href="#dom-textmetrics-width">width</a></code> attribute set to
+ <code title="dom-textmetrics-width"><a href="#dom-textmetrics-width-0">width</a></code> attribute set to
the width of that inline box, in CSS pixels.
<!--ADD-TOPIC:Security-->
If doing these measurements requires using a font that has an
@@ -3459,11 +3651,79 @@
<!--INSERT FINGERPRINT-->
</p>
+<<<<<<< HEAD
<p>The <code><a href="#textmetrics">TextMetrics</a></code> interface is used for the objects
returned from <code title="dom-context-2d-measureText"><a href="#dom-context-2d-measuretext">measureText()</a></code>. It has one
attribute, <dfn id="dom-textmetrics-width" title="dom-textmetrics-width"><code>width</code></dfn>, which is set
by the <code title="dom-context-2d-measureText"><a href="#dom-context-2d-measuretext">measureText()</a></code>
method.</p>
+=======
+ </div>
+
+ <dl>
+
+ <dt><dfn id="dom-textmetrics-width-0" title="dom-textmetrics-width"><code>width</code></dfn> attribute</dt>
+
+ <dd><p>The width of that inline box, in CSS pixels. (The text's advance width.)</p></dd>
+
+ <dt><dfn id="dom-textmetrics-actualboundingboxleft" title="dom-textmetrics-actualBoundingBoxLeft"><code>actualBoundingBoxLeft</code></dfn> attribute</dt>
+
+ <dd>
+ <p>The distance parallel to the baseline from the alignment point given by the <code title="dom-context-2d-textAlign"><a href="#dom-context-2d-textalign">textAlign</a></code> attribute to the left side of the bounding rectangle of the given text, in CSS pixels; positive numbers indicating a distance going left from the given alignment point.
+ </p><p class="note">The sum of this value and the next (<code title="dom-textmetrics-actualBoundingBoxRight"><a href="#dom-textmetrics-actualboundingboxright">actualBoundingBoxRight</a></code>) can be wider than the width of the inline box (<code title="dom-textmetrics-width"><a href="#dom-textmetrics-width-0">width</a></code>), in particular with slanted fonts where characters overhang their advance width.</p>
+
+ </dd>
+
+ <dt><dfn id="dom-textmetrics-actualboundingboxright" title="dom-textmetrics-actualBoundingBoxRight"><code>actualBoundingBoxRight</code></dfn> attribute</dt>
+
+ <dd>
+ <p>The distance parallel to the baseline from the alignment point given by the <code title="dom-context-2d-textAlign"><a href="#dom-context-2d-textalign">textAlign</a></code> attribute to the right side of the bounding rectangle of the given text, in CSS pixels; positive numbers indicating a distance going right from the given alignment point.</p>
+ </dd>
+
+ <dt><dfn id="dom-textmetrics-fontboundingboxascent" title="dom-textmetrics-fontBoundingBoxAscent"><code>fontBoundingBoxAscent</code></dfn> attribute</dt>
+
+ <dd>
+ <p>The distance from the horizontal line indicated by the <code title="dom-context-2d-textBaseline"><a href="#dom-context-2d-textbaseline">textBaseline</a></code> attribute to the top of the highest bounding rectangle of all the fonts used to render the text, in CSS pixels; positive numbers indicating a distance going up from the given baseline.</p>
+ <p class="note">This value and the next are useful when rendering a background that must have a consistent height even if the exact text being rendered changes. The <code title="dom-textmetrics-actualBoundingBoxAscent"><a href="#dom-textmetrics-actualboundingboxascent">actualBoundingBoxAscent</a></code> attribute (and its corresponding attribute for the descent) are useful when drawing a bounding box around specific text.</p>
+ </dd>
+
+ <dt><dfn id="dom-textmetrics-fontboundingboxdescent" title="dom-textmetrics-fontBoundingBoxDescent"><code>fontBoundingBoxDescent</code></dfn> attribute</dt>
+
+ <dd><p>The distance from the horizontal line indicated by the <code title="dom-context-2d-textBaseline"><a href="#dom-context-2d-textbaseline">textBaseline</a></code> attribute to the bottom of the lowest bounding rectangle of all the fonts used to render the text, in CSS pixels; positive numbers indicating a distance going down from the given baseline.</p></dd>
+
+ <dt><dfn id="dom-textmetrics-actualboundingboxascent" title="dom-textmetrics-actualBoundingBoxAscent"><code>actualBoundingBoxAscent</code></dfn> attribute</dt>
+
+ <dd>
+ <p>The distance from the horizontal line indicated by the <code title="dom-context-2d-textBaseline"><a href="#dom-context-2d-textbaseline">textBaseline</a></code> attribute to the top of the bounding rectangle of the given text, in CSS pixels; positive numbers indicating a distance going up from the given baseline.
+ </p><p class="note">This number can vary greatly based on the input text, even if the first font specified covers all the characters in the input. For example, the <code title="dom-textmetrics-actualBoundingBoxAscent"><a href="#dom-textmetrics-actualboundingboxascent">actualBoundingBoxAscent</a></code> of a lowercase "o" from an alphabetic baseline would be less than that of an uppercase "F". The value can easily be negative; for example, the distance from the top of the em box (<code title="dom-context-2d-textBaseline"><a href="#dom-context-2d-textbaseline">textBaseline</a></code> value "<code title="dom-context-2d-textBaseline-top"><a href="#dom-context-2d-textbaseline-top">top</a></code>") to the top of the bounding rectangle when the given text is just a single comma "<code title="">,</code>" would likely (unless the font is quite unusual) be negative.</p>
+ </dd>
+
+ <dt><dfn id="dom-textmetrics-actualboundingboxdescent" title="dom-textmetrics-actualBoundingBoxDescent"><code>actualBoundingBoxDescent</code></dfn> attribute</dt>
+
+ <dd><p>The distance from the horizontal line indicated by the <code title="dom-context-2d-textBaseline"><a href="#dom-context-2d-textbaseline">textBaseline</a></code> attribute to the bottom of the bounding rectangle of the given text, in CSS pixels; positive numbers indicating a distance going down from the given baseline.</p></dd>
+
+ <dt><dfn id="dom-textmetrics-emheightascent" title="dom-textmetrics-emHeightAscent"><code>emHeightAscent</code></dfn> attribute</dt>
+
+ <dd><p>The distance from the horizontal line indicated by the <code title="dom-context-2d-textBaseline"><a href="#dom-context-2d-textbaseline">textBaseline</a></code> attribute to the top of the em square in the line box, in CSS pixels; positive numbers indicating that the given baseline is below the top of the em square (so this value will usually be positive). Zero if the given baseline is the top of the em square; half the font size if the given baseline is the middle of the em square.</p></dd>
+
+ <dt><dfn id="dom-textmetrics-emheightdescent" title="dom-textmetrics-emHeightDescent"><code>emHeightDescent</code></dfn> attribute</dt>
+
+ <dd><p>The distance from the horizontal line indicated by the <code title="dom-context-2d-textBaseline"><a href="#dom-context-2d-textbaseline">textBaseline</a></code> attribute to the bottom of the em square in the line box, in CSS pixels; positive numbers indicating that the given baseline is below the bottom of the em square (so this value will usually be negative). (Zero if the given baseline is the top of the em square.)</p></dd>
+
+ <dt><dfn id="dom-textmetrics-hangingbaseline" title="dom-textmetrics-hangingBaseline"><code>hangingBaseline</code></dfn> attribute</dt>
+
+ <dd><p>The distance from the horizontal line indicated by the <code title="dom-context-2d-textBaseline"><a href="#dom-context-2d-textbaseline">textBaseline</a></code> attribute to the hanging baseline of the line box, in CSS pixels; positive numbers indicating that the given baseline is below the hanging baseline. (Zero if the given baseline is the hanging baseline.)</p></dd>
+
+ <dt><dfn id="dom-textmetrics-alphabeticbaseline" title="dom-textmetrics-alphabeticBaseline"><code>alphabeticBaseline</code></dfn> attribute</dt>
+
+ <dd><p>The distance from the horizontal line indicated by the <code title="dom-context-2d-textBaseline"><a href="#dom-context-2d-textbaseline">textBaseline</a></code> attribute to the alphabetic baseline of the line box, in CSS pixels; positive numbers indicating that the given baseline is below the alphabetic baseline. (Zero if the given baseline is the alphabetic baseline.)</p></dd>
+
+ <dt><dfn id="dom-textmetrics-ideographicbaseline" title="dom-textmetrics-ideographicBaseline"><code>ideographicBaseline</code></dfn> attribute</dt>
+
+ <dd><p>The distance from the horizontal line indicated by the <code title="dom-context-2d-textBaseline"><a href="#dom-context-2d-textbaseline">textBaseline</a></code> attribute to the ideographic baseline of the line box, in CSS pixels; positive numbers indicating that the given baseline is below the ideographic baseline. (Zero if the given baseline is the ideographic baseline.)</p></dd>
+
+ </dl>
+>>>>>>> 34b9330... Revert "Removed TextMetrics feature"
<p class="note">Glyphs rendered using <code title="dom-context-2d-fillText"><a href="#dom-context-2d-filltext">fillText()</a></code> and <code title="dom-context-2d-strokeText"><a href="#dom-context-2d-stroketext">strokeText()</a></code> can spill out
of the box given by the font size (the em square size) and the width
@@ -3474,7 +3734,7 @@
area of the canvas that the clipping region covers, not just the box
given by the em square height and measured text width.</p>
- </div>
+
<p class="note">A future version of the 2D context API may provide a
way to render fragments of documents, rendered using CSS, straight
@@ -3994,8 +4254,20 @@
suggested that 5,5,-2,-2 was different than 3,3,2,2; this is trying
to clarify that this is no the case. --></p>
+<<<<<<< HEAD
<p class="note">This specification does not define the algorithm to
use when scaling the image, if necessary.</p>
+=======
+ <p>If the <code title="dom-context-2d-imageSmoothingEnabled"><a href="#dom-context-2d-imagesmoothingenabled">imageSmoothingEnabled</a></code>
+ attribute is set to true, then the user agent should attempt to
+ apply a smoothing algorithm to the image data when it is scaled.
+ Otherwise, the image must be rendered using nearest-neighbor
+ interpolation.</p>
+
+ <p class="note">This specification does not define the precise
+ algorithm to use when scaling an image when the <code title="dom-context-2d-imageSmoothingEnabled"><a href="#dom-context-2d-imagesmoothingenabled">imageSmoothingEnabled</a></code>
+ attribute is set to true.</p>
+>>>>>>> 34b9330... Revert "Removed TextMetrics feature"
<p class="note">When a canvas is drawn onto itself, the <a href="#drawing-model">drawing
model</a> requires the source to be copied before the image is drawn
@@ -5332,8 +5604,40 @@
+<<<<<<< HEAD
+=======
+ <h2 id="image-smoothing"><span class="secno">17 </span>Image smoothing</h2>
+
+ <dl class="domintro">
- <h2 id="shadows"><span class="secno">17 </span><dfn>Shadows</dfn></h2>
+ <dt><var title="">context</var> . <code title="dom-context-2d-imageSmoothingEnabled"><a href="#dom-context-2d-imagesmoothingenabled">imageSmoothingEnabled</a></code> [ = <var title="">value</var> ]</dt>
+
+ <dd>
+
+ <p>Returns whether pattern fills and the <code title="dom-context-2d-drawImage"><a href="#dom-context-2d-drawimage">drawImage()</a></code> method will
+ attempt to smooth images if they have to rescale them (as opposed
+ to just rendering the images with "big pixels").</p>
+
+ <p>Can be set, to change whether images are smoothed (true) or not
+ (false).</p>
+
+ </dd>
+
+ </dl>
+
+ <div class="impl">
+
+ <p>The <dfn id="dom-context-2d-imagesmoothingenabled" title="dom-context-2d-imageSmoothingEnabled"><code>imageSmoothingEnabled</code></dfn>
+ attribute, on getting, must return the last value it was set to. On
+ setting, it must be set to the new value. When the
+ <code><a href="#canvasrenderingcontext2d">CanvasRenderingContext2D</a></code> object is created, the
+ attribute must be set to true.</p>
+
+ </div>
+
+>>>>>>> 34b9330... Revert "Removed TextMetrics feature"
+
+ <h2 id="shadows"><span class="secno">18 </span><dfn>Shadows</dfn></h2>
<p>All drawing operations are affected by the four global shadow
attributes.</p>
@@ -5486,7 +5790,7 @@
<div class="impl">
- <h2 id="drawing-model"><span class="secno">18 </span><dfn>Drawing model</dfn></h2>
+ <h2 id="drawing-model"><span class="secno">19 </span><dfn>Drawing model</dfn></h2>
<p>When a shape or image is painted, user agents must follow these
steps, in the order given (or act as if they do):</p>
@@ -5521,7 +5825,7 @@
</div>
- <h2 id="best-practices"><span class="secno">19 </span>Best practices</h2>
+ <h2 id="best-practices"><span class="secno">20 </span>Best practices</h2>
<p><i>This section is non-normative.</i></p>
<p>When a canvas is interactive, authors should include focusable
@@ -5586,7 +5890,7 @@
attribute.</p>
- <h2 id="examples"><span class="secno">20 </span>Examples</h2>
+ <h2 id="examples"><span class="secno">21 </span>Examples</h2>
<p><i>This section is non-normative.</i></p>
<div class="example">
Received on Thursday, 18 October 2012 18:13:34 UTC