Paint a gradient using the HTML <canvas> Tag

<canvas id="canvas" width="350" height="550">
<p>Fallback content for browsers that don't support the canvas tag.</p>  
</canvas>
<script>
var c = document.getElementById("canvas");
var ctx = c.getContext("2d");

// Create linear gradient
var lg = ctx.createLinearGradient(0,0,280,0);
lg.addColorStop(0,"DarkOrange");
lg.addColorStop(0.5,"Lime");
lg.addColorStop(1,"DeepPink");

// Create radial gradient
var rg = ctx.createRadialGradient(140,140,5,140,140,120);
rg.addColorStop(0,"LightYellow");
rg.addColorStop(1,"Gold");

// Create circle, fill with radial gradient
ctx.arc(150,140,120,0*Math.PI,2*Math.PI);
ctx.fillStyle = rg;
ctx.fill();

// Create text, fill with linear gradient
ctx.font = '60pt Serif';
ctx.fillStyle = lg;
ctx.fillText('Gradients', 0, 160);

// Create rectangle, fill with linear gradient
ctx.fillStyle = lg;
ctx.fillRect(40,260,220,30);
</script>

Fallback content for browsers that don't support the canvas tag.

The above example paints a radial and linear gradient using the HTML <canvas> element.

First we create the linear gradient using the createLinearGradient() method and save it to a variable named lg. Then we create the radial gradient using the createRadialGradient() method and save it to a variable named rg. When creating each gradient, we use the addColorStop() method to specify the colors that make up the gradient, as well as their position within the gradient.

Once the gradients have been created, we can then reference those gradients by referring to the variables that we created for each one. For example, to reference the linear gradient we use fillStyle = lg.

Linear Gradients

We create a linear gradient with the createLinearGradient() method. This method accepts 4 parameters like this createLinearGradient(x0,y0,x1,y1).

x0
The x-coordinate of the gradient's start point.
y0
The y-coordinate of the gradient's start point.
x1
The x-coordinate of the gradient's end point.
y1
The y-coordinate of the gradient's end point.

Radial Gradients

A radial gradient is made up of two circles. We can specify the size of each circle, as well as its location. The gradient runs between the first circle and the second one.

We create a radial gradient with the createRadialGradient() method. This method accepts 6 parameters like this createRadialGradient(x0,y0,r0,x1,y1,r1).

x0
The x-coordinate of the center of the gradient's first circle.
y0
The y-coordinate of the center of the gradient's first circle.
r0
The radius of the center of the gradient's first circle.
x1
The x-coordinate of the center of the gradient's second circle.
y1
The y-coordinate of the center of the gradient's second circle.
r1
The radius of the center of the gradient's second circle.

Color Stops

Each gradient is made up of color stops, which specify what colors will be part of the gradient, as well as where they will be positioned within the respective gradient.

Color stops are specified using the addColorStop() method. This takes two parameters like this addColorStop(stop, color):

stop
A value between 0.0 and 1.0 that represents the position within the gradient.
color
The color to use at the stop position.