html5 canvas curve

$(function () {
	var canvas = $('#draw-square')[0];

	if (canvas.getContext) {

		var context = canvas.getContext('2d');

		var a1 = 1.5*Math.PI;	// top 12
		var a2 = 0*Math.PI;		// right 3
		// bottom : 0.5 , left : 1 , top : 1.5 , right : 0(2)

		context.arc(200,200,100,a1,a2,false);
		context.lineWidth=15;
		context.strokeStyle="black"; // line color
		context.lineCap = 'round';

		context.moveTo(10,150);
		context.quadraticCurveTo(150, 100, 200, 100);
		context.arcTo(300,100,300,300,100);
		context.strokeStyle="black"; // line color
		context.stroke();
	} else {
		alert('ur browser sucks, throw it already :D');
		// put code for browsers that don't support canvas here
	}
});