HTML and CSS Reference
In-Depth Information
Chapter 4
Trigonometry for Animation
What we'll cover in this chapter:
Colors on the canvas
The drawing API
Loading images
Pixel manipulation
So far, the graphics drawn in the topic example programs have used a few simple commands, and the
“canvas drawing API” has been alluded to a number of times. But for the most part, the code has been
provided without much explanation.
In this chapter, we look at creating visual content using the canvas element. Specifically, you'll see how to
work with color using JavaScript, and take a brief tour of the canvas drawing API.
Colors on the canvas
Colors applied to the canvas element are specified using CSS-style strings, which can be formatted in a
few ways:
"#RRGGBB"
—Hexadecimal format, with red-green-blue components in the range 0-9, a-f.
"#RGB"
—Hexadecimal format using short notation, is converted into the six-digit form by copying
the component values, not by adding 0. E.g.,
"#fb0"
becomes
"#ffbb00"
.
