Computers & ProgrammingHTML5Web Development

HTML5 Canvas: Circles and Arcs

To create circles (arcs) onto the HTML5 Canvas, we can use the arc() method. Arcs are defined by a center point, radius, starting angle, ending angle, and the arc drawing direction. The canvas element and arc() method is supported by Internet Explorer 9, Firefox, Opera, Chrome, and Safari. In this first example, we will draw a circle.

In instances where you need to draw a semi-circle, or a custom arc, you can use the same method. An arc is simply a section of the circumference of a circle. So, we can define this arc by a starting point (x, y), radius, and starting and ending points on the perimeter of the circle.

Finally, we pass an optional parameter in the arc() method to indicate the path between the endpoints. The default value for this parameter is false, which is the equivalent to “clockwise”.

Syntax

context.arc(x,y,radius,startAngle,endEngle,counterclockwise);
ParameterDescription
xThe circle’s X coordinate.
ythe circle’s Y coordinate.
radiusThe radius of the circle.
startAngleThe starting angle in radians.
endAngleThe ending angle in radians.
counterClockwiseOptional parameter. Default is false.

Example

<canvas id="myCanvas" width="400" height="200">
    Your browser does not support the HTML5 canvas tag.
</canvas>

<script>
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
    context.beginPath();
    context.arc(200, 100, 50, 0, 2 * Math.PI);
    context.stroke();
</script>

We can use some of the other properties and methods to modify other properties of this shape. We can also adjust the parameters of the arc() method to make a semi-circle.

Also, you should note that the closePath() method is included so that the semi-circle becomes a closed shape.

<script>
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
    context.beginPath();
    context.arc(200, 150, 100, 1 * Math.PI, 2 * Math.PI);
    context.closePath();
    context.fillStyle = '#FFAA00';
    context.fill();
    context.lineWidth = 6;
    context.strokeStyle = '#7F7F7F';
    context.stroke();
</script>

Leave a Comment

Your email address will not be published.

Scroll to Top