HTML and CSS Reference
In-Depth Information
Note that the stroke you use to draw the line at the
end also gets applied to the circle, even though the
strokeStyle was set after the arc was created.
To ensure that the stroke for the line doesn't apply to the circle, you need
to explicitly put them on different paths with the beginPath() method:
function draw(){
var canvas = document
.getElementById('mycanvas');
if (canvas.getContext) {
ctx.fillStyle = 'rgb(255,0,0)';
ctx.fillRect(50,50,100,100);
ctx.beginPath();
ctx.fillStyle = 'rgb(0,255,0)';
ctx.arc(250, 100, 50, 0,
Math.PI*2, false);
ctx.fill();
ctx.beginPath();
ctx.strokeStyle =
'rgb(0,127,127)';
ctx.moveTo(50,50);
ctx.lineTo(150,150);
ctx.lineWidth = 5;
ctx.stroke();
}
}
Other shapes are just a matter of creating a path and then stroking or
filling, or both. If you move the first two shapes over a little, there's
room to add a triangle. First draw the square and the circle again
slightly further to the left:
ctx.fillStyle = 'rgb(255,0,0)';
ctx.fillRect(5,50,100,100);
ctx.beginPath();
ctx.fillStyle = 'rgb(0,255,0)';
ctx.arc(165, 100, 50, 0, Math.PI*2, false);
Search WWH ::




Custom Search