608211 - Canvas arcTo Rendering Incorrectly

Status: RESOLVED INVALID

(Core :: Graphics: Canvas2D, defect)

Description

[Hugh Nougher [:Hughman]]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 6.1; en-GB; rv:1.9.2.11) Gecko/20101012 FireDownload/2.0.1 Firefox/3.6.11
Build Identifier: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:2.0b8pre) Gecko/20101028 Firefox/4.0b8pre

This was originally an example given at
https://bugzilla.mozilla.org/show_bug.cgi?id=471281#c50

I have checked this in both latest minefield and Firefox 3.6.11 and does not appear to give the correct results at all. It appears to mostly work (or maybe even fully work) in Opera 10.63.

Reproducible: Always




Attachments to come.

Comment 1

[Hugh Nougher [:Hughman]]

Attachment: Canvas Testcase/Example

Comment 2

[Hugh Nougher [:Hughman]]

Attachment: As seen in Opera

Comment 3

[Hugh Nougher [:Hughman]]

Attachment: An SVG of what I think it should look like

Comment 4

[Boris Zbarsky [:bzbarsky]]

Just looking at that first shape there:

	ctx.beginPath();
	ctx.moveTo(0, 0);
	ctx.arcTo(100, 0, 100, 100, 25);
	ctx.lineTo(0, 25);
	ctx.stroke();

Here's what the spec says for this (http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#dom-context-2d-arcto ):

  1) Let the point (x0, y0) be the last point in the subpath.

In this case, that would be (0,0).  This is not equal to (100, 0), and (100,0) is not equal to (100, 100) and the radius is nonzero so the next paragraph is skipped.  (0,0), (100,0), and (100,100) are not collinear, so the paragraph after that is skipped to.  Then we get to:

  2) Otherwise, let The Arc be the shortest arc given by circumference of the
     circle that has radius radius, and that has one point tangent to the
     half-infinite line that crosses the point (x0, y0) and ends at the point
     (x1, y1), and that has a different point tangent to the half-infinite line
     that ends at the point (x1, y1) and crosses the point (x2, y2). The points
     at which this circle touches these two lines are called the start and end
     tangent points respectively. The method must connect the point (x0, y0) to
     the start tangent point by a straight line, adding the start tangent point
     to the subpath, and then must connect the start tangent point to the end
     tangent point by The Arc, adding the end tangent point to the subpath.

So we need to find a circle tangent to the horizontal line at y = 0 and also tangent to the vertical line at x = 100 and having a radius of 25.  In particular, note that the points passed to arcTo are NOT the endpoints of the arc.  They're control points.  The desired circle, of course, has center at (75,25) and the desired arc is just the upper right quarter-circle, with the arc endpoints at (75,0) and (100,25).  Then there's a horizontal line from (100,25) to (0,25), from the last lineTo.

And that's exactly what we render.

Note that in SVG one specifies arcs via edpoints, not control points.  That seems to be what Opera is doing for canvas too, given its rendering.