In this post, I would like to briefly mention about the lower and upper canvas of FabricJS.
Before that, let’s do a little bit of recap.
What is FabricJS?
It is a Javascript HTML5 canvas library that provides us with an interactive object-model for the canvas element.
I’d like to think there are some people who might be saying- “object whaaat?”
So, simply put, if FabricJS is Final Fantasy 7, then cloud, the protagonist or the object(in this case) has to be used by us to kill the boss(ie., make changes or create interactivity in the canvas).
In the native canvas API, things are not the same. After referencing the <canvas> element with an id, we would need to create a 2d context to draw on and then use the methods provided to us to draw on the canvas.
Creating a rectangle by using the native <canvas> API
<!DOCTYPE html>
<html>
<head> </head>
<body>
<canvas
id="canvas"
style="border: 2px solid black"
width="400"
height="300"
></canvas>
<script>
// referencing the canvas element by using its id
var canvasElementReference = document.getElementById("canvas");
// Getting a 2d context to draw on
var context = canvasElementReference.getContext("2d");
// Setting the fill style of the context
context.fillStyle = "purple";
// Creating a rectangle of width= 50, height=60 at a (70,90) point
context.fillRect(70, 90, 50, 60);
</script>
</body>
</html>
Let us do the same by using FabricJS:
<script>
// Creating a wrapper around the native canvas element
var canvas = new fabric.Canvas("canvas");
// Creating a rectangle object
var rect = new fabric.Rect({
top: 90,
left: 70,
width: 50,
height: 60,
fill: "purple",
});
// Adding it to the canvas
canvas.add(rect);
</script>You can see I have only made changes inside the script tag. All we needed to do was instantiate a rectangle object and add it to the canvas. Thus we can say that FabricJS, operates on objects rather than the context itself.
Upper and Lower Canvas
Coming to the main part of this article, let’s talk about upper and lower canvas. Why does FabricJS need two canvases instead of one?
Well, using the same code from the earlier example, if you were to open your browser and inspect it, you would get something like this:
The id of the lower canvas is the id that we used to reference the canvas element with. So, if we were to change the id to something like “meowwww”, the id of lower-canvas class would(obviously) change too.
So, as you might have guessed by now, it is actually the lower canvas on which all of our objects are drawn onto. The upper canvas comes into picture where there are group selections and handles things on the fabric side.
Useless Outro
Sorry for the long article everyone. I meant to keep it short but it kept getting longer I don’t know how (~w~) I have a cold so my emotions are everywhere as well as my snot. I really hate winter weather. Anyway, I hope this article cleared up certain things. See ya~
