How to create Gradients using Fabric JS?

3 min readNov 15, 2022

In this article we’ll see how we can create gradients using FabricJS.

Whenever there is a smooth transition from one color to another color in a shape we say that a gradient has been applied to it. The idea is that the colors would look blended together instead of a harsh separation existing between them.

Left: Radial gradient, Right: Linear gradient

All SVG elements support two types of gradients- linear ie., the gradient changes along a straight line, and radial where the gradient radiates out from a point.

As always let’s see the constructor definition first:

new fabric.Gradient({type: Object, // optional
                     gradientUnits: Object, // optional
                     offsetX: Object, // optional
                     offsetY: Object, // optional
                     colorStops: Array, 
                     coords: Object}: Object)

Note:

type specifies the type of gradient we want ie., either linear or radial.
gradientUnits is the unit for gradient size. By default it is set to pixels but we are allowed to change it to “percentage”.

You can read more about the constructor definition here.

Applying Linear gradients to objects

In order to apply gradients to FabricJS objects we simply need to create an instance of fabric.Gradient and assign it as a value to the fill or stroke property.

But first let’s refresh our memories on how we typically apply gradients using css.

In the code below, I’ve applied a linear gradient which is at a 75 degree angle and its color stops being pink, violet and skyBlue. Color stops are the colors we want to use in the gradient.

Using FabricJS to obtain similar results

Let’s try to obtain similar results using FabricJS.

Points to remember:

The coords property specifies the x and y coordinates for the linear gradient. In the example below, the coordinates for the first point is (x1, y1) = (0, 10) and the coordinates for the second point is (x2, y2) = (100, 70).
The offset can be used to define the position of the color in the gradient. You can see that the violet colour lies in the middle because its offset is 0.5.
You can define any number of offsets provided that they lie between 0 and 1. The value 0 determines the start of the gradient and 1 marks the end of it.

<!DOCTYPE html>
<html>
  <head>
    <!-- Adding the FabricJS library -->
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/521/fabric.min.js"
      integrity="sha512-nPzvcIhv7AtvjpNcnbr86eT6zGtiudLiLyVssCWLmvQHgR95VvkLX8mMpqNKWs1TG3Hnf+tvHpnGmpPS3yJIgw=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    ></script>
  </head>
  <body>
    <canvas
      id="canvas"
      style="border: 2px solid black"
      width="400"
      height="300"
    ></canvas>

    <script>
      var canvas = new fabric.Canvas("canvas", {
        backgroundColor: "black",
      });

      // Initiating an instance of fabric.Gradient
      var Gradient = new fabric.Gradient({
        type: "linear",
        coords: { x1: 0, y1: 10, x2: 100, y2: 70 },
        colorStops: [
          { offset: 0, color: "pink" }, // first color stop
          { offset: 0.5, color: "violet" }, // second color stop
          { offset: 1, color: "skyBlue" }, // third color stop
        ],
      });

      var rect = new fabric.Rect({
        width: 110,
        height: 110,
        top: 60,
        left: 100,
        // Setting the gradient as fill color
        fill: Gradient,
      });

      // Adding it to the canvas
      canvas.add(rect);
    </script>
  </body>
</html>

In the next tutorial we will learn about Radial gradients.

How to create Gradients using Fabric JS?

Applying Linear gradients to objects

Using FabricJS to obtain similar results

Points to remember:

Written by Mandev