HTML and CSS Reference
In-Depth Information
Filling Objects with Colors and Gradients
In this chapter, we have quickly looked at color and fill styles as we proceeded through
the discussions of basic and complex shape construction. In this section, we will take
a deeper look at coloring and filling shapes we draw on the canvas. In addition to these
simple colors and fills, there are a number of different gradient styles that we can em-
ploy. Furthermore, Canvas also has a method to fill shapes with bitmap images (see
Chapter 4
).
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
All these color values will work with the
strokeStyle
as well as the
fillStyle
.
Of course, using a string for the color name is not the only available method of speci-
fying a solid color fill. The list below includes a few other methods:
