[html5] r7025 - [giow] (0) Add ellipse support to canvas. Affected topics: Canvas

whatwg at whatwg.org whatwg at whatwg.org
Tue Mar 13 12:33:57 PDT 2012


Author: ianh
Date: 2012-03-13 12:33:56 -0700 (Tue, 13 Mar 2012)
New Revision: 7025

Modified:
   complete.html
   index
   source
Log:
[giow] (0) Add ellipse support to canvas.
Affected topics: Canvas

Modified: complete.html
===================================================================
--- complete.html	2012-03-10 00:31:27 UTC (rev 7024)
+++ complete.html	2012-03-13 19:33:56 UTC (rev 7025)
@@ -240,7 +240,7 @@
 
   <header class=head id=head><p><a class=logo href=http://www.whatwg.org/><img alt=WHATWG height=101 src=/images/logo width=101></a></p>
    <hgroup><h1 class=allcaps>HTML</h1>
-    <h2 class="no-num no-toc">Living Standard — Last Updated 10 March 2012</h2>
+    <h2 class="no-num no-toc">Living Standard — Last Updated 13 March 2012</h2>
    </hgroup><dl><dt><strong>Web developer edition:</strong></dt>
     <dd><strong><a href=http://developers.whatwg.org/>http://developers.whatwg.org/</a></strong></dd>
     <dt>Multiple-page version:</dt>
@@ -34988,8 +34988,10 @@
   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); <!-- see ARC-ORDER note below -->
+  void <a href=#dom-context-2d-arcto title=dom-context-2d-arcTo>arcTo</a>(double x1, double y1, double x2, double y2, double radiusX, double radiusY, double rotation); <!-- see ARC-ORDER note below -->
   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); <!-- see ARC-ORDER note below -->
+  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 = false); <!-- see ARC-ORDER note below -->
+  void <a href=#dom-context-2d-ellipse title=dom-context-2d-ellipse>ellipse</a>(double x, double y, double radiusX, double radiusY, double rotation, double startAngle, double endAngle, boolean anticlockwise); <!-- see ARC-ORDER note below -->
 };
 
 interface <dfn id=canvasgradient>CanvasGradient</dfn> {
@@ -35862,8 +35864,8 @@
 
    </dd>
 
-   <dt><var title="">context</var> . <code title=dom-context-2d-arcTo><a href=#dom-context-2d-arcto>arcTo</a></code>(<var title="">x1</var>, <var title="">y1</var>, <var title="">x2</var>, <var title="">y2</var>, <var title="">radius</var>)</dt>
-   <dt><var title="">path</var> . <code title=dom-context-2d-arcTo><a href=#dom-context-2d-arcto>arcTo</a></code>(<var title="">x1</var>, <var title="">y1</var>, <var title="">x2</var>, <var title="">y2</var>, <var title="">radius</var>)</dt>
+   <dt><var title="">context</var> . <code title=dom-context-2d-arcTo><a href=#dom-context-2d-arcto>arcTo</a></code>(<var title="">x1</var>, <var title="">y1</var>, <var title="">x2</var>, <var title="">y2</var>, <var title="">radiusX</var> [, <var title="">radiusY</var>, <var title="">rotation</var> ])</dt>
+   <dt><var title="">path</var> . <code title=dom-context-2d-arcTo><a href=#dom-context-2d-arcto>arcTo</a></code>(<var title="">x1</var>, <var title="">y1</var>, <var title="">x2</var>, <var title="">y2</var>, <var title="">radius</var> [, <var title="">radiusY</var>, <var title="">rotation</var> ])</dt>
 
    <dd>
 
@@ -35871,11 +35873,154 @@
     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
+    anti-clockwise inclination of the ellipse relative to the x-axis.</p>
+
     <p>Throws an <code><a href=#indexsizeerror>IndexSizeError</a></code> exception if the given
     radius is negative.</p>
 
-   </dd>
+    <figure class=diagrams><!-- if anyone wants to try writing alternative text for these,
+     be my guest. I can't work out how to describe them. --><img alt="" src=http://images.whatwg.org/arcTo1.png><img alt="" src=http://images.whatwg.org/arcTo2.png><img alt="" src=http://images.whatwg.org/arcTo3.png></figure><!--
 
+c.clearRect(0, 0, 640, 480);
+c.save();
+try {
+  var x0 = 150;
+  var y0 = 100;
+  var x1 = 375;
+  var y1 = 100;
+  var x2 = x1;
+  var y2 = 250;
+  var r = 50;
+
+  var bottom = 210;
+  var center = 100;
+
+  var fontSize = 16;
+  var margin = 50;
+  var dotHalfSize = 5;
+
+  // (also update the label positions at the bottom)
+
+
+  // ========
+
+  function extendLine(xa,ya,xb,yb) {
+    var dx = xb-xa;
+    var dy = yb-ya;
+    var theta = Math.atan2(dx,dy);
+    var extX = margin * Math.sin(theta);
+    var extY = margin * Math.cos(theta);
+    c.beginPath();
+    c.moveTo(xa-extX,ya-extY);
+    c.lineTo(xb+extX,yb+extY);
+    c.stroke();
+  }
+
+  function dot(x,y,s) {
+    c.beginPath();
+    c.arc(x,y,dotHalfSize,0,Math.PI*2);
+    c.fill();
+    c.textAlign = 'left';
+    c.textBaseline = 'top';
+    c.fillText(s,x+dotHalfSize,y);
+  }
+
+  c.font = fontSize + 'px Gill Sans';
+  c.fillStyle = 'black';
+  c.lineWidth = 1;
+  c.strokeStyle = 'red';
+  extendLine(x0,y0,x1,y1);
+  extendLine(x1,y1,x2,y2);
+
+  c.lineWidth = 1;
+  c.strokeStyle = 'silver';
+  c.beginPath();
+  c.moveTo(x0,y0);
+
+  // based on http://lists.freedesktop.org/archives/cairo/2005-August/004801.html
+  var angle0, angle1, angle2, angled;
+  var xc, yc, dc;
+  angle0 = Math.atan2(y0 - y1, x0 - x1);
+  angle2 = Math.atan2(y2 - y1, x2 - x1);
+  angle1 = (angle0 + angle2) / 2;
+  angled = angle2 - angle0;
+  if (angled > Math.PI || (angled < 0 && angled > -Math.PI)) {
+    angle1 += Math.PI;
+    angled = 2 * Math.PI - angled;
+    angle0 += Math.PI*2;
+    angle2 -= Math.PI*2;
+  } else {
+    angle0 -= Math.PI*2;
+    angle2 += Math.PI*2;
+  }
+  dc = r / Math.sin (angled / 2);
+  yc = Math.sin(angle1);
+  xc = Math.cos(angle1);
+  xc = x1 + xc * dc;
+  yc = y1 + yc * dc;
+
+  c.lineWidth = 1;
+  c.strokeStyle = 'blue';
+  c.beginPath();
+  c.moveTo(xc,yc);
+  c.arc(xc,yc,r, Math.PI*3/4, Math.PI*(3/4));
+  c.stroke();
+  c.beginPath();
+  c.strokeStyle = 'silver';
+  c.arc(xc,yc,r, Math.PI*3/4,Math.PI*(2+3/4));
+  c.stroke();
+  c.save();
+  try {
+    c.translate(xc, yc);
+    c.rotate(-Math.PI/4);
+    c.textAlign = 'center';
+    c.textBaseline = 'top';
+    c.fillText("radius", -r/2, 0);
+  } finally {
+    c.restore();
+  }
+
+  c.lineWidth = 15;
+  c.lineCap = 'round';
+  c.strokeStyle = 'rgba(20,200,40,0.8)';
+  c.beginPath();
+  c.moveTo(x0,y0);
+  c.arcTo(x1,y1,x2,y2,r);
+  c.stroke();
+
+  dot(x0,y0, "x\u2080,y\u2080");
+  dot(x1,y1, "x\u2081,y\u2081");
+  dot(x2,y2, "x\u2082,y\u2082");
+  dot(xc,yc, '');
+
+  c.textAlign = 'left';
+  c.textBaseline = 'alphabetic';
+  var L = 0;
+
+  function print(s) {
+    c.fillText(s, center, bottom+L*fontSize*1.3);
+    L += 1;
+  }
+  print('// the thick line corresponds to:');
+  print('context.moveTo(x\u2080, y\u2080)');
+  print('context.arcTo(x\u2081, y\u2081, x\u2082, y\u2082, radius)');
+  print('context.stroke()');
+
+  c.fillStyle = 'green';
+  c.fillText("\u25be initial line", 160, 70);
+  c.textAlign = 'right';
+  c.fillText("arc \u25b8", x1-25, 115);
+
+} finally {
+  c.restore();
+}
+
+--></dd>
+
    <dt><var title="">context</var> . <code title=dom-context-2d-arc><a href=#dom-context-2d-arc>arc</a></code>(<var title="">x</var>, <var title="">y</var>, <var title="">radius</var>, <var title="">startAngle</var>, <var title="">endAngle</var> [, <var title="">anticlockwise</var> ] )</dt>
    <dt><var title="">path</var> . <code title=dom-context-2d-arc><a href=#dom-context-2d-arc>arc</a></code>(<var title="">x</var>, <var title="">y</var>, <var title="">radius</var>, <var title="">startAngle</var>, <var title="">endAngle</var> [, <var title="">anticlockwise</var> ] )</dt>
 
@@ -35892,6 +36037,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><a href=#indexsizeerror>IndexSizeError</a></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>
 
@@ -35972,13 +36133,14 @@
   curve with control points (<var title="">cp1x</var>, <var title="">cp1y</var>) and (<var title="">cp2x</var>, <var title="">cp2y</var>). Then, it must add the point (<var title="">x</var>, <var title="">y</var>) to the subpath. <a href=#refsBEZIER>[BEZIER]</a></p>
 
   <hr><p>The <dfn id=dom-context-2d-arcto title=dom-context-2d-arcTo><code>arcTo(<var title="">x1</var>, <var title="">y1</var>, <var title="">x2</var>,
-  <var title="">y2</var>, <var title="">radius</var>)</code></dfn>
-  method must first <a href=#ensure-there-is-a-subpath>ensure there is a subpath</a> for <span title="">(<var title="">x1</var>, <var title="">y1</var>)</span>. Then, the behavior depends on the
-  arguments and the last point in the subpath, as described below.</p>
+  <var title="">y2</var>, <var title="">radiusX</var>, <var title="">radiusY</var>, <var title="">rotation</var>)</code></dfn>
+  method must first <a href=#ensure-there-is-a-subpath>ensure there is a subpath</a> for <span title="">(<var title="">x1</var>, <var title="">y1</var>)</span>.
+  Then, the behavior depends on the arguments and the last point in
+  the subpath, as described below.</p>
 
-  <p>Negative values for <var title="">radius</var> must cause the
-  implementation to throw an <code><a href=#indexsizeerror>IndexSizeError</a></code>
-  exception.</p>
+  <p>Negative values for <var title="">radiusX</var> or <var title="">radiusY</var> must cause the implementation to throw an
+  <code><a href=#indexsizeerror>IndexSizeError</a></code> exception. If <var title="">radiusY</var> is omitted, user agents must act as if it had
+  the same value as <var title="">radiusX</var>.</p>
 
   <p>Let the point (<var title="">x0</var>, <var title="">y0</var>) be
   the last point in the subpath.</p>
@@ -35987,9 +36149,10 @@
   equal to the point (<var title="">x1</var>, <var title="">y1</var>),
   or if the point (<var title="">x1</var>, <var title="">y1</var>) is
   equal to the point (<var title="">x2</var>, <var title="">y2</var>),
-  or if the radius <var title="">radius</var> is zero, then the method
-  must add the point (<var title="">x1</var>, <var title="">y1</var>)
-  to the subpath, and connect that point to the previous point (<var title="">x0</var>, <var title="">y0</var>) by a straight line.</p>
+  or if both <var title="">radiusX</var> and <var title="">radiusY</var> are zero, then the method must add the point
+  (<var title="">x1</var>, <var title="">y1</var>) to the subpath, and
+  connect that point to the previous point (<var title="">x0</var>,
+  <var title="">y0</var>) by a straight line.</p>
 
   <p>Otherwise, if the points (<var title="">x0</var>, <var title="">y0</var>), (<var title="">x1</var>, <var title="">y1</var>), and (<var title="">x2</var>, <var title="">y2</var>) all lie on a single straight line, then the
   method must add the point (<var title="">x1</var>, <var title="">y1</var>) to the subpath, and connect that point to the
@@ -35997,12 +36160,14 @@
   straight line.</p>
 
   <p>Otherwise, let <var title="">The Arc</var> be the shortest arc
-  given by circumference of the circle that has radius <var title="">radius</var>, and that has one point tangent to the
+  given by circumference of the ellipse that has radius <var 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 anti-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 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
@@ -36011,38 +36176,48 @@
   tangent point to the subpath.</p>
 
   <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 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
+  <var title="">startAngle</var>, <var title="">endAngle</var>, <var title="">anticlockwise</var>)</code></dfn> 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.</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 a circle that has its origin at (<var title="">x</var>,
-  <var title="">y</var>) and that has radius <var title="">radius</var>. The points at <var title="">startAngle</var>
-  and <var title="">endAngle</var> along this circle's circumference,
-  measured in radians clockwise from the positive x-axis, are the
-  start and end points respectively.</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="">radius</var>
+  radians anti-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 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>
+  <p>If the <var title="">anticlockwise</var> argument 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>
   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
-  is the whole circumference of this circle.</p>
+  is the whole circumference of this ellipse.</p>
 
   <p>Otherwise, the arc is the path along the circumference of this
-  circle from the start point to the end point, going anti-clockwise
+  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 circle, as opposed
+  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. 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.</p>
 
-  <p>Negative values for <var title="">radius</var> must cause the
-  implementation to throw an <code><a href=#indexsizeerror>IndexSizeError</a></code>
-  exception.</p>
+  <p>Negative values for <var title="">radiusX</var> or <var title="">radiusY</var> must cause the implementation to throw an
+  <code><a href=#indexsizeerror>IndexSizeError</a></code> exception.</p>
 
   <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
   containing just the four points (<var title="">x</var>, <var title="">y</var>), (<var title="">x</var>+<var title="">w</var>,

Modified: index
===================================================================
--- index	2012-03-10 00:31:27 UTC (rev 7024)
+++ index	2012-03-13 19:33:56 UTC (rev 7025)
@@ -240,7 +240,7 @@
 
   <header class=head id=head><p><a class=logo href=http://www.whatwg.org/><img alt=WHATWG height=101 src=/images/logo width=101></a></p>
    <hgroup><h1 class=allcaps>HTML</h1>
-    <h2 class="no-num no-toc">Living Standard — Last Updated 10 March 2012</h2>
+    <h2 class="no-num no-toc">Living Standard — Last Updated 13 March 2012</h2>
    </hgroup><dl><dt><strong>Web developer edition:</strong></dt>
     <dd><strong><a href=http://developers.whatwg.org/>http://developers.whatwg.org/</a></strong></dd>
     <dt>Multiple-page version:</dt>
@@ -34988,8 +34988,10 @@
   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); <!-- see ARC-ORDER note below -->
+  void <a href=#dom-context-2d-arcto title=dom-context-2d-arcTo>arcTo</a>(double x1, double y1, double x2, double y2, double radiusX, double radiusY, double rotation); <!-- see ARC-ORDER note below -->
   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); <!-- see ARC-ORDER note below -->
+  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 = false); <!-- see ARC-ORDER note below -->
+  void <a href=#dom-context-2d-ellipse title=dom-context-2d-ellipse>ellipse</a>(double x, double y, double radiusX, double radiusY, double rotation, double startAngle, double endAngle, boolean anticlockwise); <!-- see ARC-ORDER note below -->
 };
 
 interface <dfn id=canvasgradient>CanvasGradient</dfn> {
@@ -35862,8 +35864,8 @@
 
    </dd>
 
-   <dt><var title="">context</var> . <code title=dom-context-2d-arcTo><a href=#dom-context-2d-arcto>arcTo</a></code>(<var title="">x1</var>, <var title="">y1</var>, <var title="">x2</var>, <var title="">y2</var>, <var title="">radius</var>)</dt>
-   <dt><var title="">path</var> . <code title=dom-context-2d-arcTo><a href=#dom-context-2d-arcto>arcTo</a></code>(<var title="">x1</var>, <var title="">y1</var>, <var title="">x2</var>, <var title="">y2</var>, <var title="">radius</var>)</dt>
+   <dt><var title="">context</var> . <code title=dom-context-2d-arcTo><a href=#dom-context-2d-arcto>arcTo</a></code>(<var title="">x1</var>, <var title="">y1</var>, <var title="">x2</var>, <var title="">y2</var>, <var title="">radiusX</var> [, <var title="">radiusY</var>, <var title="">rotation</var> ])</dt>
+   <dt><var title="">path</var> . <code title=dom-context-2d-arcTo><a href=#dom-context-2d-arcto>arcTo</a></code>(<var title="">x1</var>, <var title="">y1</var>, <var title="">x2</var>, <var title="">y2</var>, <var title="">radius</var> [, <var title="">radiusY</var>, <var title="">rotation</var> ])</dt>
 
    <dd>
 
@@ -35871,11 +35873,154 @@
     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
+    anti-clockwise inclination of the ellipse relative to the x-axis.</p>
+
     <p>Throws an <code><a href=#indexsizeerror>IndexSizeError</a></code> exception if the given
     radius is negative.</p>
 
-   </dd>
+    <figure class=diagrams><!-- if anyone wants to try writing alternative text for these,
+     be my guest. I can't work out how to describe them. --><img alt="" src=http://images.whatwg.org/arcTo1.png><img alt="" src=http://images.whatwg.org/arcTo2.png><img alt="" src=http://images.whatwg.org/arcTo3.png></figure><!--
 
+c.clearRect(0, 0, 640, 480);
+c.save();
+try {
+  var x0 = 150;
+  var y0 = 100;
+  var x1 = 375;
+  var y1 = 100;
+  var x2 = x1;
+  var y2 = 250;
+  var r = 50;
+
+  var bottom = 210;
+  var center = 100;
+
+  var fontSize = 16;
+  var margin = 50;
+  var dotHalfSize = 5;
+
+  // (also update the label positions at the bottom)
+
+
+  // ========
+
+  function extendLine(xa,ya,xb,yb) {
+    var dx = xb-xa;
+    var dy = yb-ya;
+    var theta = Math.atan2(dx,dy);
+    var extX = margin * Math.sin(theta);
+    var extY = margin * Math.cos(theta);
+    c.beginPath();
+    c.moveTo(xa-extX,ya-extY);
+    c.lineTo(xb+extX,yb+extY);
+    c.stroke();
+  }
+
+  function dot(x,y,s) {
+    c.beginPath();
+    c.arc(x,y,dotHalfSize,0,Math.PI*2);
+    c.fill();
+    c.textAlign = 'left';
+    c.textBaseline = 'top';
+    c.fillText(s,x+dotHalfSize,y);
+  }
+
+  c.font = fontSize + 'px Gill Sans';
+  c.fillStyle = 'black';
+  c.lineWidth = 1;
+  c.strokeStyle = 'red';
+  extendLine(x0,y0,x1,y1);
+  extendLine(x1,y1,x2,y2);
+
+  c.lineWidth = 1;
+  c.strokeStyle = 'silver';
+  c.beginPath();
+  c.moveTo(x0,y0);
+
+  // based on http://lists.freedesktop.org/archives/cairo/2005-August/004801.html
+  var angle0, angle1, angle2, angled;
+  var xc, yc, dc;
+  angle0 = Math.atan2(y0 - y1, x0 - x1);
+  angle2 = Math.atan2(y2 - y1, x2 - x1);
+  angle1 = (angle0 + angle2) / 2;
+  angled = angle2 - angle0;
+  if (angled > Math.PI || (angled < 0 && angled > -Math.PI)) {
+    angle1 += Math.PI;
+    angled = 2 * Math.PI - angled;
+    angle0 += Math.PI*2;
+    angle2 -= Math.PI*2;
+  } else {
+    angle0 -= Math.PI*2;
+    angle2 += Math.PI*2;
+  }
+  dc = r / Math.sin (angled / 2);
+  yc = Math.sin(angle1);
+  xc = Math.cos(angle1);
+  xc = x1 + xc * dc;
+  yc = y1 + yc * dc;
+
+  c.lineWidth = 1;
+  c.strokeStyle = 'blue';
+  c.beginPath();
+  c.moveTo(xc,yc);
+  c.arc(xc,yc,r, Math.PI*3/4, Math.PI*(3/4));
+  c.stroke();
+  c.beginPath();
+  c.strokeStyle = 'silver';
+  c.arc(xc,yc,r, Math.PI*3/4,Math.PI*(2+3/4));
+  c.stroke();
+  c.save();
+  try {
+    c.translate(xc, yc);
+    c.rotate(-Math.PI/4);
+    c.textAlign = 'center';
+    c.textBaseline = 'top';
+    c.fillText("radius", -r/2, 0);
+  } finally {
+    c.restore();
+  }
+
+  c.lineWidth = 15;
+  c.lineCap = 'round';
+  c.strokeStyle = 'rgba(20,200,40,0.8)';
+  c.beginPath();
+  c.moveTo(x0,y0);
+  c.arcTo(x1,y1,x2,y2,r);
+  c.stroke();
+
+  dot(x0,y0, "x\u2080,y\u2080");
+  dot(x1,y1, "x\u2081,y\u2081");
+  dot(x2,y2, "x\u2082,y\u2082");
+  dot(xc,yc, '');
+
+  c.textAlign = 'left';
+  c.textBaseline = 'alphabetic';
+  var L = 0;
+
+  function print(s) {
+    c.fillText(s, center, bottom+L*fontSize*1.3);
+    L += 1;
+  }
+  print('// the thick line corresponds to:');
+  print('context.moveTo(x\u2080, y\u2080)');
+  print('context.arcTo(x\u2081, y\u2081, x\u2082, y\u2082, radius)');
+  print('context.stroke()');
+
+  c.fillStyle = 'green';
+  c.fillText("\u25be initial line", 160, 70);
+  c.textAlign = 'right';
+  c.fillText("arc \u25b8", x1-25, 115);
+
+} finally {
+  c.restore();
+}
+
+--></dd>
+
    <dt><var title="">context</var> . <code title=dom-context-2d-arc><a href=#dom-context-2d-arc>arc</a></code>(<var title="">x</var>, <var title="">y</var>, <var title="">radius</var>, <var title="">startAngle</var>, <var title="">endAngle</var> [, <var title="">anticlockwise</var> ] )</dt>
    <dt><var title="">path</var> . <code title=dom-context-2d-arc><a href=#dom-context-2d-arc>arc</a></code>(<var title="">x</var>, <var title="">y</var>, <var title="">radius</var>, <var title="">startAngle</var>, <var title="">endAngle</var> [, <var title="">anticlockwise</var> ] )</dt>
 
@@ -35892,6 +36037,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><a href=#indexsizeerror>IndexSizeError</a></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>
 
@@ -35972,13 +36133,14 @@
   curve with control points (<var title="">cp1x</var>, <var title="">cp1y</var>) and (<var title="">cp2x</var>, <var title="">cp2y</var>). Then, it must add the point (<var title="">x</var>, <var title="">y</var>) to the subpath. <a href=#refsBEZIER>[BEZIER]</a></p>
 
   <hr><p>The <dfn id=dom-context-2d-arcto title=dom-context-2d-arcTo><code>arcTo(<var title="">x1</var>, <var title="">y1</var>, <var title="">x2</var>,
-  <var title="">y2</var>, <var title="">radius</var>)</code></dfn>
-  method must first <a href=#ensure-there-is-a-subpath>ensure there is a subpath</a> for <span title="">(<var title="">x1</var>, <var title="">y1</var>)</span>. Then, the behavior depends on the
-  arguments and the last point in the subpath, as described below.</p>
+  <var title="">y2</var>, <var title="">radiusX</var>, <var title="">radiusY</var>, <var title="">rotation</var>)</code></dfn>
+  method must first <a href=#ensure-there-is-a-subpath>ensure there is a subpath</a> for <span title="">(<var title="">x1</var>, <var title="">y1</var>)</span>.
+  Then, the behavior depends on the arguments and the last point in
+  the subpath, as described below.</p>
 
-  <p>Negative values for <var title="">radius</var> must cause the
-  implementation to throw an <code><a href=#indexsizeerror>IndexSizeError</a></code>
-  exception.</p>
+  <p>Negative values for <var title="">radiusX</var> or <var title="">radiusY</var> must cause the implementation to throw an
+  <code><a href=#indexsizeerror>IndexSizeError</a></code> exception. If <var title="">radiusY</var> is omitted, user agents must act as if it had
+  the same value as <var title="">radiusX</var>.</p>
 
   <p>Let the point (<var title="">x0</var>, <var title="">y0</var>) be
   the last point in the subpath.</p>
@@ -35987,9 +36149,10 @@
   equal to the point (<var title="">x1</var>, <var title="">y1</var>),
   or if the point (<var title="">x1</var>, <var title="">y1</var>) is
   equal to the point (<var title="">x2</var>, <var title="">y2</var>),
-  or if the radius <var title="">radius</var> is zero, then the method
-  must add the point (<var title="">x1</var>, <var title="">y1</var>)
-  to the subpath, and connect that point to the previous point (<var title="">x0</var>, <var title="">y0</var>) by a straight line.</p>
+  or if both <var title="">radiusX</var> and <var title="">radiusY</var> are zero, then the method must add the point
+  (<var title="">x1</var>, <var title="">y1</var>) to the subpath, and
+  connect that point to the previous point (<var title="">x0</var>,
+  <var title="">y0</var>) by a straight line.</p>
 
   <p>Otherwise, if the points (<var title="">x0</var>, <var title="">y0</var>), (<var title="">x1</var>, <var title="">y1</var>), and (<var title="">x2</var>, <var title="">y2</var>) all lie on a single straight line, then the
   method must add the point (<var title="">x1</var>, <var title="">y1</var>) to the subpath, and connect that point to the
@@ -35997,12 +36160,14 @@
   straight line.</p>
 
   <p>Otherwise, let <var title="">The Arc</var> be the shortest arc
-  given by circumference of the circle that has radius <var title="">radius</var>, and that has one point tangent to the
+  given by circumference of the ellipse that has radius <var 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 anti-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 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
@@ -36011,38 +36176,48 @@
   tangent point to the subpath.</p>
 
   <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 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
+  <var title="">startAngle</var>, <var title="">endAngle</var>, <var title="">anticlockwise</var>)</code></dfn> 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.</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 a circle that has its origin at (<var title="">x</var>,
-  <var title="">y</var>) and that has radius <var title="">radius</var>. The points at <var title="">startAngle</var>
-  and <var title="">endAngle</var> along this circle's circumference,
-  measured in radians clockwise from the positive x-axis, are the
-  start and end points respectively.</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="">radius</var>
+  radians anti-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 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>
+  <p>If the <var title="">anticlockwise</var> argument 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>
   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
-  is the whole circumference of this circle.</p>
+  is the whole circumference of this ellipse.</p>
 
   <p>Otherwise, the arc is the path along the circumference of this
-  circle from the start point to the end point, going anti-clockwise
+  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 circle, as opposed
+  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. 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.</p>
 
-  <p>Negative values for <var title="">radius</var> must cause the
-  implementation to throw an <code><a href=#indexsizeerror>IndexSizeError</a></code>
-  exception.</p>
+  <p>Negative values for <var title="">radiusX</var> or <var title="">radiusY</var> must cause the implementation to throw an
+  <code><a href=#indexsizeerror>IndexSizeError</a></code> exception.</p>
 
   <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
   containing just the four points (<var title="">x</var>, <var title="">y</var>), (<var title="">x</var>+<var title="">w</var>,

Modified: source
===================================================================
--- source	2012-03-10 00:31:27 UTC (rev 7024)
+++ source	2012-03-13 19:33:56 UTC (rev 7025)
@@ -40667,8 +40667,10 @@
   void <span title="dom-context-2d-quadraticCurveTo">quadraticCurveTo</span>(double cpx, double cpy, double x, double y);
   void <span title="dom-context-2d-bezierCurveTo">bezierCurveTo</span>(double cp1x, double cp1y, double cp2x, double cp2y, double x, double y);
   void <span title="dom-context-2d-arcTo">arcTo</span>(double x1, double y1, double x2, double y2, double radius); <!-- see ARC-ORDER note below -->
+  void <span title="dom-context-2d-arcTo">arcTo</span>(double x1, double y1, double x2, double y2, double radiusX, double radiusY, double rotation); <!-- see ARC-ORDER note below -->
   void <span title="dom-context-2d-rect">rect</span>(double x, double y, double w, double h);
-  void <span title="dom-context-2d-arc">arc</span>(double x, double y, double radius, double startAngle, double endAngle, optional boolean anticlockwise); <!-- see ARC-ORDER note below -->
+  void <span title="dom-context-2d-arc">arc</span>(double x, double y, double radius, double startAngle, double endAngle, optional boolean anticlockwise = false); <!-- see ARC-ORDER note below -->
+  void <span title="dom-context-2d-ellipse">ellipse</span>(double x, double y, double radiusX, double radiusY, double rotation, double startAngle, double endAngle, boolean anticlockwise); <!-- see ARC-ORDER note below -->
 };
 
 interface <dfn>CanvasGradient</dfn> {
@@ -41692,8 +41694,8 @@
 
    </dd>
 
-   <dt><var title="">context</var> . <code title="dom-context-2d-arcTo">arcTo</code>(<var title="">x1</var>, <var title="">y1</var>, <var title="">x2</var>, <var title="">y2</var>, <var title="">radius</var>)</dt>
-   <dt><var title="">path</var> . <code title="dom-context-2d-arcTo">arcTo</code>(<var title="">x1</var>, <var title="">y1</var>, <var title="">x2</var>, <var title="">y2</var>, <var title="">radius</var>)</dt>
+   <dt><var title="">context</var> . <code title="dom-context-2d-arcTo">arcTo</code>(<var title="">x1</var>, <var title="">y1</var>, <var title="">x2</var>, <var title="">y2</var>, <var title="">radiusX</var> [, <var title="">radiusY</var>, <var title="">rotation</var> ])</dt>
+   <dt><var title="">path</var> . <code title="dom-context-2d-arcTo">arcTo</code>(<var title="">x1</var>, <var title="">y1</var>, <var title="">x2</var>, <var title="">y2</var>, <var title="">radius</var> [, <var title="">radiusY</var>, <var title="">rotation</var> ])</dt>
 
    <dd>
 
@@ -41701,9 +41703,161 @@
     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
+    anti-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>
 
+    <figure class="diagrams">
+     <!-- if anyone wants to try writing alternative text for these,
+     be my guest. I can't work out how to describe them. -->
+     <img src="images/arcTo1.png" alt="">
+     <img src="images/arcTo2.png" alt="">
+     <img src="images/arcTo3.png" alt="">
+    </figure>
+
+<!--
+
+c.clearRect(0, 0, 640, 480);
+c.save();
+try {
+  var x0 = 150;
+  var y0 = 100;
+  var x1 = 375;
+  var y1 = 100;
+  var x2 = x1;
+  var y2 = 250;
+  var r = 50;
+
+  var bottom = 210;
+  var center = 100;
+
+  var fontSize = 16;
+  var margin = 50;
+  var dotHalfSize = 5;
+
+  // (also update the label positions at the bottom)
+
+
+  // ========
+
+  function extendLine(xa,ya,xb,yb) {
+    var dx = xb-xa;
+    var dy = yb-ya;
+    var theta = Math.atan2(dx,dy);
+    var extX = margin * Math.sin(theta);
+    var extY = margin * Math.cos(theta);
+    c.beginPath();
+    c.moveTo(xa-extX,ya-extY);
+    c.lineTo(xb+extX,yb+extY);
+    c.stroke();
+  }
+
+  function dot(x,y,s) {
+    c.beginPath();
+    c.arc(x,y,dotHalfSize,0,Math.PI*2);
+    c.fill();
+    c.textAlign = 'left';
+    c.textBaseline = 'top';
+    c.fillText(s,x+dotHalfSize,y);
+  }
+
+  c.font = fontSize + 'px Gill Sans';
+  c.fillStyle = 'black';
+  c.lineWidth = 1;
+  c.strokeStyle = 'red';
+  extendLine(x0,y0,x1,y1);
+  extendLine(x1,y1,x2,y2);
+
+  c.lineWidth = 1;
+  c.strokeStyle = 'silver';
+  c.beginPath();
+  c.moveTo(x0,y0);
+
+  // based on http://lists.freedesktop.org/archives/cairo/2005-August/004801.html
+  var angle0, angle1, angle2, angled;
+  var xc, yc, dc;
+  angle0 = Math.atan2(y0 - y1, x0 - x1);
+  angle2 = Math.atan2(y2 - y1, x2 - x1);
+  angle1 = (angle0 + angle2) / 2;
+  angled = angle2 - angle0;
+  if (angled > Math.PI || (angled < 0 && angled > -Math.PI)) {
+    angle1 += Math.PI;
+    angled = 2 * Math.PI - angled;
+    angle0 += Math.PI*2;
+    angle2 -= Math.PI*2;
+  } else {
+    angle0 -= Math.PI*2;
+    angle2 += Math.PI*2;
+  }
+  dc = r / Math.sin (angled / 2);
+  yc = Math.sin(angle1);
+  xc = Math.cos(angle1);
+  xc = x1 + xc * dc;
+  yc = y1 + yc * dc;
+
+  c.lineWidth = 1;
+  c.strokeStyle = 'blue';
+  c.beginPath();
+  c.moveTo(xc,yc);
+  c.arc(xc,yc,r, Math.PI*3/4, Math.PI*(3/4));
+  c.stroke();
+  c.beginPath();
+  c.strokeStyle = 'silver';
+  c.arc(xc,yc,r, Math.PI*3/4,Math.PI*(2+3/4));
+  c.stroke();
+  c.save();
+  try {
+    c.translate(xc, yc);
+    c.rotate(-Math.PI/4);
+    c.textAlign = 'center';
+    c.textBaseline = 'top';
+    c.fillText("radius", -r/2, 0);
+  } finally {
+    c.restore();
+  }
+
+  c.lineWidth = 15;
+  c.lineCap = 'round';
+  c.strokeStyle = 'rgba(20,200,40,0.8)';
+  c.beginPath();
+  c.moveTo(x0,y0);
+  c.arcTo(x1,y1,x2,y2,r);
+  c.stroke();
+
+  dot(x0,y0, "x\u2080,y\u2080");
+  dot(x1,y1, "x\u2081,y\u2081");
+  dot(x2,y2, "x\u2082,y\u2082");
+  dot(xc,yc, '');
+
+  c.textAlign = 'left';
+  c.textBaseline = 'alphabetic';
+  var L = 0;
+
+  function print(s) {
+    c.fillText(s, center, bottom+L*fontSize*1.3);
+    L += 1;
+  }
+  print('// the thick line corresponds to:');
+  print('context.moveTo(x\u2080, y\u2080)');
+  print('context.arcTo(x\u2081, y\u2081, x\u2082, y\u2082, radius)');
+  print('context.stroke()');
+
+  c.fillStyle = 'green';
+  c.fillText("\u25be initial line", 160, 70);
+  c.textAlign = 'right';
+  c.fillText("arc \u25b8", x1-25, 115);
+
+} finally {
+  c.restore();
+}
+
+-->
+
    </dd>
 
    <dt><var title="">context</var> . <code title="dom-context-2d-arc">arc</code>(<var title="">x</var>, <var title="">y</var>, <var title="">radius</var>, <var title="">startAngle</var>, <var title="">endAngle</var> [, <var title="">anticlockwise</var> ] )</dt>
@@ -41722,6 +41876,22 @@
 
    </dd>
 
+   <dt><var title="">context</var> . <code title="dom-context-2d-ellipse">ellipse</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">ellipse</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">rect</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">rect</code>(<var title="">x</var>, <var title="">y</var>, <var title="">w</var>, <var title="">h</var>)</dt>
 
@@ -41833,15 +42003,18 @@
 
   <p>The <dfn title="dom-context-2d-arcTo"><code>arcTo(<var
   title="">x1</var>, <var title="">y1</var>, <var title="">x2</var>,
-  <var title="">y2</var>, <var title="">radius</var>)</code></dfn>
+  <var title="">y2</var>, <var title="">radiusX</var>, <var
+  title="">radiusY</var>, <var title="">rotation</var>)</code></dfn>
   method must first <span>ensure there is a subpath</span> for <span
-  title="">(<var title="">x1</var>, <var
-  title="">y1</var>)</span>. Then, the behavior depends on the
-  arguments and the last point in the subpath, as described below.</p>
+  title="">(<var title="">x1</var>, <var title="">y1</var>)</span>.
+  Then, the behavior depends on the arguments and the last point in
+  the subpath, as described below.</p>
 
-  <p>Negative values for <var title="">radius</var> must cause the
-  implementation to throw an <code>IndexSizeError</code>
-  exception.</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. If <var
+  title="">radiusY</var> is omitted, user agents must act as if it had
+  the same value as <var title="">radiusX</var>.</p>
 
   <p>Let the point (<var title="">x0</var>, <var title="">y0</var>) be
   the last point in the subpath.</p>
@@ -41850,10 +42023,11 @@
   equal to the point (<var title="">x1</var>, <var title="">y1</var>),
   or if the point (<var title="">x1</var>, <var title="">y1</var>) is
   equal to the point (<var title="">x2</var>, <var title="">y2</var>),
-  or if the radius <var title="">radius</var> is zero, then the method
-  must add the point (<var title="">x1</var>, <var title="">y1</var>)
-  to the subpath, and connect that point to the previous point (<var
-  title="">x0</var>, <var title="">y0</var>) by a straight line.</p>
+  or if both <var title="">radiusX</var> and <var
+  title="">radiusY</var> are zero, then the method must add the point
+  (<var title="">x1</var>, <var title="">y1</var>) to the subpath, and
+  connect that point to the previous point (<var title="">x0</var>,
+  <var title="">y0</var>) by a straight line.</p>
 
   <p>Otherwise, if the points (<var title="">x0</var>, <var
   title="">y0</var>), (<var title="">x1</var>, <var
@@ -41865,15 +42039,18 @@
   straight line.</p>
 
   <p>Otherwise, let <var title="">The Arc</var> be the shortest arc
-  given by circumference of the circle that has radius <var
-  title="">radius</var>, and that has one point tangent to the
+  given by circumference of the ellipse that has radius <var
+  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 anti-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
   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
@@ -41886,42 +42063,64 @@
   <p>The <dfn 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 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
+  title="">anticlockwise</var>)</code></dfn> and <dfn
+  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.</p>
+
+  <p>The <code title="dom-context-2d-arc">arc()</code> method is
+  equivalent to the <code
+  title="dom-context-2d-ellipse">ellipse()</code> method in the case
+  where the two radii are equal. When the <code
+  title="dom-context-2d-arc">arc()</code> method is invoked, it must
+  act as if the <code title="dom-context-2d-ellipse">ellipse()</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">arc()</code> method.</p>
+
+  <p>When the <code title="dom-context-2d-ellipse">ellipse()</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 a circle that has its origin at (<var title="">x</var>,
-  <var title="">y</var>) and that has radius <var
-  title="">radius</var>. The points at <var title="">startAngle</var>
-  and <var title="">endAngle</var> along this circle's circumference,
-  measured in radians clockwise from the positive x-axis, are the
-  start and end points respectively.</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="">radius</var>
+  radians anti-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 is omitted or
-  false and <span title=""><var title="">endAngle</var>-<var
+  <p>If the <var title="">anticlockwise</var> argument 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>
   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
-  is the whole circumference of this circle.</p>
+  is the whole circumference of this ellipse.</p>
 
   <p>Otherwise, the arc is the path along the circumference of this
-  circle from the start point to the end point, going anti-clockwise
+  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 circle, as opposed
+  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. 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.</p>
 
-  <p>Negative values for <var title="">radius</var> must cause the
-  implementation to throw an <code>IndexSizeError</code>
-  exception.</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>
 
   <hr>
 




More information about the Commit-Watchers mailing list