HTML5 Canvas, 2nd Edition

Setting Basic Fill Colors

The Canvas fillStyle property is used to set a basic color for filling shapes on the canvas. We saw this earlier in the chapter when we used simple color names for our fillStyle. An example is:

context.fillStyle = "red";

Below is a list of the usable color string values from the HTML4 specification. As of this writing, the HTML5 color specification has not been set. In the absence of any additional HTML5-specific colors, the HTML4 colors will work properly in HTML5:

Black = #000000

Green = #008000

Silver = #C0C0C0

Lime = #00FF00

Gray = #808080

Olive = #808000

White = #FFFFFF

Yellow = #FFFF00

Maroon = #800000

Navy = #000080

Red = #FF0000

Blue = #0000FF

Purple = #800080

Teal = #008080

Fuchsia = #FF00FF

Aqua = #00FFFF

Note

All these color values will work with the strokeStyle property as well as the fillStyle property.

Of course, using a string for the color name is not the only available method of specifying a solid color fill. The following list includes a few other methods:

Setting the fill color with the rgb() method

The rgb() method lets us use the 24-bit RGB value when specifying our fill colors:

context.fillStyle = "rgb(255,0,0)";

This will result in the same red color as the string value above.

Setting the fill color with a hex number string

We can also set the fillStyle color with a hex number in a string:

context.fillStyle = "#ff0000";

Setting the fill color with the rgba() method

The rgba() method allows us to specify a 32-bit color value with the final 8 bits representing the ...