Canvas - HTML5 - page 197

mycontext. lineWidth = "12";
mycontext. lineJoin = "round";
mycontext.moveTo(20, 20);
mycontext.lineTo(50, 50);
mycontext.lineTo(20, 70);
mycontext.stroke();
The result is shown in Figure 9-6 .
Figure 9-6. Applying the lineWidth and lineJoin stroke styles
To vary what is painted inside the paths you draw, you can control the fill styles to
create gradients or image patterns ( Figure 9-7 ):
var lingrad = mycontext .createLinearGradient (20,20,40,60);
lingrad .addColorStop (0.3, "#0f0");
lingrad .addColorStop (1, "#fff");
mycontext .fillStyle = lingrad;
mycontext.moveTo(20, 20);
mycontext.lineTo(50, 50);
mycontext.lineTo(20, 70);
mycontext.closePath();
mycontext.fill();