How to use CSS3 gradients

A guide for using CSS3 gradients as backgrounds to your canvas tag.

Linear gradients
Radial gradients
Repeating linear gradients
Repeating radial gradients
An example effective use case

CSS3 gradients can be used to provide a graduated background to your chart. Since things drawn on the canvas are not subject to CSS rules you must use the gradients provided to you by the canvas API or the shortcuts (eg Gradient(red:white)) provided by RGraph to give your charts (eg the bars in a bar chart) gradients.

But if what you want is to give your chart a background color, like the chart here, CSS3 gradients can be used.

Linear gradients

The gradients are specified using the background-image CSS property and the linear-gradient() function is given like this:

<canvas id="cvs2" width="600" height="250" style="background-image: linear-gradient(red, white)">
    [No canvas support]
</canvas>

As you can see the gradient starts at the top of the canvas and graduates towards the bottom. The angle of the gradient can be changed by specifying an angle in the linear-gradient() function:

<canvas id="cvs3" width="600" height="250" style="background-image: linear-gradient(0deg, red, white)">
    [No canvas support]
</canvas>

But when you specify an angle the direction reverses and the gradient starts at the bottom, for 0deg at least. If you wanted to mimic the previous behaviour you would need to use an angle of 180deg.

<canvas id="cvs4" width="600" height="250" style="background-image: linear-gradient(90deg, red, white)">
    [No canvas support]
</canvas>

Here an angle of 90deg is used to achieve a horizontal gradient - from the left-hand-side to the right.

<canvas id="cvs5" width="600" height="250" style="background-image: linear-gradient(45deg, red, white)">
    [No canvas support]
</canvas>

And here the gradient starts in the top-right corner and graduates towards the bottom-left - using an angle of 45deg.

<canvas id="cvs6" width="600" height="250" style="background-image: linear-gradient(45deg, red, white 75%)">
    [No canvas support]
</canvas>

This shows you that instead of the colors that you give being spread equally across the whole canvas you can specify color-stops - so, for example, the gradient is centered around the 75% point of the length that is graduated (for example, the width or height etc). By using multiple colors (eg four or more) you can get a striping effect that doesn't have any graduated regions and the colors just change immediately from one to the other. For example:

<canvas id="cvs7" width="600" height="250" style="background-image: linear-gradient(45deg, red 25%, white 25%, white 50%, yellow 50%, yellow 75%, green 75%)">
    [No canvas support]
</canvas>

As mentioned above, here the gradient here is not graduated but instead, the color changes happen immediately. Multiple color stops are used in the gradient specification:

red 25% - the red color begins at 0% and stops at the 25% point. The whole gradient starts at 0% so it doesn't need to be stipulated.
white 25%, white 50% - the white color starts at the 25% point and continues to the 50% point.
yellow 50%, yellow 75% - the yellow color starts at the 50% point and continues to the 75% point.
green 75% - the green color begins at 75% and stops at the 100% point. The whole gradient ends at 100% so it doesn't need to be stipulated.

Radial gradients

Radial gradients aren't more difficult - but there is more to them so there's a bit more remember in terms of syntax. They can be quite simple though as this first example shows:

<canvas id="cvs8" width="600" height="250" style="background-image: radial-gradient(red, white 75%)">
    [No canvas support]
</canvas>

The gradient, because the canvas is wider than it is high, is elliptical initially. So to contain the gradient within the boundaries of the canvas a little more than the default does it's been changed so that the white color is at 75%.

<canvas id="cvs9" width="600" height="250" style="background-image: radial-gradient(circle closest-side, red, white)">
    [No canvas support]
</canvas>

Here we specify the circle closest-side modifier so that instead of an elliptical gradient it's circular and it uses the nearest side of the rectangle as the endpoint of the gradient. This way the gradient is shown as a circle - not an ellipse and the extra width is just ignored.

<canvas id="cvs10" width="600" height="250" style="background-image: radial-gradient(circle at top right, red, white)">
    [No canvas support]
</canvas>

The radial gradient isn't forced to start in the center. Here we have specified the circle at top right modifier as part of the gradient specification which means that the gradient will start at the top right of the canvas. Instead of the keywords top right you can also use pixels like this:

<canvas id="cvs10" width="600" height="250" style="background-image: radial-gradient(circle at 150px 150px, red, white)">
    [No canvas support]
</canvas>

You can mix and match pixel values with the top and right keywords but for clarity, I would advise against this. You can also use percentage values as well as pixels.

<canvas id="cvs11" width="600" height="250" style="background-image: radial-gradient(circle at top right, red, white)">
    [No canvas support]
</canvas>

The radial gradient isn't forced to start in the center. Here we have specified the circle at top right modifier as part of the gradient specification which means that the gradient will start, unsurprisingly, at the top right of the canvas. Instead of the keywords top right you can also use pixels like this:

Repeating linear gradients

<canvas id="cvs12" width="600" height="250" style="background-image: repeating-linear-gradient(90deg, red, white 50px)">
    [No canvas support]
</canvas>

If you want to specify a gradient that repeats itself to the end of whatever you're using the gradient on you can use the repeating-linear-gradient() function or the repeating-radial-gradient() function (below) With this function you give the colors and then also you give a width/height that the gradient ends at. It will then repeat itself until the end of the container.

Repeating radial gradients

<canvas id="cvs13" width="600" height="250" style="background-image: repeating-radial-gradient(circle at top left, red, white 50px)">
    [No canvas support]
</canvas>

Here's a nice effect that is achieved by using the repeating-radial-gradient() function in place of the radial-gradient() function. After setting the point at which the gradient ends (in this case 50px) the gradient is then repeated to cover the rest of the required space.

An example effective use case

As can be seen below, by replacing the background image from this demo file: bar-background-image.html a gradient could be used to good effect by replacing the background image with a CSS gradient on the canvas tag. By not having to draw the image there will be a very slight performance gain - though if you notice any difference I would be surprised.

<canvas id="cvs_example" width="500" height="200" style="background-image: radial-gradient(circle at 150px 50px, yellow 50px, #33f 100px)">
    [No canvas support]
</canvas>