To create an arc with HTML5 Canvas, we can use the arc() method. Arcs are defined by a center point, a radius, a starting angle, an ending angle, and the drawing direction (either clockwise or anticlockwise).
HTML5 Canvas Arc Example
Code Editor
HTML5 Canvas Arc Explanation
Take a look at the diagram above. An arc is nothing more than a section of the circumference of an imaginary circle. This imaginary circle can be defined by x, y, and radius.
Next, we can define the arc itself with two points along the imaginary circle's circumference defined by startAngle and endAngle. These two angles are defined in radians and form imaginary lines that originate from the center of the circle and intersect the ends of the arc that we wish to create.
The final argument of the arc method is antiClockwise which defines the direction of the arc path between its two ending points. Unless otherwise specified, this argument is defaulted to false, which causes the arc to be drawn clockwise.
So let’s say I want to make an arc that looks like a slice of pizza (filled solid color) and it’s 108 degrees.
1. How do I translate 108 degrees into the funky 1.5 PI, 0 PI, etc. system?
2. How can I fill in the “slice” so that the border of the shape starts at the center point, draws a line to the starting angle, then arcs to the ending angle, and finally draws a line back to the center point (closing the fill)?
Never mind, I figured it out.
Here’s the code I used if anyone else is looking to do something similar:
Your browser does not support the canvas element.
var c=document.getElementById(“myCanvas”);
var centerX=128;
var centerY=128;
var ccw=false; // Set to “true” if counter-clockwise
startingAngle=Math.PI*1.5;
endingAngle=Math.PI*2.1;
var cxt=c.getContext(“2d”);
cxt.fillStyle=”red”;
cxt.strokeStyle=”black”;
cxt.lineWidth=.66;
cxt.arc(centerX,centerY,100,startingAngle,endingAngle,ccw);
cxt.lineTo(centerX,centerY);
cxt.closePath();
cxt.fill();
cxt.stroke();
Precisely!
I think it’s strange that 0 PI is on the right center…
Thanks for your picture…
@Lynn I think it’s a standard orientation for 0 PI to be on the right center, at least that’s the orientation I learned in school.
If I wanted to make that same arc, but instead of using a solid color use a picture that gets curved, do you think that would be possible with Canvas? I’ve been trying to figure out how to curve a rectangular picture and would love to do it in canvas if possible. Thanks!
@Mike hiya! Are you wanting to cut a circle out of an image, or are you wanting to squish a rectangular image into a circle, where the top and bottom of the image get squished in the most?
You should add “Internet Explorer 9″ compatibility
just add 1 line to your header
meta http-equiv=”X-UA-Compatible” content=”IE=9″
@Pablo heya, why would we need to do that? Canvas works great in IE9 without any special meta tags.
How can I write text along the circumference of an arc?
@Vilas Unfortunately, the HTML5 Canvas API does not provide a method for drawing text along a path. BUT, that shouldn’t stop us from having it! I’ll create a lab that shows how it can be done with a custom drawTextAlongArc() method and post the solution here. Stay tuned!
@Vilas here you go!
http://www.html5canvastutorials.com/labs/html5-canvas-text-along-arc-path/
Hello Eric, Useful resource!
I am pretty new to this stuff and trying to build upon. When I am trying to draw concentric circles, it draws a horizontal line at 0 PI position between the vertexes of two circles. Please suggest what am I doing wrong and a way out. Thank you!
@Swapnil heya. Don’t forget to wrap beginPath() and closePath around the arc method like this:
context.beginPath();
context.arc(…); // arc 1
context.closePath();
context.beginPath();
context.arc(…); // arc 2
context.closePath();
“The final argument of the arc method is antiClockwise”
Certainly looks official. It’s also a great way to confuse those who actually are using the tutorial to learn. Unfortunately it doesn’t work. However naming the variable “conterclockwise”, as you have it in the code example, works fine.
@maxw3st I’m not sure what you’re talking about… the arc() method requires a boolean clockwise or anticlockwise variable. This determines which direction the arc is drawn.
The official term is antiClockwise, which is the proper British (ie. International) term (rather than the “American English” spelling of counterclockwise). ;-{)]
What I don’t get is why the arc is drawn in a clockwise direction, as per the diagram above. Radian-based math is measured in an anticlockwise direction:
http://en.wikipedia.org/wiki/Radian
http://www.intmath.com/trigonometric-functions/1-angles.php
where 0.5Ï€ is at the top, not the bottom. So if they are going to use the traditional start point, why wouldn’t they follow the traditional direction too?
If they wanted to go clockwise (like CSS), they should have followed its lead and started at the top ie. padding(top, right, bottom, left) instead of a half-and-half mix. My two cents (which apparently are now disappearing…)