Training Guide: Programming in HTML5 with JavaScript and CSS3 Ebook

472 CHAPTER 12 Drawing with HTML5

produces a rectangle with beveled corners. Finally, the third rectangle’s lineJoin property is

set to miter, which produces a rectangle with mitered, or pointy, corners. The result is shown

in Figure 12-7.

FIGURE 12-7 he lineJoin property specifying the look of the cornersT

Setting strokeStyle

The strokeStyle property specifies the way you want to draw lines. This setting is the same as

the fillStyle property described earlier. See the “Setting fillStyle” section for more information

regarding the valid settings. The following is an example of the strokeStyle property.

function drawGradientStroke() {

var canvas = document.getElementById('myCanvas')

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

, x0 = 0

, y0 = 0

, r0 = 0

, x1 = 200

, y1 = 0

, r1 = 100

, width = 300

, height = 40

, offset = 25;

ctx.lineWidth = 15;

gradient = ctx.createLinearGradient(x0, y0, x1, y1);