HTML5 canvas colors

You will probably want to know the different ways you can define a color. There are a few ways that you can use, all of which are quite straightforward.

• Named colors
• Hex values
• RGB values
• RGBA values
• HSL values
• HSLA values
• Linear gradients
• Radial gradients
• RGraph gradient shorthand
• RGraph gradients JSON syntax
• More information

Named colors

The first, and easiest, is to use named colors. This gives you a range of color values that have been predefined for you. Eg:

obj.set({
    colors: ['red', 'blue']
});

Hex values (3, 4, 6 and 8 characters)

The next is straightforward hex values like you can use in normal css. These consist of a hash sign, followed by three or six hexadecimal characters. Eg:

obj.set({   
    colors: ['#f00', '#0000ff']
});

For some time now you've also been able to use four and eight character hex color values. The extra values represent the alpha value.

obj.set({   
    colors: [
        '#f00a',    // 4 character hex code representing semi-opaque red
        '#0000ff66' // 8 character hex code representing semi-opaque blue
    ]
});

RGB values

Also as used in css, RGB values are the same as what you can use in CSS. Eg:

obj.set({
    colors: ['rgb(255,0,0)', 'rgb(0,0,255)']
});

RGBA values

Probably new to most people, is rgba. Similar to regular rgb values, but with a fourth value that allows you to specify the alpha value, which stipulates how transparent the color is. An alpha value of 0 is totally transparent, and a value of 1, is totally opaque (ie. you can't see through it). With a value of 1, rgba acts exactly like rgb. This example gives you red and blue colors that are semi-transparent:

obj.set({
    colors: ['rgba(255,0,0,0.5)', 'rgba(0,0,255,0.5)']
});

HSL values

Also probably quite new to you, are hsl values. Much like rgb, but instead of red green and blue, it allows you to specify the Hue, Saturation and Light values instead. For example:

obj.set({
    colors: ['hsl(255, 100%, 50%)', 'hsl(169, 100%, 50%)']
});

HSLA values

Much like rgb and rgba, hsl has a corresponding hsla version, which allows you to specify an alpha (transparency) value. Eg:

obj.set({
    colors: ['hsla(255, 100%, 50%, 0.5)', 'hsla(169, 100%, 50%, 0.5)']
});

Linear gradients

Gradients can be used in place of color values. You can create a linear gradient like so:

var grad = obj.context.createLinearGradient(0,0,0,250);
grad.addColorStop(0, 'red');
grad.addColorStop(1, 'blue');

This creates a gradient that goes from red to blue. The gradient starts at 0,0, and finishes at 0,250. ie A vertical gradient. You may not see the whole gradient - that depends on the extent of the shape you're filling. You can use the gradient in place of a regular color definition. Eg:

obj.set({
    colors: [myGradient]
});

There is a shortcut function that is part of the RGraph api that can make creating gradients easier:

var grad = RGraph.linearGradient({object: obj, x1: x1, y1: y1, x2: x2, y2: y2, colors: [color1, color2]});

And you can of course use the gradient shorthand described below.

Radial gradients

Radial gradients are much like their linear counterparts, but circular, as the name suggests. Eg:

var grad = obj.context.createRadialGradient(0,0,0,0,0,100);
grad.addColorStop(0, 'red');
grad.addColorStop(1, 'blue');

Instead of four arguments, it takes six - the coordinates of the start point along with the radius, and the coordinates of the endpoint, along with the radius. After it has been created, you can treat as you would a linear gradient:

obj.set({
    colors: [myGradient]
});

There is a shortcut function that is part of the RGraph api that can make creating gradients easier:

var grad = RGraph.radialGradient({object: obj, x1: x1, y1: y1, r1: r1, x2: x2, y2: y2, r2: r2, colors: [color1, color2]});

And you can of course use the gradient shorthand described below.

RGraph gradient shorthand

The RGraph custom shorthand for gradients is new in October 2012 and makes using gradients much easier and less verbose. Instead of a color, you can specify this: Gradient(red:white). You can specify 2 or more colors and where it makes sense RGraph will use a radial gradient over a linear gradient. There's an example of it in the download archive.

<script>
    window.onload = (function ()
    {
        var rose = new RGraph.Rose({
            id: 'cvs',
            data: [8,8,9,6,8,7,7],
            options: {
                colors: ['Gradient(red:white)'],
                labelsAxes: 'n',
                margin: 3
            }
        }).draw()
    })
</script>

RGraph gradients JSON syntax

Since version 4.68 the gradient syntax for RGraph colors has been extended. Previously what you could do is this:

Gradient(red:white)

However, now you can also do this:

// A linear gradient
Gradient({colors:["red","white"],x1:0,y1:0,x2:600,y2:300})

Notice that the new syntax is valid json. There's an array of colors (this can contain more than two colors if desired) and the coordinates for the gradient - specifically the x1 an y1 coordinates are the start point of the gradient and the x2 and y2 coordinates are the end point of the gradient.

// A radial gradient
Gradient({colors:["red","white"],x1:50,y1:50,r1:0,x2:50,y2:50,r2:150})

A radial gradient can also be specified if you wish and here you add the size of the radii in the r1 and r2 properties.

This gradient syntax is slightly more complicated than the basic gradient syntax but it does afford you significantly more control over the resulting color. Here's an example of the new gradient syntax when used in a typical RGraph chart configuration:

<script>
    new RGraph.Bar({
        id:"cvs",
        data: [5,8,4,6,9,2,3],
        options: {
            colors: ['Gradient({colors: ["red","white"],x1:0,y1:25,x2:0,y2:210})']
        }
    }).draw();
</script>

More information

You can read more about css3 color definitions here.