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:

Recent Comments