Yesterday’s article was a bit on the intellectual side, I believe. So I want to keep things really basic for this article. Well nah, I’m just late today and I need to publish one right now 😶 Enough of me making excuses 😑 Let’s get right into it!
The Manager- fabric.Canvas
We know that when we create an instance of fabric.Canvas, it serves as a wrapper around the HTML <canvas> element.
This, gives it the authority to manage and manipulate all of the other objects that are there in that canvas. It acts as the Manager or a supervisor of sorts without which we wouldn’t have any control over the individual objects!
So, we can add, remove or reference objects to the instance of fabric.Canvas.
However, ( and this point is often overlooked! )it also serves as a configuration host.
When we say that something needs to be configured, it means that it is to be shaped or arranged in such a way that it meets our demands. So, if we want our canvas to look or behave in a certain way, we can rely on fabric.Canvas for that.
So we can programmatically set width, zoom or height of the canvas. We can also, set the background color or image or set an overlay color like I have done below. All of these properties can be modified at will whether it is at the time of creation of fabric.Canvas or after.
// Instance of fabric.Rect
var rect = new fabric.Rect({
width: 90,
height: 80,
top: 70,
left: 100,
fill: "orange",
});
// Adding the rectangle object to the canvas
canvas.add(rect);
// Specifying the overlay color that we want for the canvas
canvas.setOverlayColor(
"rgba(249,66,158, 0.6)",
canvas.renderAll.bind(canvas)
);What makes FabricJS special #lessHyperactivityMoreInteractivity
When we talked about creating Groups using the FabricJS library, we saw how a collection of objects could be clustered together as if they were one entity.
On a user level, objects on the canvas can be manipulated via touch or mouse movements. We can drag, rotate, skew, scale or select objects. Yes- we can also group them together simply by mouse activity!
This is possible because of the top layer of interactivity that is a built-in feature of FabricJS. If we want to turn off the selectivity of objects, we can simply use the selectable property. Whereas if we want to turn off group selection for objects in canvas then we can use the selection property of Canvas class.
But, if you want to go the extra mile and get rid of every last bit of selectivity in the canvas then feel free to use fabric.StaticCanvas instead.
The StaticCanvas class is like the little brother of fabric.Canvas. It has the object model of the regular canvas class but only without event handling logic. It’s like the lighter nerdy-school-topper version of the interactive and fun fabric.Canvas. It still gets good grades, still allows us to play around with those objects but the only difference being the interactive layer is gone.
