Using Gradients

We can set the fill and stroke styles using gradients. The canvas element supports two kinds of gradients: linear and radial.

Name	Description	Returns
createLinearGradient(x0, y0, x1, y1)	Creates a linear gradient	CanvasGradient
createRadialGradient(x0, y0, r0, x1, y1, r1)	Creates a radial gradient	CanvasGradient

CanvasGradient object defines the method shown in the following table:

Name	Description	Returns
addColorStop(<position>, <color>)	Adds a solid color to the gradient line	void

Using a Linear Gradient

 
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style>
canvas {
      border: thin solid black;
      margin: 4px
}
</style>
</head>
<body>
      <canvas id="canvas" width="500" height="500"> 
      Your browser doesn't support the <code>canvas</code> element 
      </canvas>
      <script>
            var ctx = document.getElementById("canvas").getContext("2d");
            var grad = ctx.createLinearGradient(0, 0, 500, 140);
            grad.addColorStop(0.2, "red");
            grad.addColorStop(0.5, "white");
            grad.addColorStop(1, "black");
            ctx.fillStyle = grad;
            ctx.fillRect(0, 20, 500, 140);
      </script>
</body>
</html>

Click to view this demo.

Using a Linear Gradient with a Smaller Shape

 
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style>
canvas {
      border: thin solid black;
      margin: 4px
}
</style>
</head>
<body>
      <canvas id="canvas" width="500" height="140"> 
      Your browser doesn't support the <code>canvas</code> element 
      </canvas>
      <script>
            var ctx = document.getElementById("canvas").getContext("2d");
            var grad = ctx.createLinearGradient(0, 0, 500, 140);
            grad.addColorStop(0, "red");
            grad.addColorStop(0.5, "white");
            grad.addColorStop(1, "black");
            ctx.fillStyle = grad;
            ctx.fillRect(10, 30, 50, 50);
      </script>
</body>
</html>

Click to view this demo.

Making the gradient line match a desired shape:

 
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style>
canvas {
      border: thin solid black;
      margin: 4px
}
</style>
</head>
<body>
      <canvas id="canvas" width="500" height="140"> 
      Your browser doesn't support the <code>canvas</code> element 
      </canvas>
      <script>
            var ctx = document.getElementById("canvas").getContext("2d");
            var grad = ctx.createLinearGradient(10, 10, 60, 60);
            grad.addColorStop(0, "red");
            grad.addColorStop(0.5, "white");
            grad.addColorStop(1, "black");
            ctx.fillStyle = grad;
            ctx.fillRect(0, 20, 500, 140);
      </script>
</body>
</html>

Click to view this demo.

Matching the shape to the gradient

 
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style>
canvas {
      border: thin solid black;
      margin: 4px
}
</style>
</head>
<body>
      <canvas id="canvas" width="500" height="140"> 
      Your browser doesn't support the <code>canvas</code> element 
      </canvas>
      <script>
            var ctx = document.getElementById("canvas").getContext("2d");
            var grad = ctx.createLinearGradient(10, 10, 60, 60);
            grad.addColorStop(0.2, "red");
            grad.addColorStop(0.5, "white");
            grad.addColorStop(1, "black");
            ctx.fillStyle = grad;
            ctx.fillRect(10, 30, 100, 50);
      </script>
</body>
</html>

Click to view this demo.

Using a Radial Gradient

We define radial gradients using two circles. The start of the gradient is defined by the first circle, the end of the gradient by the second circle.

 
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style>
canvas {
      border: thin solid black;
      margin: 4px
}
</style>
</head>
<body>
      <canvas id="canvas" width="500" height="140"> 
      Your browser doesn't support the <code>canvas</code> element 
      </canvas>
      <script>
            var ctx = document.getElementById("canvas").getContext("2d");
            var grad = ctx.createRadialGradient(250, 70, 20, 200, 60, 100);
            grad.addColorStop(0.2, "red");
            grad.addColorStop(0.5, "white");
            grad.addColorStop(1, "black");
            ctx.fillStyle = grad;
            ctx.fillRect(20, 20, 500, 140);
      </script>
</body>
</html>

Click to view this demo.

The six arguments to the createRadialGradient method represent:

The first and second arguments are coordinate for the center of the start circle.
The third argument is radius of the start circle
The fourth and fifth arguments is coordinate for the center of the finish circle
The sixth argument is radius of the finish circle

Using smaller shapes with a radial gradient

 
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style>
canvas {
      border: thin solid black;
      margin: 4px
}
</style>
</head>
<body>
      <canvas id="canvas" width="500" height="140"> 
      Your browser doesn't support the <code>canvas</code> element 
      </canvas>
      <script>
            var ctx = document.getElementById("canvas").getContext("2d");
            var grad = ctx.createRadialGradient(250, 70, 20, 200, 60, 100);
            grad.addColorStop(0.2, "red");
            grad.addColorStop(0.5, "white");
            grad.addColorStop(1, "black");
            ctx.fillStyle = grad;
            ctx.fillRect(100, 20, 75, 50);
            ctx.lineWidth = 8;
            ctx.strokeStyle = grad;
            ctx.strokeRect(200, 20, 75, 50);
      </script>
</body>
</html>

Click to view this demo.