Consider the following piece of code (test it yourself):
function draw() {
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.arc(75, 75, 50, 0, Math.PI * 2, true); // Outer circle
ctx.stroke();
ctx.moveTo(75, 75);
ctx.save();
ctx.setLineDash([3, 3]);
ctx.lineTo(90, 90);
ctx.stroke();
ctx.restore();
//ctx.stroke();
}
draw();
However, if I uncomment the last ctx.stroke()
, it draws a line on top of the dashed one, not sure if from (75, 75) to (90, 90) or the other way around:
I thought saving and restoring didn’t affect the “path cursor”, and there’s either any “pending draw command”, and so I expected the extra (and accidental) stroke
after restore
didn’t have any effect whatsoever.
What is going on exactly and how does save()/restore()
relate to this?