Mapping SVG ARCTO to HTML Canvas ARCTO

Question

ARCTO in SVG specification is quite different from the one we have in Canvas. I have a use case where I will have the data as per SVG spec but I need to draw that on Canvas.

I tried this but I guess my geometry is weak. Can you please help?

Answer 1

I had the same problem so I came across this post. The Implementation Requirements Appendix of the W3C SVG definition tells exactly how to convert form (they call it) end point parameterization to the center parameterization and back:

The SVG arc (end point parameterization) is described by:

• x₁/y₁: The start position (the position of the last path command)
• x₂/y₂: The end position of the arc (the x and y values of this path command)
• r_x/r_y: The x and y radius
• φ: The rotation angle
• f_A: The large arc flag (1 or 0, whether to use the larg or the small arc)
• f_S: The sweep flag (whether to go clockwise or anticlockwise)

The canvas arc uses (center point parameterization):

• c_x/c_y: The center point of the ellipse
• r_x/r_y: The x and y radius
• φ: The rotation angle
• θ₁: The start angle of the ellipse (before rotation)
• Δθ: The angle distance to use of the ellipse (direction depends on the sweep flag f_S, you can also calculate the end point θ₂ which may be even better)

Convert from SVG to Canvas

This means converting from SVG to canvas you can use the following equations (taken directly from the given url from W3C):

1. Compute (x1′, y1′) (Equation F.6.5.1)

   

2. Compute (cx′, cy′) (Equation F.6.5.2)

   

   where the + sign is chosen if f_A ≠ f_S, and the − sign is chosen if f_A = f_S.

3. Compute (cx, cy) from (cx′, cy′) (Equation F.6.5.3)

   

4. Compute θ₁ and Δθ (Equations F.6.5.5 and F.6.5.6)

   Edit: I am now using other equations, have a look at the bottom

   

   

   where θ₁ is fixed in the range −360° < Δθ < 360° such that:

   if f_S = 0, then Δθ < 0,

   else if f_S = 1, then Δθ > 0.

   In other words, if f_S = 0 and the right side of (F.6.5.6) is greater than 0, then subtract 360°, whereas if f_S = 1 and the right side of (F.6.5.6) is less than 0, then add 360°. In all other cases leave it as is.

_{Copyright © 16 August 2011 World Wide Web Consortium, (MIT, ERCIM, Keio, Beihang). http://www.w3.org/Consortium/Legal/2015/doc-license}

Edit: Modified equations for step 4.

I am now using the following equations for determining θ₁ and Δθ:

This is simply the vectors between the start and end point of the arc and the center point. The φ is subtracted because of the angle is calculated before rotation. You may just leave this away if needed.

I received wrong results of the given equations but this may also be a bug in my implementation. When trying to find the bug I was thinking about what W3C is doing here. I was looking on how to calculate the angles and this was the first thing I thought about. This is leading to the correct results for me.

Convert from Canvas to SVG

I also ran into problems when using the W3C equations when converting back. This may be because of changing the angles. For getting from Canvas to SVG you need to convert the start and end angles (θ₁ and θ₂ = θ₁ + Δθ) together with the center point to the intersections of the arc. Those are the start and end points of the SVG arc.

1. Compute (x1', y1') and (x2', y2')

   

   This is calculating the intersection for the line which is defined by the given angle θ₁/θ₂ in the rotated coordinate system. For the x coordinate the + sign should be chosen, when the -π/2 ≤ θ ≤ π/2. The + sign for the y coordinate should be chosen when 0 ≤ θ ≤ π.

2. Compute (x1, y1) and (x2, y2)

   

   The x and y coordinate of the start and end points can then be calculated by rotating back the rotation angle φ and translating the vector to the center of the ellipse.

3. Find the flags

   The flags can easily be determined: f_A is 1 if Δθ is greater than 180°, fS is 1 if Δθ is greater than 0°.