Training Guide: Programming in HTML5 with JavaScript and CSS3 Ebook

Lesson 1: Drawing by using the element CHAPTER 12 471

FIGURE 12-6 he lineWidth, increased on each iteration of the for loopT

Setting lineJoin

The lineJoin property specifies the way lines that join each other are drawn. You can set the

lineJoin property to round, bevel, or miter. The default value is miter. The difference between

these settings is most noticeable with thicker lines.

The following code demonstrates the creation of three rectangles that have different

lineJoin settings.

function drawLineJoin() {

var canvas = document.getElementById('myCanvas')

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

ctx.lineWidth = 20;

ctx.lineJoin = 'round';

ctx.strokeRect(20, 20, 50, 50);

ctx.lineJoin = 'bevel';

ctx.strokeRect(100, 100, 50, 50);

ctx.lineJoin = 'miter';

ctx.strokeRect(180, 180, 50, 50);

}

In this example, the first rectangle’s lineJoin property is set to round. This produces a rect-

angle with rounded corners. The second rectangle’s lineJoin property is set to bevel, which