HTML5 Guidelines for Web Developers

5.3 Colors and Shadows 113

5.3 Colors and Shadows

The attributes fillStyle and strokeStyle serve to specify colors for fills and
lines. The color specification follows the rules for CSS color values and can have
a number of different formats. Table 5.1 shows the available options, using the
color red as an example.

Table 5.1 Valid CSS color values for the color red

Method Color Value

Hexadecimal #FF0000

Hexadecimal (short) #F00

RGB rgb(255,0,0)

RGB (percent) rgb(100%,0%,0%)

RGBA rgba(255,0,0,1.0)

RGBA (percent) rgba(100%,0%,0%,1.0)

HSL hsl(0,100%,50%)

HSLA hsla(0,100%,50%,1.0)

SVG (named color) red

To specify the current fill and stroke color in Canvas, you just need to enter the
appropriate color values as a character string for fillStyle and strokeStyle. In
the bar chart example, we will choose the SVG named color silver as fill and a
semitransparent black outline in RGBA notation. We want all bars to look the
same, so we define the styles before the drawBars() function:

context.fillStyle = 'silver';
context.strokeStyle = 'rgba(0,0,0,0.5)';
var drawBars = function(bars) {
// code for drawing bars
};

Valid opacity values range from 0.0 (transparent) to 1.0 (opaque) and can be used
as a fourth component in RGB and HSL color space. The latter defines colors not
via their red, green, and blue components, but via a combination of hue, satura-
tion, and lightness.