Dynamic graphics - HTML5 and CSS3 - page 77

The moveTo method moves the “pen” without recording a path, and the
lineTo method moves the pen and records a path:
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.strokeStyle =
'rgb(0,127,127)';
ctx.moveTo(50,50);
ctx.lineTo(150,150);
ctx.lineWidth = 5;
ctx.stroke();
}
}
Now for a little experiment. What
happens if the line is drawn first and
then the box?
function draw() {
var canvas = document
.getElementById('mycanvas');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
ctx.strokeStyle =
'rgb(0,127,127)';
ctx.moveTo(50,50);
ctx.lineTo(150,150);
ctx.lineWidth = 5;
ctx.stroke();
ctx.fillStyle = 'rgb(255,0,0)';
ctx.fillRect(50,50,100,100);
}
}