arc() to add Arc or Circle to Canvas DEMO



HTML

<canvas id="my_canvas" width="500" height="200"  style="border:1px solid #000000;"></canvas>

JQUERY

<script>
$(document).ready(function() {
var my_canvas=$('#my_canvas').get(0)
var gctx = my_canvas.getContext("2d");
gctx.arc(10,100,40,0,0.5*Math.PI);
gctx.stroke();

gctx.beginPath();
gctx.arc(150,100,40,0,1.0*Math.PI);
gctx.stroke();

gctx.beginPath();
gctx.arc(290,100,40,0,1.5*Math.PI);
gctx.stroke();

gctx.beginPath();
gctx.arc(430,100,40,0,2*Math.PI);
gctx.stroke();
})
</script>