114 Chapter 5—Canvas
You can find more information on the topic CSS colors with HSL color palettes
and a list of all valid SVG color names in the CSS Color Module Level 3
specification at http://www.w3.org/TR/css3-color.If you look closely, you can see shadows behind the bars. These are created by
four additional drawing context attributes:context.shadowOffsetX = 2.0;
context.shadowOffsetY = 2.0;
context.shadowColor = "rgba(50%,50%,50%,0.75)";
context.shadowBlur = 2.0;The first two lines determine the shadow offset with shadowOffsetX and
shadowOffsetY, shadowColor assigns its color and opacity, and shadowBlur
causes the shadow to be blurred. As a general rule, the higher the value of
shadowBlur, the stronger the blur effect.
Before moving on to color gradients in the next section, we need to clarify how
the dotted border in the bar chart and the subsequent graphics is achieved. The
answer is very simple: with CSS. Every canvas element can of course also be for-
matted with CSS. You can specify spacing, position, and z-index just as easily as
background color and border. In our example, the following style attribute cre-
ates the dotted border:<canvas style="border: 1px dotted black;">5.4 Gradients
In addition to solid colors for fills and lines, Canvas offers two kinds of gradi-
ents: linear and radial gradients. The basic principle of creating gradients in
Canvas is easily demonstrated using the example of a simple gradient from red
to yellow and orange and then to purple (see Figure 5.4).