Training Guide: Programming in HTML5 with JavaScript and CSS3 Ebook

480 CHAPTER 12 Drawing with HTML5

However, if the fill method is called after the stroke method, the fill overwrites the stroke that

is inside the fill area.

Consider the following example that draws two shapes, each consisting of a triangle and

a rectangle. The difference is the order in which the fill method and the stroke method are

called. The rendered output is shown in Figure 12-12.

FIGURE 12-12 endered shapes, different due to the order of the fill and stroke executionR

function drawRect() {

var canvas = document.getElementById('myCanvas')

, ctx = canvas.getContext('2d');

ctx.fillStyle = 'green';

ctx.strokeStyle = 'yellow';

ctx.lineWidth = 10;

ctx.beginPath();

ctx.moveTo(100, 300);

ctx.lineTo(150, 250);

ctx.lineTo(200, 300);

ctx.rect(100, 300, 100, 100);

ctx.fill();

ctx.stroke();

ctx.beginPath();