Dynamic graphics - HTML5 and CSS3 - page 78

As you can see, the line is mostly obscured by the rectangle. You might
think that if you could remove the rectangle the line would still be there
underneath; but after you've drawn over it, the line is gone.
The only way to get the line back is to erase both the rectangle
and the line and then draw the line again. The <canvas> element
doesn't store the elements drawn, only the resulting pixels.
What about other shapes? The path-then-stroke approach is the way to
do it. You can use the arc method to draw a circle and then fill it. The
arc method accepts parameters for the location of the center; the
radius; how far around, in radians, the arc should extend; and whether
that should be clockwise or counterclockwise:
function draw(){
var canvas = document
.getElementById('mycanvas');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'rgb(255,0,0)';
ctx.fillRect(50,50,100,100);
ctx.fillStyle = 'rgb(0,255,0)';
ctx.arc(250, 100,
50, 0,
Math.PI*2,
false);
ctx.fill();
ctx.strokeStyle =
'rgb(0,127,127)';
ctx.moveTo(50,50);
ctx.lineTo(150,150);
ctx.lineWidth = 5;
ctx.stroke();
}
}