How to draw circle on html5 canvas

Drawing circle on HTML5 canvas is relatively simple. We just need to define the radius and the center point of the circle then we can start to draw circle with the canvas’s context object.

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
// center point of the circle is at the center of canvas
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = 150;

context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = 'blue';
context.fill();
context.lineWidth = 1;
context.strokeStyle = 'black';
context.stroke();

The outcome of the above program is as follows.

circle