Draw a circle with HTML5 Canvas

Draw Circle HTML5 Canvas

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.

Demo

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:

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.

Demo

You may also like

Leave a Reply

Your email address will not be published. Required fields are marked *