A circle is similar to drawing an arc and uses the same methods. If you are not aware of how to use the arc method, then click here to learn. If you already know how to define an arc on a canvas, then you probably already figured out how to define a circle.
A circle is defined by a centre point (X,Y), a radius r, a start angle in radians, an end angle in radians and direction. All this is similar to an arc, except for one small difference. For a circle, the start angle is 0 degrees and end angle is 360 degrees always. Alternately, in radians, start angle is 0 radians and end angle is 6.28 radians.
How to converting from degrees to radians?
Required Methods
You will need the following methods to draw an arc.
strokeStyle:
This method can be used to define the colour of any shape that is drawn on the canvas. Here, we will use it to define the colour of the arc we are about to draw.
This method defines the arc, with the centrepoint at (centrePointX, centrePointY), radius of the arc 'radius', startAngle in radians, endAngles in radians and direction, which is a boolean value (0 = clockwise, 1 = anticlockwise). To make an arc into a circle, the startAngle should be 0 radians and endAngle should be 6.28 radians.
stroke():
The arc() method will only define the arc/circle. The stroke() method is the one that actually
draws the circle on canvas.
Math.PI:
This meathod can be used instead of the constant 3.14 when converting from degrees to radians or vice versa
<html>
<head>
<script type="application/javascript">
function init() {
var canvas = document.getElementById("canvas");
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
//define the colour of the circle
ctx.strokeStyle = "red";
var centreX = 100;
var centreY = 100;
var radius = 75;
// convert start angle '0 degrees' to radians
var startAngle = 0 * Math.PI/180;
//convert end angle '360 degrees' to radians
var endAngle = 360 * Math.PI/180;
//define the circle
ctx.arc(centreX,centreY,radius,startAngle,endAngle,false);
//draw the circle
ctx.stroke();
}
}
</script>
</head>
<body onload="init();">
<canvas id="canvas" width="900"
height="500"></canvas><br>
</body>
</html>
