HTML5 Recipes: Circles and Arcs

In this recipe, we shall take a look at how to draw arcs and circles. The Canvas API provides us with the useful method() function that we can use to do that.

The method signature is as follows: arc(x,y,radius,startAngle, endAngle,bAntiClockwise), where:

  • x,y are the center co-ordinates of the arc
  • startAngle and endAngle are specified in radians. For e.g. if you wish to draw a semi-circle, you can start with the startAngle at 0 degrees and the endAngle at 180 degrees. Remember that the angle values are specified in radians and not degrees. So you will have to use a handy formula : (Math.PI/180) * AngleInDegrees to convert to a radian value.
  • The final parameter is a boolean parameter than is true if you want to start drawing the arc anti-clockwise and false if you want to draw it clockwise.

Let us look at the code below that draws a circle:

	<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Canvas Recipes</title>
<script>
function draw_circle() {

 var canvasObj = document.getElementById("mycanvas");
 var canvasCtx = canvasObj.getContext("2d");
 canvasCtx.beginPath();
 canvasCtx.arc(100,100,50,0,Math.PI*2,true);
 canvasCtx.stroke();
}

function clear_canvas() {
	var canvasObj = document.getElementById("mycanvas");
	//May not work in some browsers: Change the value and set it back to original
	//canvasObj.width = 10;
	//canvasObj.width = 200;
	var canvasCtx = canvasObj.getContext("2d");
	canvasCtx.clearRect(0,0,200,200);
}
</script>
</head>
<body>
    <div id="instructions">
     <a href="#" onclick="draw_circle();return false">Click to draw a circle</a>
     <a href="#" onclick="clear_canvas();return false">Click to clear</a>

    </div>
 <div id="drawingsurface">
  <canvas id="mycanvas" width="200" height="200"/>
 </div>
</body>
</html>

Let us go through the code

  • We have defined a canvas with a width and height of 200. The main function to look at is draw_circle()
  • We get the handle to the 2D canvas context and start our drawing with a call to the beginPath() method.
  • To draw a circle, we use the arc() method. We specify the center point(X,Y), its radius, the startAngle(0) and the endAngle(360). The last parameter can be either true or false since we want a circle anyways. Notice that the value provided for the end Angle is in radians.
  • The arc method only marks the path or the shape that we want to draw. It has not drawn anything yet. Recollect from earlier recipes that we can optionally chose to complete the path by calling the closePath() method, but since we have completed the arc fully i.e. a circle, we do not need that. So we can ask the canvas to render it on the drawing surface via a call to the stroke() method. The stroke() method will use the default stroke color, though you could have specified the width and the color of it, via the strokeStyle and lineWidth attributes. Note that you could also have called fill() instead of stroke. We shall look at that in the next example.

See it in action here.

We shall now utilize our skills with arcs, to draw a more complex figure but you will find that it is just a series of blocks to create the overall picture that we want. We will create a simple face via a series of arc functions. Take a look at the code below and pay special attention to each part of the face as it is drawn. We start with the head, then the two eyes, then a nose and finally a mouth. Except for the mouth, that is an arc (from 0 to 180 degrees), the rest are drawn as circles.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Canvas Recipes</title>
<script>
function draw_face() {

 var canvasObj = document.getElementById("mycanvas");
 var canvasCtx = canvasObj.getContext("2d");

 //Head
 canvasCtx.beginPath();
 canvasCtx.arc(100,100,50,0,Math.PI*2,true);
 //canvasCtx.closePath();
 canvasCtx.fillStyle = "rgb(255,0,255)";
 canvasCtx.fill();

 //Reset the Fill Style
 canvasCtx.fillStyle = "rgb(0,0,0)";

 //Left Eye
 canvasCtx.beginPath();
 canvasCtx.arc(75,75,5,0,Math.PI*2,true);
 canvasCtx.fill();

 //Right Eye
 canvasCtx.beginPath();
 canvasCtx.arc(125,75,5,0,Math.PI*2,true);
 canvasCtx.fill();

 //Nose
 canvasCtx.beginPath();
 canvasCtx.arc(100,100,10,0,Math.PI*2,true);
 canvasCtx.fill();

 //Mouth
 canvasCtx.beginPath();
 canvasCtx.arc(100,120,20,0,Math.PI,false);
 canvasCtx.fill();
}

function clear_canvas() {
	var canvasObj = document.getElementById("mycanvas");
	//May not work in some browsers: Change the value and set it back to original
	//canvasObj.width = 10;
	//canvasObj.width = 200;
	var canvasCtx = canvasObj.getContext("2d");
	canvasCtx.clearRect(0,0,200,200);
}
</script>
</head>
<body>
<div id="instructions"><a href="#"
	onclick="draw_face();return false">Click to draw a face</a> <a
	href="#" onclick="clear_canvas();return false">Click to clear</a></div>
<div id="drawingsurface"><canvas id="mycanvas" width="200"
	height="200" /></div>
</body>
</html>

See it in action here.


HTML5 Canvas Recipes

  1. Getting Started with Canvas
  2. Rectangles
  3. Strokes and Fills
  4. Drawing Text
  5. Paths
  6. Circles and Arcs
  7. Images
  8. Graphs With Canvas

Back to HTML5 Series

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s