Trigonometry for Animation - HTML5 Animation with JavaScript - page 73

}
return color;
}
};

These utility functions are provided only for convenience, because you already know how they work from
the previous sections. Perhaps you'll create a different function, or write the conversion explicitly in your
own code, but they're here if you need them.

Now that you know how colors work in JavaScript and the canvas element, let's start using them.

The Drawing API

An API, or application programming interface, generally refers to the methods and properties that you can
use in your program to access a collection of related functionality that is provided for you. In particular, the
canvas drawing API is the properties and methods that enable you to draw lines, curves, fills, and so on,
using JavaScript. This API has only a few methods, but they provide the foundation for all the animation
we create in this topic. Here are some of the commands we look at:

 strokeStyle

 fillStyle

 lineWidth

 save()

 restore()

 beginPath()

 closePath()

 stroke()

 lineTo(x, y)

 moveTo(x, y)

 quadraticCurveTo(cpx, cpy, x, y)

 bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)

 arcTo(x1, y1, x2, y2, radius)

 arc(x, y, radius, startAngle, endAngle [, anticlockwise])

 createLinearGradient(x0, y0, x1, y1)

 createRadialGradient(x0, y0, r0, x1, y1, r1)

 clearRect(x, y, width, height)

 fillRect(x, y, width, height)