Drawing on the canvas with FabricJS is a tad bit different than drawing on a real-life art canvas. In the latter, we would have to add a little bit of paint at a time and even then, how the painting actually turns out in the end isn’t exactly in our control.
Even if two different painters were to paint the same portrait on a real canvas, the paintings would turn out different.
However, things are not the same while drawing on a HTML5 <canvas> element. It has been made sure in FabricJS that drawing on the canvas is not only seamless and easy but also turns out the way we want!
Objects
In order to draw on the canvas, we need to create objects. All 2d objects in FabricJS inherit from their parent class. So, a rectangle object would inherit its properties from the Rect class, circle would inherit from Circle class and so on.
This class from which the object is created actually inherits its properties from Fabric.Object ie., extends fabric.Object.
Basic Shapes Provided in FabricJS
AH FINALLY the fun part. Here are the 7 basic shapes that is provided in FabricJS (although there is a lot more stuff that you can do as well)
- Circle — created by instantiating fabric.Circle constructor
- Rectangle — created by instantiating fabric.Rect constructor
- Ellipse — created by instantiating fabric.Ellipse constructor
- Triangle — created by instantiating fabric.Triangle constructor
- Polygon — created by instantiating fabric.Polygon constructor
- Polyline — created by instantiating fabric.Polyline constructor
- Line — created by instantiating fabric.Line constructor
So, all you need to do is initiate an object and add it to the canvas. In the next article we will see how we can create rectangle object using canvas and also learn how to implement its properties and methods.
