HTML5 Canvas: Gradients
Jakob Jenkov |
HTML5 Canvas gradients are patterns of color that can be used to as the fill or stroke of shapes, instead of solid colors. A gradient is a pattern of colors that changes gradiently from one color to another. Here are a few examples to show what I mean:
There are two types of gradients:
- Linear
- Radial
A linear gradient changes color with a linear pattern, either horizontally, vertically, or diagonally.
A radial gradient change color with a circular pattern, changing color from the inside and out.
Both types of gradients are covered in this text.
Linear Gradients
As mentioned earlier, a linear gradient changes color using a linear pattern. A linear gradient is created
using the 2D Context function createLinearGradient(). Here is an example:
var canvas = document.getElementById("ex1");
var context = canvas.getContext("2d");
var x1 = 0;
var y1 = 0;
var x2 = 100;
var y2 = 0;
var linearGradient1 = context.createLinearGradient(x1, y1, x2, y2);
The createLinearGradient() function takes 4 parameters: x1, y1, x2, y2.
These 4 parameters determine the direction and extension of the gradient pattern.
The gradient extends from the first point x1, y1 to the second point x2, y2.
A horizontal gradient is created by only varying the parameter values on the x-axis (for x1 and x2), like this:
var x1 = 0;
var y1 = 0;
var x2 = 100;
var y2 = 0;
var linearGradient1 = context.createLinearGradient(x1, y1, x2, y2);
A vertical gradient is created by only varying the parameter values on the y-axis (for y1 and y2), like this:
var x1 = 0;
var y1 = 0;
var x2 = 0;
var y2 = 100;
var linearGradient1 = context.createLinearGradient(x1, y1, x2, y2);
A diagonal gradient is created by varying both the x- and y-axis parameters. Here is an example:
var x1 = 0;
var y1 = 0;
var x2 = 100;
var y2 = 100;
var linearGradient1 = context.createLinearGradient(x1, y1, x2, y2);
Color Stops
The examples above did not show what color the gradient was given. In order to set the colors of a
gradient you use the addColorStop() function on the gradient object. Here is an example:
var linearGradient1 = context.createLinearGradient(0,0,100,0); linearGradient1.addColorStop(0, 'rgb(255, 0, 0)'); linearGradient1.addColorStop(1, 'rgb( 0, 0, 0)');
The addColorStop() function takes 2 parameters. The first parameter is a number between 0 and 1.
This number tells how far into the gradient area this color stop is to be placed. The second parameter
is the color itself. Notice how this example uses the rbg(red, green, blue) notation for colors,
where each red / green / blue value can be a number between 0 and 255 (represented by 1 byte).
The above example adds two color stops. The first is the color red which is set to start right from the beginning of the gradient (first parameter value is 0). The second color is black which is set to be located at the end of the gradient area (first parameter is 1).
You can add more than 2 color stops to a gradient. Here is an example that has 3 color stops:
var linearGradient1 = context.createLinearGradient(0,0,100,0); linearGradient1.addColorStop(0 , 'rgb(255, 0, 0)'); linearGradient1.addColorStop(0.5, 'rgb( 0, 0, 255); linearGradient1.addColorStop(1 , 'rgb( 0, 0, 0)');
This examples adds the color blue which is located in the middle of the gradient. The gradient will thus change smoothly from red, to blue, and then to black.
Using the Gradient as Fill or Stroke Style
You can use the gradient as either fill or stroke style. This is done by simply setting the
2D Context fillStyle or strokeStyle property to point to the gradient object.
Here is an example:
var linearGradient1 = context.createLinearGradient(0,0,100,0); linearGradient1.addColorStop(0 , 'rgb(255, 0, 0)'); linearGradient1.addColorStop(0.5, 'rgb( 0, 0, 255); linearGradient1.addColorStop(1 , 'rgb( 0, 0, 0)'); context.fillStyle = linearGradient1; context.strokeStyle = linearGradient1;
Now you can draw using the gradient as either fill or stroke color. Here is an example that draws two rectangles - one filled and another stroked (outlined):
var canvas = document.getElementById("ex2");
var context = canvas.getContext("2d");
var linearGradient1 = context.createLinearGradient(0,0,100,0);
linearGradient1.addColorStop(0 , 'rgb(255, 0, 0)');
linearGradient1.addColorStop(0.5, 'rgb( 0, 0, 255)');
linearGradient1.addColorStop(1 , 'rgb( 0, 0, 0)');
context.fillStyle = linearGradient1;
context.fillRect(10,10,100, 100);
var linearGradient2 = context.createLinearGradient(125,0, 225,0);
linearGradient2.addColorStop(0 , 'rgb(255, 0, 0)');
linearGradient2.addColorStop(0.5, 'rgb( 0, 0, 255)');
linearGradient2.addColorStop(1 , 'rgb( 0, 0, 0)');
context.strokeStyle = linearGradient2;
context.strokeRect(125, 10, 100, 100);
And here is what the result looks like when drawn on a canvas:
Gradient Extent
It is important to understand the extent of a gradient. If a gradient extends from x=10 to x=110, then only graphics drawn with x-values between 10 and 110 will have a gradient color applied to them. Graphics drawn outside this area are still affected by the gradient, but will be drawn using either the first or last color of the gradient.
For instance, imagine a gradient that extends from x = 150 to x = 350. The gradient will grade from blue to green. All graphics drawn with an x value less than 150 will be drawn with the color blue. All graphics drawn with an x value larger than 350 will be drawn with the color green. Only graphics drawn with the x values between 150 and 350 will have a gradient color.
Here is a code example that draws 5 rectangles using the the gradient mentioned above, to illustrate the point:
var linearGradient1 = context.createLinearGradient(150, 0, 350,0); linearGradient1.addColorStop(0, 'rgb(0, 0, 255)'); linearGradient1.addColorStop(1, 'rgb(0, 255, 0)'); context.fillStyle = linearGradient1; context.fillRect(10,10,130, 100); context.fillRect(150,10, 200, 100); context.fillRect(360,10, 130, 100); context.fillRect(100,120, 150, 100); context.fillRect(280,120, 150, 100);
And here is what the result is when drawn on a canvas. Notice how only graphics with x values between 150 and 350 have a gradient color, while the rest is either fully blue (first color stop) or fully green (last color stop).
This example only used 2 colors in the gradient but the effect is the same if you use 3 or more colors in the gradient. Outside the gradient area only the first and last stop colors are used.
Gradient extent is important to understand in order to color your shapes correctly. In many cases you may have to define a gradient specifically for each shape, to fit the area the shape is drawn in.
Radial Gradients
The radial gradient type is a color pattern that extends circularly, from an inner color outwards to one or more other colors. Here are a few graphical examples:
A radial gradient is defined by 2 circles. Each circle has a center point and a radius. Here is a code example:
var x1 = 100; // x of 1. circle center point
var y1 = 100; // y of 1. circle center point
var r1 = 30; // radius of 1. circle
var x2 = 100; // x of 2. circle center point
var y2 = 100; // y of 2. circle center point
var r2 = 100; // radius of 2. circle
var radialGradient1 =
context.createRadialGradient(x1, y1, r1, x2, y2, r2);
radialGradient1.addColorStop(0, 'rgb(0, 0, 255)');
radialGradient1.addColorStop(1, 'rgb(0, 255, 0)');
context.fillStyle = radialGradient1;
context.fillRect(10,10, 200, 200);
As you can see, there are two center points defined (x1, y1 and x2, y2), and two radii defined (r1 and r2).
These are passed as parameters to the createRadialGradient() function of the 2D Context.
The two circles should be defined with different radius, so they result in an inner circle and an outer circle (at least in size). The colors in the gradient will then extend circularly from one circle to the other.
The color stops works just like they do with a linear gradient. They define what colors are to be used in the gradient, and where in the gradient extent they should be located.
The color stops added will match somewhere between the two circles. For instance, a 0 as first parameter in the color stop means that the color will start where the first circle starts. A 1 as first parameter in the color stop means that the color will start where the second circle starts.
Here is the result of the code example, when drawn on an HTML5 canvas:
If the two circles have the same center point, the gradient will be fully circular with the colors grading from the inner circle to the outer circle. If the two circles have different center points the gradient will be more cone like, like the light cast from a lamp which is directed non-orthogonally to a surface. Here is a cone like code example:
var x1 = 100; var y1 = 100; var r1 = 30; var x2 = 150; var y2 = 125; var r2 = 100; var radialGradient1 = context.createRadialGradient(x1, y1, r1, x2, y2, r2); radialGradient1.addColorStop(0, 'rgb(0, 0, 255)'); radialGradient1.addColorStop(1, 'rgb(0, 255, 0)'); context.fillStyle = radialGradient1; context.fillRect(10,10, 200, 200);
And here is what the gradient looks like when drawn on a canvas:
| Tweet | |
Jakob Jenkov | |
