[giow] (0) fix the definition of ellipse() and arcTo(), and fix the d…

…ialgram for arc(). Affected topics: Canvas git-svn-id: http://svn.whatwg.org/webapps@7144 340c8d12-0b0e-0410-8428-c7bf67bfef74
sneakyness · Jun 23, 2012 · acd6d70 · acd6d70
1 parent 261f430
commit acd6d70
Show file tree

Hide file tree

Showing 4 changed files with 144 additions and 88 deletions.
diff --git a/complete.html b/complete.html
@@ -36768,7 +36768,7 @@ <h6 id=text-styles><span class=secno>4.8.11.1.4 </span>Text styles</h6>
     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>
+    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>
@@ -36910,7 +36910,7 @@ <h6 id=text-styles><span class=secno>4.8.11.1.4 </span>Text styles</h6>
   c.restore();
 }
 
---><figure class=diagrams><!-- if anyone wants to try writing alternative text for this, be my guest. I can't work out how to describe it. --><img alt="" src=http://images.whatwg.org/arc1.png></figure></dd>
+--></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>
@@ -36926,7 +36926,8 @@ <h6 id=text-styles><span class=secno>4.8.11.1.4 </span>Text styles</h6>
     <p>Throws an <code><a href=#indexsizeerror>IndexSizeError</a></code> exception if the given
     radius is negative.</p>
 
-<!--
+    <figure class=diagrams><!-- if anyone wants to try writing alternative text for this, be my guest. I can't work out how to describe it. --><img alt="" src=http://images.whatwg.org/arc1.png></figure><!--
+
 c.clearRect(0, 0, 640, 480);
 c.save();
 try {
@@ -36935,12 +36936,12 @@ <h6 id=text-styles><span class=secno>4.8.11.1.4 </span>Text styles</h6>
   var x = 255;
   var y = 150;
   var radius = 100;
-  var startAngle = 2.4
-  var endAngle = 0.7;
+  var startAngle = 2.0;
+  var endAngle = 5.7;
   var direction = false;
 
-  var bottom = 280;
-  var center = 50;
+  var bottom = 110;
+  var center = 380;
 
   var fontSize = 16;
   var margin = 50;
@@ -36971,22 +36972,37 @@ <h6 id=text-styles><span class=secno>4.8.11.1.4 </span>Text styles</h6>
     c.translate(x, y);
     c.rotate(eA);
     c.beginPath();
-    c.moveTo(r-arrowHead, arrowHead);
+    c.moveTo(r-arrowHead, d?arrowHead:-arrowHead);
     c.lineTo(r, 0);
-    c.lineTo(r+arrowHead, arrowHead);
+    c.lineTo(r+arrowHead, d?arrowHead:-arrowHead);
     c.stroke();
-
     c.strokeStyle = 'silver';
     c.beginPath();
     c.moveTo(0, 0);
     c.lineTo(fr, 0);
     c.stroke();
     c.restore();
 
-    c.textAlign = 'right';
-    c.textBaseline = 'middle';
     c.fillStyle = 'black';
-    c.fillText(s + ' ',x-r,y);
+    if (eA<Math.PI) {
+      c.save();
+      c.translate(x, y);
+      c.rotate(sA+(eA-sA)/2-Math.PI/2);
+      c.translate(0, r);
+      c.rotate(-(sA+(eA-sA)/2-Math.PI/2));
+      c.beginPath();
+      c.textAlign = 'center';
+      c.textBaseline = 'bottom';
+      c.fillText(s + '  ',0,0);
+      c.restore();
+    } else {
+      c.save();
+      c.beginPath();
+      c.textAlign = 'left';
+      c.textBaseline = 'middle';
+      c.fillText(' ' + s,x-r,y);
+      c.restore();
+    }
   }
 
   function radial(x, y, length, rotation, s) {
@@ -37000,7 +37016,7 @@ <h6 id=text-styles><span class=secno>4.8.11.1.4 </span>Text styles</h6>
     c.lineTo(length, 0);
     c.stroke();
     c.textAlign = 'center';
-    c.textBaseline = 'top';
+    c.textBaseline = 'bottom';
     c.fillStyle = 'black';
     c.fillText(s,length/2,0);
     c.restore();
@@ -37016,8 +37032,8 @@ <h6 id=text-styles><span class=secno>4.8.11.1.4 </span>Text styles</h6>
   c.arc(x, y, radius, 0, 2*Math.PI);
   c.stroke();
   // angles
-  arc(x, y, 2*radius/3, 0, startAngle, true, radius, '\u03B1');
-  arc(x, y, radius/3, 0, endAngle, true, radius, '\u03B2');
+  arc(x, y, radius/10+2*radius/3, 0, startAngle, false, radius, '\u03B1');
+  arc(x, y, radius/10+radius/3, 0, endAngle, false, radius, '\u03B2');
   // radii
   radial(x, y, radius, 0, 'radius');
 
@@ -37047,16 +37063,18 @@ <h6 id=text-styles><span class=secno>4.8.11.1.4 </span>Text styles</h6>
   print('context.stroke()');
 
   c.fillStyle = 'green';
-  c.fillText("\u25be initial line", x0, y0-fontSize);
-  c.textAlign = 'center';
-  c.fillText("\u25be arc", x, y-radius-fontSize);
+
+  c.textBaseline = 'top';
+  c.fillText("initial line \u25b4", x0+20, y0+fontSize*2);
+
+  c.textAlign = 'right';
+  c.textBaseline = 'middle';
+  c.fillText("arc \u25b8", x-radius-15, y);
 
 } finally {
   c.restore();
 }
--->
-
-   </dd>
+--></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>
@@ -37176,11 +37194,11 @@ <h6 id=text-styles><span class=secno>4.8.11.1.4 </span>Text styles</h6>
 
   <p>Otherwise, let <var title="">The Arc</var> be the shortest arc
   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
+  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 title="">x1</var>, <var title="">y1</var>) and crosses the point
   (<var title="">x2</var>, <var title="">y2</var>). The points at
   which this ellipse touches these two lines are called the start and
   end tangent points respectively. The method must connect the point
@@ -37213,8 +37231,8 @@ <h6 id=text-styles><span class=secno>4.8.11.1.4 </span>Text styles</h6>
 
   <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="">angle</var>
-  radians anti-clockwise from the x-axis. The points at <var title="">startAngle</var> and <var title="">endAngle</var> along
+  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>

diff --git a/images/arc1.png b/images/arc1.png
diff --git a/index b/index
@@ -36768,7 +36768,7 @@ hairline width with transform. ack Shaun Morris.  --></div>
     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>
+    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>
@@ -36910,7 +36910,7 @@ try {
   c.restore();
 }
 
---><figure class=diagrams><!-- if anyone wants to try writing alternative text for this, be my guest. I can't work out how to describe it. --><img alt="" src=http://images.whatwg.org/arc1.png></figure></dd>
+--></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>
@@ -36926,7 +36926,8 @@ try {
     <p>Throws an <code><a href=#indexsizeerror>IndexSizeError</a></code> exception if the given
     radius is negative.</p>
 
-<!--
+    <figure class=diagrams><!-- if anyone wants to try writing alternative text for this, be my guest. I can't work out how to describe it. --><img alt="" src=http://images.whatwg.org/arc1.png></figure><!--
+
 c.clearRect(0, 0, 640, 480);
 c.save();
 try {
@@ -36935,12 +36936,12 @@ try {
   var x = 255;
   var y = 150;
   var radius = 100;
-  var startAngle = 2.4
-  var endAngle = 0.7;
+  var startAngle = 2.0;
+  var endAngle = 5.7;
   var direction = false;
 
-  var bottom = 280;
-  var center = 50;
+  var bottom = 110;
+  var center = 380;
 
   var fontSize = 16;
   var margin = 50;
@@ -36971,22 +36972,37 @@ try {
     c.translate(x, y);
     c.rotate(eA);
     c.beginPath();
-    c.moveTo(r-arrowHead, arrowHead);
+    c.moveTo(r-arrowHead, d?arrowHead:-arrowHead);
     c.lineTo(r, 0);
-    c.lineTo(r+arrowHead, arrowHead);
+    c.lineTo(r+arrowHead, d?arrowHead:-arrowHead);
     c.stroke();
-
     c.strokeStyle = 'silver';
     c.beginPath();
     c.moveTo(0, 0);
     c.lineTo(fr, 0);
     c.stroke();
     c.restore();
 
-    c.textAlign = 'right';
-    c.textBaseline = 'middle';
     c.fillStyle = 'black';
-    c.fillText(s + ' ',x-r,y);
+    if (eA<Math.PI) {
+      c.save();
+      c.translate(x, y);
+      c.rotate(sA+(eA-sA)/2-Math.PI/2);
+      c.translate(0, r);
+      c.rotate(-(sA+(eA-sA)/2-Math.PI/2));
+      c.beginPath();
+      c.textAlign = 'center';
+      c.textBaseline = 'bottom';
+      c.fillText(s + '  ',0,0);
+      c.restore();
+    } else {
+      c.save();
+      c.beginPath();
+      c.textAlign = 'left';
+      c.textBaseline = 'middle';
+      c.fillText(' ' + s,x-r,y);
+      c.restore();
+    }
   }
 
   function radial(x, y, length, rotation, s) {
@@ -37000,7 +37016,7 @@ try {
     c.lineTo(length, 0);
     c.stroke();
     c.textAlign = 'center';
-    c.textBaseline = 'top';
+    c.textBaseline = 'bottom';
     c.fillStyle = 'black';
     c.fillText(s,length/2,0);
     c.restore();
@@ -37016,8 +37032,8 @@ try {
   c.arc(x, y, radius, 0, 2*Math.PI);
   c.stroke();
   // angles
-  arc(x, y, 2*radius/3, 0, startAngle, true, radius, '\u03B1');
-  arc(x, y, radius/3, 0, endAngle, true, radius, '\u03B2');
+  arc(x, y, radius/10+2*radius/3, 0, startAngle, false, radius, '\u03B1');
+  arc(x, y, radius/10+radius/3, 0, endAngle, false, radius, '\u03B2');
   // radii
   radial(x, y, radius, 0, 'radius');
 
@@ -37047,16 +37063,18 @@ try {
   print('context.stroke()');
 
   c.fillStyle = 'green';
-  c.fillText("\u25be initial line", x0, y0-fontSize);
-  c.textAlign = 'center';
-  c.fillText("\u25be arc", x, y-radius-fontSize);
+
+  c.textBaseline = 'top';
+  c.fillText("initial line \u25b4", x0+20, y0+fontSize*2);
+
+  c.textAlign = 'right';
+  c.textBaseline = 'middle';
+  c.fillText("arc \u25b8", x-radius-15, y);
 
 } finally {
   c.restore();
 }
--->
-
-   </dd>
+--></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>
@@ -37176,11 +37194,11 @@ try {
 
   <p>Otherwise, let <var title="">The Arc</var> be the shortest arc
   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
+  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 title="">x1</var>, <var title="">y1</var>) and crosses the point
   (<var title="">x2</var>, <var title="">y2</var>). The points at
   which this ellipse touches these two lines are called the start and
   end tangent points respectively. The method must connect the point
@@ -37213,8 +37231,8 @@ try {
 
   <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="">angle</var>
-  radians anti-clockwise from the x-axis. The points at <var title="">startAngle</var> and <var title="">endAngle</var> along
+  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>