HTML5 canvas colors
- Introduction
- Color specifications
- RGraph gradient shorthand
- RGraph gradients JSON syntax
- More information
Introduction
You'll 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.
Color specifications
obj.set({
colors: ['red', 'blue']
});
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
]
});
obj.set({
colors: ['rgb(255,0,0)', 'rgb(0,0,255)']
});
obj.set({
colors: ['rgba(255,0,0,0.5)', 'rgba(0,0,255,0.5)']
});
obj.set({
colors: ['hsl(255, 100%, 50%)', 'hsl(169, 100%, 50%)']
});
obj.set({
colors: ['hsla(255, 100%, 50%, 0.5)', 'hsla(169, 100%, 50%, 0.5)']
});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 that you're filling. You can use the gradient in place of a regular color definition. For example:
obj.set({
colors: [myGradient]
});
There is a shortcut function that's 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 also use the gradient shorthand described below.
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 it just like a linear gradient:
obj.set({
colors: [myGradient]
});
There's a shortcut function that's 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 also 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.