Creation of Gradients in HTML Canvas

Canvas Gradient

The word gradient can be simply defined as the pattern of colors that change from one color to another.

Canvas gradients in HTML are the patterns of color that can be used to fill and stroke shapes, like rectangle, circle, triangle, text, lines and so on. On the canvas, shapes are not limited to solid colors.

The following are a few samples to understand what I want to say.

The Canvas Gradient interface represents an opaque object describing a gradient and it is returned by the following methods:

createLinearGradient(x1, y1, x2, y2)
createRadialGradient(x1, y1, r1, x2, y2, r2)

One additional method is also used for adding two or more color stops once we have a gradient object. The method is addColorStop(offset, color) which adds a color stop with the given color to the gradient at the given offset value. The gradient position can be anywhere between 0 & 1. For example, 0.0 is the offset at one end and 1.0 offset at the other end. If the offset value does not lie between 0 & 1, then INDEX_SIZE_ERR is raised and if the color is not parsed as CSS <color>, SYNTAX_ERR is raised.

Method: createLinearGradient(x1, y1, x2, y2)

Linear gradients are defined as the imaginary line that defines the direction of the gradient by which it changes color in a linear pattern. Once we have created the gradient, we can insert various colors using the addColorStop() property.

In other words, this method returns a CanvasGradient object that represents a linear gradient that changes color along the line given by the coordinates represented by the argument. A linear gradient can be created using the 2D context function createLinearGradient(). This function contains the four parameters x1, y1, x2 and y2 that determine the direction and extension of the gradient pattern. The gradient lies between the starting coordinates (x1, y1) and the ending coordinates (x2, y2).

There can be three types of gradients in a linear gradient.

Horizontal gradients can be created by only using or varying the parameter values on the x-axis, in other words (x1, x2).
Vertical gradients can be created by only using or varying the parameter values on the y-axis, in other words (y1, y2).
Diagonal gradients can be created using or by varying both of the parameter values on the x-axis, in other words (x1, x2), as well as on the y-axis, in other words (y1, y2).

A Gradient can be used as a fill or stroke style property to the gradient object for drawing various shapes, like a triangle, rectangle, circle and so on.

The following are examples based on a linear gradient.

Example

<html>
<body>
<canvas id="CanvasGradient" width="250" height="150" style="border:3px solid red;"></canvas>
<script>
var canvas = document.getElementById('CanvasGradient');
var context = canvas.getContext('2d');
context.rect(20, 20, 200, 100);
// add linear gradient
var lgrd = context.createLinearGradient(0, 0, 200, 0);
lgrd.addColorStop(1, 'blue');
lgrd.addColorStop(0, 'orange');
context.fillStyle = lgrd;
context.fill();
</script>
</body>
</html>

Another example of linear-gradient includes both the fill and stroke styles.

Example

<html>
<head>
<script>
function drawShape(){
// get the canvas element using the DOM
var canvas = document.getElementById('canvasGradient');
// Make sure we don't execute when canvas isn't supported
if (canvas.getContext){
// use getContext to use the canvas for drawing
var ctx = canvas.getContext('2d');
// Create Linear Gradients
var lgrad1 = ctx.createLinearGradient(0,0,0,200);
lgrad1.addColorStop(0, 'red');
lgrad1.addColorStop(0.5, 'lightgreen');
lgrad1.addColorStop(0.5, 'green');
lgrad1.addColorStop(1, 'lightgreen');
var lgrad2 = ctx.createLinearGradient(0,50,0,100);
lgrad2.addColorStop(0, 'black');
lgrad2.addColorStop(0.5, 'red');
lgrad2.addColorStop(1, 'black');
// assign gradients to fill and stroke styles
ctx.fillStyle = lgrad1;
ctx.strokeStyle = lgrad2;
// draw shapes
ctx.fillRect(10,10,150,150);
ctx.strokeRect(100,50,100,50);
} else {
alert('Your browser does not support');
}
}
</script>
</head>
<body onload="drawShape();">
<canvas id="canvasGradient" style="border:3px solid black;"></canvas>
</body>
</html>

Output

Extent of gradient

Understanding exactly what a gradient extent is, is considered to be important for all designers. Assume a gradient lies between or extends from x1 = 20 to x2 = 150, then only the graphics drawn with the x-values between 20 and 150 will have a gradient color applied to them. The graphics drawn outside the area are still affected by the gradient but will be drawn using either the first or the last color of the gradient.

Here's an example explaining the concept.

Example

<html>
<body>
<canvas id="CanvasGradient" width="500" height="300"></canvas>
<script>
var canvas = document.getElementById('CanvasGradient');
var context = canvas.getContext('2d');
// add linear gradient
var lgrd = context.createLinearGradient(200, 0, 300, 0);
lgrd.addColorStop(0, 'rgb(0, 0, 255)');
lgrd.addColorStop(0.5, 'rgb(255, 0, 0)');
lgrd.addColorStop(1, 'rgb(0, 255, 0)');
context.fillStyle = lgrd;
context.fillRect(20, 20, 80, 100);
context.fillRect(50, 20, 150, 100);
context.fillRect(180, 20, 250, 100);
context.fillRect(230, 20, 300, 100);
context.fillRect(260, 20, 340, 100);
</script>
</body>
</html>

In the preceding example, the gradient extends from x1 = 200 and x2 = 300. The gradient color is set to grade from Blue to Red to Green. All the graphics with an x value less than 200 will be drawn with either only Blue or a combination of Blue and Red because the provided colors are three and it all depends on the values of x. All the graphics with an x value larger than 300 will be drawn either as only Green or a combination of Green and Red and it all depends on the values of x. Only graphics drawn with x values between 200 & 300 will have a gradient color, in other words, a combination of all three colors.

Method: createRadialGradient(x1, y1, r1, x2, y2, r2)

The radial gradient can be initialized with the two specified circles, the starting circle and an ending circle in which the gradient proceeds with the starting circle and move towards an ending circle.

In other words, it can be defined as a color pattern that extends in a circular way, in other words from an inner color outwards to one or more other colors. It can be done using two circles, each having a center point and a radius. Once we created the circles, we can use the addStopColor() method to define new stops on the gradient with a specified offset value and various colors.

The parameters x1 & y1 are the coordinates of one circle, whereas x2 & y2 are the coordinates of another circle and r1 & r2 are the radii of the two circles that are the three arguments. This helps in representing the object in a radial gradient.

The following are examples of radial gradients.

Example

<html>
<head>
</head>
<body>
<canvas id="CanvasGradient" width="220" height="220" style="border:3px solid red;"></canvas>
<script>
var canvas = document.getElementById('CanvasGradient');
var context = canvas.getContext('2d');
context.rect(10, 10, 200, 200);
// create radial gradient
var rgrd = context.createRadialGradient(100, 100, 100, 100, 100, 0);
rgrd.addColorStop(1, 'red');
rgrd.addColorStop(0, 'yellow');
context.fillStyle = rgrd;
context.fill();
</script>
</body>
</html>

Another example of a radial gradient.

Example

<html>
<head>
</head>
<body>
<canvas id="CanvasGradient" width="500" height="200" style="border:3px solid red;"></canvas>
<script>
var canvas = document.getElementById('CanvasGradient');
var context = canvas.getContext('2d');
// create radial gradient
var rgrd1 = context.createRadialGradient(100, 100, 80, 100, 100, 0);
rgrd1.addColorStop(1, 'white');
rgrd1.addColorStop(0, 'black');
var rgrd2 = context.createRadialGradient(120, 110, 40, 200, 180, 150);
rgrd2.addColorStop(0, 'red');
rgrd2.addColorStop(1, 'blue');
var rgrd3 = context.createRadialGradient(50, 50, 80, 100, 100, 0);
rgrd3.addColorStop(0, 'lightgreen');
rgrd3.addColorStop(0.5, 'green');
rgrd3.addColorStop(1, 'lightblue');
context.fillStyle = rgrd1;
context.fillRect(0, 0, 500, 200);
context.fillStyle = rgrd2;
context.fillRect(0, 0, 320, 200);
context.fillStyle = rgrd3;
context.fillRect(0, 0, 150, 200);
context.fill();
</script>
</body>
</html>

I hope you will like the effort and for any mistake feel free to let me know.

Thank you.

Keep learning and sharing.