Menu
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

HTML Canvas Circles


The arc() Method

The arc() method is used to define a circle.

The arc() method has the following parameters:

Parameter Description
x Required. The x-coordinate of the arc's center
y Required. The y-coordinate of the arc's center
radius Required. The radius of the arc
startAngle Required. The angle where the arc starts in radians
endAngle Required. The angle where the arc ends in radians
counterclockwise Optional. A boolean value. If set to true, it draws the arc counter-clockwise between the start and end angles. The default is false (clockwise)

Draw a Full Circle

We can create a full circle with the arc() method by defining the startAngle as 0 and the endAngle as 2 * PI:

To draw a circle on the canvas, use the following methods:

  • beginPath() - Begin a path
  • arc() - Define a circle
  • stroke() - Draw it

Example

Your browser does not support the HTML5 canvas tag.
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();
</script>
Try it Yourself »


Draw a Full Circle with Colors

Add a fill-color and a stroke-color to the circle:

Example

Your browser does not support the HTML5 canvas tag.
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.fillStyle = "red";
ctx.fill();
ctx.lineWidth = 4;
ctx.strokeStyle = "blue";
ctx.stroke();
</script>
Try it Yourself »

Draw a Half Circle

Here we change the endAngle to PI (not 2 * PI):

Example

Your browser does not support the HTML5 canvas tag.
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

ctx.beginPath();
ctx.arc(95, 50, 40, 0, Math.PI);
ctx.fillStyle = "red";
ctx.fill();
ctx.stroke();
</script>
Try it Yourself »

More About the Angles of an Arc

The following image shows some of the angles in an arc:

Angles of an arc

Center: arc(100, 75, 50, 0 * Math.PI, 1.5 * Math.PI)

Start angle: arc(100, 75, 50, 0, 1.5 * Math.PI)

End angle: arc(100, 75, 50, 0 * Math.PI, 1.5 * Math.PI)

Example

Here we want to draw an arc from start-angle 0 to end-angle 0.5 * PI:

Your browser does not support the HTML5 canvas tag.
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

ctx.beginPath();
ctx.arc(95, 50, 40, 0, 0.5 * Math.PI);
ctx.stroke();
</script>
Try it Yourself »

Example

Here we do the same, but with the counterclockwise parameter set to true (it then draws the arc counter-clockwise between the start and end angle):

Your browser does not support the HTML5 canvas tag.
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

ctx.beginPath();
ctx.arc(95, 50, 40, 0, 0.5 * Math.PI, true);
ctx.stroke();
</script>
Try it Yourself »

×

Contact Sales

If you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail:
sales@w3schools.com

Report Error

If you want to report an error, or if you want to make a suggestion, send us an e-mail:
help@w3schools.com

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Copyright 1999-2024 by Refsnes Data. All Rights Reserved. W3Schools is Powered by W3.CSS.