Book Image

Canvas Cookbook

Book Image

Canvas Cookbook

Overview of this book

With the growing popularity of HTML5 Canvas, this book offers tailored recipes to help you develop portable applications, presentations, and games. The recipes are simple yet creative and build on each other. At every step, the book inspires the reader to develop his/her own recipe. From basic to advanced, every aspect of Canvas API has been covered to guide readers to develop their own application, presentation, or game.
Table of Contents (16 chapters)
Canvas Cookbook
About the Author
About the Reviewer

Drawing arc1

There are two different functions that allow drawing an arc. One of the functions is arcTo(xctrl,yctrl,xPos,yPos,radius).

You will see the second function in the next recipe. The arcTo() function accepts two coordinates and a radius. To use the arcTo() function work, it is necessary to first mark the position from where the arc is to be drawn. This is done by calling the moveTo() function, the same way as we do for drawing a line (refer to the lineTo() function).

The output of our arc recipe is as follows:

How to do it...

The recipe is as follows:

<title>Basic Arc</title>
  function init()
  can = document.getElementById("MyCanvasArea");
  ctx = can.getContext("2d");

    //function to draw curve by method 1
    function drawArcMethod1(xPos,yPos,xctrl,yctrl,xend,yend,radius,linecolor)
      ctx.strokeStyle = linecolor;
      ctx.lineWidth   = 8;

<body onload="init()">
<canvas ID="MyCanvasArea" width="300" height="300" style="border:2px solid black;">
  your browser doesn't support canvas

How it works...

In our recipe, the syntax to draw the arc is as follows:


On the canvas, the arc is drawn by following these steps:

  1. Move to a coordinate (xPos,yPos).

  2. Draw an imaginary line between (xPos,yPos) and the control point (xctrl,yctrl).

  3. Then draw an imaginary line between (xctrl,yctrl) and the end coordinate (xend,yend), thereby generating a cone shape.

  4. Draw an imaginary circle with the given radius between the two mentioned lines in such a way that the two lines are tangents to the circle at two different points.

  5. The arc is the path drawn between these two tangent points.

Here is a diagrammatic representation:

The arc as shown previously will appear for the following parameters:

xPos,yPos = (60,150)

If you increase the radius of the circle, the size will increase but it will lie within the angle formed by the two lines intersecting at the control point (xctrl,yctrl). So the circle will shift downwards, forming two tangent points, and the arc will bend. It will look as follows if the radius is increased to 25:

There's more...

Try the following in the recipe:

  • Change the color of the arc

  • Increase the radius

  • Draw multiple arcs