How to create Radial Gradient using FabricJS?

4 min readNov 16, 2022

In my previous article, we saw how we can create linear gradients by using FabricJS.

Let’s take it notch up by shifting our focus to radial gradients. Radial gradients are formed whenever there is a radial expansion followed by a gradual color transition.

Steps to Create a radial gradient using FabricJS

Create any object. In this example I have initiated an instance of fabric.Rect which creates a rectangle object.
Use the set method and set the fill value to an instance of fabric.Gradient. (You can do the same for stroke property)
In the options property, set the type as “radial”.
Set the coordinates, r1(radius of inner circle) and r2(radius of outer circle).
Add the object to the canvas.

<!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 a rectangle object
      var rect = new fabric.Rect({
        width: 110,
        height: 110,
        top: 60,
        left: 100,
      });

      rect.set(
        "fill",
        new fabric.Gradient({
          type: "radial",

          coords: {
            x1: rect.width / 2,
            y1: rect.height / 2,
            x2: rect.width / 2,
            y2: rect.height / 2,
            r1: rect.width / 6, // inner circle radius
            r2: rect.width / 2, // outer circle radius
          },
          colorStops: [
            { offset: 0, color: "pink" }, // first color stop
            { offset: 0.5, color: "violet" }, // second color stop
            { offset: 1, color: "skyBlue" }, // third color stop
          ],
        })
      );

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

So, what is actually happening in the above code?

Whenever we want to create a radial gradient, it is imperative that we set the r1 and r2 values. The inner circle is where the gradient starts.

How your gradient turns out completely depends on the values that you enter. If the start and end circles do not overlap, all you would see in your rectangle object is a single block of color.

In the above code r1 is rect.width / 6 and r2 is rect.width / 2. We know that the width value assigned to our rect object is 110. So, essentially, r1(inner radius) will be approximately equal to 18.33 whereas r2(outer radius) will be equal to 55.

Note:

rect.setGradient({
options: Object // setGradient function has been removed
})

If you google FabricJS, you might come across this function in older articles. Since that might leave you confused, I would like to mention this as a note that setGradient function has been removed and was one of the changes made in version 4.

Applying Radial Gradient to the entire canvas

You might wonder if it is possible to apply gradients to the entire canvas.

And the answer to that is YES!

We can simply use canvas.set() to achieve that. The set method is, quite obviously, a setter which allows us to assign values to properties of an object or in this case, specifically, the canvas object.

Here we are calling the set method and assigning it “backgroundColor” as its first parameter, and initializing the gradient in the second parameter.

Therefore the gradient will be applied as the background color for our entire canvas.

<!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 white"
      width="400"
      height="300"
    ></canvas>

    <script>
      var canvas = new fabric.Canvas("canvas");

      // setting the gradient for the entire canvas
      canvas.set(
        "backgroundColor",
        new fabric.Gradient({
          type: "radial",

          coords: {
            x1: canvas.width / 2,
            y1: canvas.height / 2,
            x2: canvas.width / 2,
            y2: canvas.height / 2,
            r1: 10, // inner circle radius
            r2: canvas.width / 2, // outer circle radius
          },
          colorStops: [
            { offset: 0, color: "#e6e6fa" },
            { offset: 0.2, color: "#ccccff" },
            { offset: 0.4, color: "#cec8ef " },
            { offset: 0.6, color: "#b19cd9" },
            { offset: 0.8, color: "#b57edc" },
            { offset: 1, color: "#734f96" },
          ],
        })
      );

      var text = new fabric.Text("RADIAL GRADIENT ON THE\nENTIRE CANVAS", {
        fontSize: 20,
        fontWeight: 800,
        fill: "white",
        top: 120,
        left: 65,
        charSpacing: 15,
        textAlign: "center",
        lineHeight: 1.6,
      });
      canvas.add(text);
      canvas.renderAll();
    </script>
  </body>
</html>

I hope that was helpful! :3 In the next tutorial we will see how we can add text to our canvas.

How to create Radial Gradient using FabricJS?

Steps to Create a radial gradient using FabricJS

Note:

Applying Radial Gradient to the entire canvas

Written by Mandev