Stroke Styles on canvas on HMTL5

This examples is how to stroke styles on canvas on HTML5:

Write HTML:

<canvas id="tutorial" width="400" height="400"></canvas>

Javascript:

var canvas = document.getElementById('tutorial');
if (canvas.getContext){
var ctx = canvas.getContext('2d');

ctx.lineCap = "square"; 

ctx.beginPath();
ctx.strokeStyle = '#FF0000';
ctx.lineWidth = 20;
ctx.moveTo(150,200);
ctx.lineTo(200,150);
ctx.lineTo(250,200);
ctx.stroke();

ctx.lineCap = "butt"; 

ctx.beginPath();
ctx.strokeStyle = '#00FF00';
ctx.lineWidth = 20;
ctx.moveTo(150,250);
ctx.lineTo(200,200);
ctx.lineTo(250,250);
ctx.stroke();   

ctx.lineCap = "round"; 

ctx.beginPath();
ctx.strokeStyle = '#0000FF';
ctx.lineWidth = 20;
ctx.moveTo(150,300);
ctx.lineTo(200,250);
ctx.lineTo(250,300);
ctx.stroke();
}

and CSS

canvas { border: 1px solid black; }

Result below:

Ping your blog, website, or RSS feed for Free Sitetag