Canvas arc, quadratic & bezier

by MICHI CHEN

HTML

<canvas id="myCanvas" width="100" height="400"></canvas>

JavaScript

$(function(){
	var cxt=$('#myCanvas')[0].getContext('2d');
  cxt.beginPath();
  cxt.arc(50,50,30,0,2*Math.PI,true);
  cxt.stroke();
  
  cxt.beginPath();
  cxt.arc(50,120,30,1.2*Math.PI,1.8*Math.PI,false);
  cxt.strokeStyle='#f00';
  cxt.stroke();
  
  cxt.beginPath();
  cxt.moveTo(2,180);
  cxt.quadraticCurveTo(50,100,100,180);
  cxt.strokeStyle='green';
  cxt.stroke();
  
  cxt.beginPath();
  cxt.moveTo(50,250);
  cxt.bezierCurveTo(2,150,50,200,80,250);
  cxt.strokeStyle='blue';
  cxt.stroke();
  
});