HTML and CSS Reference
In-Depth Information
"rgb(R, G, B)"
—Functional notation format, with red-green-blue components as integers in
the range 0-255.
"rgba(R, G, B, A)"
—Functional notation format with alpha, is the same as the previous
string, but the alpha value is a decimal number in a range of 0-1. If a color requires transparency,
this is the format you must use.
Although the final color value is serialized as a string, you may want to manipulate individual color
components as numbers. So you must convert the JavaScript types using a few parsing and
concatenation techniques. After this is demonstrated, a pair of utility functions are introduced later in the
chapter that will make this process easier, and are used throughout the topic examples.
A color value can be any integer from 0 to 16,777,215 for what is called 24-bit color. That number is
significant because there are 256 × 256 × 256 possible color values. The canvas element uses RGB color,
which means that every color is described by its red, green, and blue components. Each of these
component values can be an integer from 0 to 255. So, there are 256 possible shades each of red, green,
and blue, resulting in the nearly 16.8 million colors.
This system is called 24-bit color because it takes eight bits—ones or zeros—to represent the number 256.
Eight bits times three (red, green, and blue) means it takes 24 bits to represent the 16.8 million possible
colors. Additionally, there is a 32-bit color system, which uses an extra value for transparency.
Now, because it's difficult to visualize what color 16,733,683 looks like, developers often use another
system of representing such numbers: hexadecimal. If you've used color values in HTML, this should be
familiar to you, but let's cover the basics anyway.
Using hexadecimal color values
Hexadecimal, or hex, is a base 16 system. In other words, each digit can be from 0 to 15, rather than 0 to
9 as in the usual base 10 (decimal) system. Since there are not any single digits to represent the numbers
10 to 15, we borrow the first six letters of the alphabet, A to F. So, each digit in a hex number can be from
0 to F. (In JavaScript, hex values are not case-sensitive, so you can use A through F or a through f.) To
signify that we are using a hex number with the HTML canvas element, we prefix the string with the
character
'#'
. In JavaScript, as with many other languages, we add a prefix 0x to the number. For
example, the number 0xA is equal to decimal number 10, 0xF is equal to 15, and 0x10 is equal to 16.
Respectively, the HTML hexadecimal string representations of these values would look like:
'#A'
,
'#F'
,
and
'#10'
.
In decimal, each digit is worth ten times the digit to its right; so, the number 243 means two times 100, four
times 10, and three times 1. In hex, each digit is worth 16 times its right-hand neighbor. For example,
0x2B3 means two times 256, B (or eleven) times 16, and three times 1.
For 24-bit colors, this goes all the way up to 0xFFFFFF, and, if you do the math, is equal to 16,777,215.
Furthermore, those six hex digits can be separated into three component pairs. The first pair represents
the red component, the second pair represents the green, and the last two digits represent blue. This is
often referenced as 0xRRGGBB. (You would never put R, G, or B into an actual hex number; this is merely
a symbolic way of telling you what color channel each digit controls.)
