Draw a circle with HTML5 Canvas
Description:
To draw a circle with HTML5 Canvas, we can create a full arc using the arc() method by defining the starting angle as 0 and the ending angle as 2 * PI.
arc()
The arc() method creates an arc/curve (used to create circles, or parts of circles).
To create a circle with arc(): Set start angle to 0 and end angle to 2*Math.PI.
Use the stroke() or the fill() method to actually draw the arc on the canvas.
Syntax:
context.arc(x,y,r,sAngle,eAngle,counterclockwise);
Parameter
x : The x-coordinate of the center of the circle.
y : The y-coordinate of the center of the circle.
r : The radius of the circle.
sAngle : The starting angle, in radians.
eAngle : The ending angle, in radians.
counterclockwise : Optional. Specifies whether the drawing should be counterclockwise or clockwise. False is default, and indicates clockwise, while true indicates counter-clockwise.
<!DOCTYPE HTML>
<html>
<head>
<title>Draw Circle with HTML5 Canvas</title>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="578" height="200"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = 70;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = 'green';
context.fill();
context.lineWidth = 5;
context.strokeStyle = '#00ADEF';
context.stroke();
</script>
</body>
</html>
