Q:

Javascript `Path2D` arc isn't rendering

I wrote the following script 
var ctx = document.getElementById("crystal").getContext('2d');
var frontback = new Path2D("M 10 10 h 100 v 100 h -100 Z");
var leftright = new Path2D("M 10 10 l 20 20 v 100 l -20 -20");

ctx.save();

ctx.stroke(frontback);
ctx.stroke(leftright);

ctx.translate(20,20);
ctx.stroke(frontback);
ctx.restore();

ctx.translate(100,0);
ctx.stroke(leftright);
ctx.restore();

var pos_ion = new Path2D("M 55 55 A 10 10 0 0 1 55 55");
ctx.stroke(pos_ion);

The lines show as desired but the circle doesn't show at all.  As I understand the inputs after "A", it should be saying that the horizontal and vertical radii are 10, the start angle is 0, the large-arc-flag I tried reading up on but don't fully understand.  But the choice of sweep shouldn't matter, I think.  And the center is at (55,55).  Sounds to me like it should work but apparently not.

A:

To understand what happens in your var pos_ion = new Path2D("M 55 55 A 10 10 0 0 1 55 55"); line of code. You move your stroke to (55,55) coordinates and then you're trying to draw your arc using below parameters.
rx ry x-axis-rotation large-arc-flag sweep-flag x  y
10 10 0               0              1          55 55
According to the docs:

The final two parameters designate the x and y coordinates to end the stroke

So the problem is that the beginning and the end of your stroke are exactly the same point (55,55). You can try to modify those params a little bit to see the arc ((55,0) -> (0,55)) example below:

var ctx = document.getElementById("crystal").getContext('2d');
var frontback = new Path2D("M 10 10 h 100 v 100 h -100 Z");
var leftright = new Path2D("M 10 10 l 20 20 v 100 l -20 -20");

ctx.save();

ctx.stroke(frontback);
ctx.stroke(leftright);

ctx.translate(20,20);
ctx.stroke(frontback);
ctx.restore();

ctx.translate(100,0);
ctx.stroke(leftright);
ctx.restore();


var pos_ion = new Path2D("M 55 0 A 10 10 0 0 1 0 55");
ctx.stroke(pos_ion);
<div><canvas id="crystal" /></div>

