canvas tutorials - curves

by Amanda Williamson

HTML

<canvas id="canvas" width="600" height="600"></canvas>

JavaScript

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

//Arc/Semicircle
/*var start = Math.PI;
var end = Math.PI * 2;
ctx.beginPath();
ctx.arc(200,200,50,start,end,false);
ctx.lineWidth = 5;
ctx.closePath();
ctx.stroke();
ctx.fillStyle = 'green';
ctx.fill();*/

//Ellipse
ctx.ellipse(300, 300, 150, 50, 0, 0, 2 * Math.PI);
ctx.fillStyle = '#ccc';
ctx.fill();

//Quadratic Curve
/*ctx.beginPath();
ctx.moveTo(100,100);
ctx.quadraticCurveTo(200,0,250,100);
ctx.lineWidth = 5;
ctx.strokeStyle = 'blue';
ctx.stroke();*/

//Bezier Curve
ctx.beginPath();
ctx.moveTo(100,100);
ctx.bezierCurveTo(100,0,150,137,269,128);
ctx.lineWidth = 5;
ctx.strokeStyle = 'red';
ctx.stroke();