Draw Circle in HTML5 Canvas Tag

HTML:

Create a html file and put a canvas tag in it. Give it a size and we are off to write some JavaScript to make the circle.

Source code viewer
<canvas id="canvas_circle" width="250" height="250"></canvas>
Programming Language: XML

JavaScript:

Of course you have to put JavaScript in script tag. But this example code draws the circle.

Source code viewer
var canvas_circle = document.getElementById("canvas_circle").getContext("2d");
 
//start drawing
canvas_circle.beginPath();
//draw arc: arc(x, y, radius, startAngle, endAngle, anticlockwise)
canvas_circle.arc(70, 70, 15, Math.PI*2, 0, true);
//end drawing
canvas_circle.closePath();
//fill it so you could see it
canvas_circle.fill();
Programming Language: Javascript

If you play with the parameters you can see how the circle changes.