javascript - Understanding HTML5 Canvas Element -

i read tons of documentation save/restore canvas states, still confused next example.

function draw() {     var ctx = document.getelementbyid('canvas').getcontext('2d');      // save default state     ctx.save();      // draw new arc new settings     ctx.linewidth = 2;     ctx.fillstyle = '#bfb';     ctx.strokestyle = '#999';     ctx.beginpath();     ctx.arc(50, 50, 10, 0, 2 * math.pi);     ctx.closepath();     ctx.fill();     ctx.stroke();     // restore default state     ctx.restore();      // save default state again     ctx.save();     // draw line new settings     ctx.linewidth = 4;     ctx.strokestyle = '#000';     ctx.moveto(50, 50);     ctx.lineto(100, 100);     ctx.stroke();     // restore default state     ctx.restore();      // save default state third time     ctx.save();     // draw round circle new settings     ctx.beginpath();     ctx.linewidth = 2;     ctx.strokestyle = '#999';     ctx.arc(100, 100, 10, 0, 2 * math.pi);     ctx.closepath();     ctx.fillstyle = '#bfb';     ctx.fill();     ctx.stroke();     // restore default state     ctx.restore(); }  draw(); 

my logic in code comments, result absolutely not expected. first circle has settings line. circles should have different style line.

i not @ canvas yet basic learning think missing ctx.beginpath(); before starting draw path.

function draw() {     var ctx = document.getelementbyid('canvas').getcontext('2d');      // save default state     ctx.save();      // draw new arc new settings     ctx.linewidth = 2;     ctx.fillstyle = '#bfb';     ctx.strokestyle = '#999';     ctx.beginpath();     ctx.arc(50, 50, 10, 0, 2 * math.pi);     ctx.closepath();     ctx.fill();     ctx.stroke();     // restore default state     ctx.restore();      // save default state again     ctx.save();     // draw line new settings     ctx.beginpath();     ctx.linewidth = 4;     ctx.strokestyle = '#000';    ctx.moveto(50, 50);      ctx.lineto(100, 100);     ctx.stroke();     // restore default state    ctx.restore();      // save default state third time     ctx.save();     // draw round circle new settings     ctx.beginpath();    /* ** missing in code ** */     ctx.linewidth = 2;     ctx.strokestyle = '#999';     ctx.arc(100, 100, 10, 0, 2 * math.pi);     ctx.closepath();     ctx.fillstyle = '#bfb';     ctx.fill();     ctx.stroke();     // restore default state     ctx.restore(); }  draw(); 

demo

source