Drawing arcs

There are three types of curves we can create in canvas—using the arc, quadratic curves, and Bezier curves. Let's get started.

Getting ready

If you recall in Chapter 1, Drawing Shapes in Canvas, in our first recipe we used the arc method to create perfect circles. The arc method is much more than just that. We can actually create any partial curve in a circular shape. If you don't recall drawing circles, I strongly encourage you to scan through Chapter 1, Drawing Shapes in Canvas again, and while you are there, you will find the template for creating the HTML documents as well. We are exclusively going to focus on the JavaScript code in this recipe.

How to do it...

Let's jump into it and create our first noncircle that has curves:

1. Access the pacman canvas element and fetch its width and height by using the following code snippet:

   var canvas = document.getElementById("pacman");
   var wid = canvas.width;
   var hei = canvas.height;

2. Create a radian variable (one degree in radians):

   var radian...