HTML5 Canvas Cookbook

Drawing an arc

When drawing with the HTML5 canvas, it's sometimes necessary to draw perfect arcs. If you're interested in drawing happy rainbows, smiley faces, or diagrams, this recipe would be a good start for your endeavor.

How to do it...

Follow these steps to draw a simple arc:

1. Define a 2D canvas context and set the arc style:

   window.onload = function(){
       var canvas = document.getElementById("myCanvas");
       var context = canvas.getContext("2d");
       context.lineWidth = 15;
       context.strokeStyle = "black"; // line color

2. Draw the arc:

   context.arc(canvas.width / 2, canvas.height / 2 + 40, 80, 1.1 * Math.PI, 1.9 * Math.PI, false);
       context.stroke();
   };

3. Embed the ...