Training Guide: Programming in HTML5 with JavaScript and CSS3 Ebook

Lesson 1: Drawing by using the element CHAPTER 12 493

ctx.beginPath();

ctx.moveTo(405, 180);

ctx.lineTo(325, 180);

ctx.stroke();

ctx.strokeStyle = 'white';

ctx.lineWidth = 1;

ctx.textAlign = 'right';

ctx.textBaseline = 'middle';

ctx.fillText('Mast', 325, 180);

ctx.strokeText('Mast', 325, 180);

ctx.strokeStyle = 'black';

ctx.lineWidth = 2;

ctx.beginPath();

ctx.moveTo(420, 220);

ctx.lineTo(525, 220);

ctx.stroke();

ctx.strokeStyle = 'white';

ctx.lineWidth = 1;

ctx.textAlign = 'left';

ctx.textBaseline = 'middle';

ctx.fillText('Sail', 525, 220);

ctx.strokeText('Sail', 525, 220);

ctx.strokeStyle = 'black';

ctx.lineWidth = 2;

ctx.beginPath();

ctx.moveTo(420, 360);

ctx.lineTo(500, 360);

ctx.stroke();

ctx.strokeStyle = 'white';

ctx.lineWidth = 1;

ctx.textAlign = 'left';

ctx.textBaseline = 'middle';

ctx.fillText('Boom', 500, 360);

ctx.strokeText('Boom', 500, 360);

}

}

The result is shown in Figure 12-22.