Draw A Bézier curve using FabricJS

It is time that we move on to drawing more complex shapes with FabricJS. We’ve learnt how we can draw circle, ellipse, triangle and many more such objects by using their respective classes provided by the FabricJS library. But when it comes to drawing complex curves, we need to use the Path class and pass the coordinates such that they can reflect the shape that we want to draw on the canvas.

What are Bézier curves?

Patented and popularized by French engineer, Pierre Étienne Bézier, Bézier curves are widely used in computer graphics to draw smooth curves.

You might come across vector graphics or animation that uses Bézier curves because they provide computational ease and smooth 🎢 scaling.

You can click here to read how to identify Bézier curves

A Bézier curve can be defined by its control points and starting from 2 it can have several control points. The simplest form of Bézier curve is a straight line.

(_Image Source_)

A Bézier curve having 3 control points, is called a quadratic Bézier curve whereas a Bézier curve having 4 control points is called a cubic Bézier curve. In the image down below, a cubic Bézier curve is displayed. Its control points are b0, b1, b2 and b3.

(_Image Source_)

Using Path class to create a Cubic Bézier curve

Although it isn’t suggested that we create complex paths using Bézier curves, we mustn’t completely ignore them. So, let’s see how we can create a simple cubic Bézier curve using the Path class provided in FabricJS.

This is the Path class constructor:

new fabric.Path( path: Array | String, options: Object )

• You can see in the constructor definition that we can create Path objects by initiating an instance of fabric.Path.
• The first argument should be an Array or a String that specifies the path data. In other words, this is where we need to set the inputs for our curve.
• Lastly, we can make additional changes in property in the optional options Object that is the second argument.

Creating the cubic Bézier curve

In order to create the curve, we need to use the following commands:

• M : Move command; Move to coordinate (x, y)
• C : Cubic bezier command; C (first control point) (second control point) (ending coordinate)

C (x1, y1) (x2, y2) (xd, yd)

• x1, y1 : first control point ie, (150, 50)
• x2 , y2 : second control point ie., (300, 250)
• xd, yd : destination coordinates ie., (350, 100)

C 150,50 300,250 350,100

Finally, let’s code the entire thing:

     // Initiate a path instance
      var path = new fabric.Path("M 50,150 C 150,50 300,250 350,100 ", {
        strokeWidth: 6,
        stroke: "white",
        left: 10,
        top: 100,
      });

       canvas.add(path);

On pasting the above piece of code inside the <script> tag, you will get an output like this:

A Cubic Bézier curve created using FabricJS

Useless Outro

Oh my God guys that was really difficult to explain. Forgive me if this was a silly attempt. While working on this article, I felt like I had dug my own grave lol.