In this article we will learn how we can draw on the canvas and take a look at the different brushes that are provided in FabricJS.
The canvas is a 2D bitmap. This means performing free drawing on the canvas is not a big deal at all. Let’s take a look at the canvas properties that come in handy while drawing:
- isDrawingMode — This property accepts a Boolean value which when true, results in free drawing. If it is set to false, we wouldn’t be able to draw on the canvas.
- freeDrawingCursor — This property accepts a String value which denotes the cursor value while free drawing. The accepted cursor values are default, crosshair, pointer, help, all-scroll, not-allowed, col-resize, row-resize etc.
How to customize free drawing on the Canvas
FabricJS provides us freeDrawingBrush for this reason(which is nowhere to be found in the documentation as of 2022 and that is hella weird 🤷♀️). We use the dot notation to access the properties of the freeDrawingBrush instance. These properties are color and width. The color property allows us to set the color of the brush while the width property represents the thickness of the brush in pixels.
var canvas = new fabric.Canvas("canvas", {
backgroundColor: "black",
isDrawingMode: true,
freeDrawingCursor: "default",
});
canvas.freeDrawingBrush.color = "#a6e7ff";
canvas.freeDrawingBrush.width = "5";
How to Erase Objects in FabricJS
Now that we have learnt how to draw objects on the canvas, let’s see how we can erase them! Drawing and erasing comes hand in hand. So, FabricJS provides us the erasable property which can be set to true or false. It is an instance of fabric.Eraser and allows us to erase things on the canvas.
var canvas = new fabric.Canvas("canvas", {
backgroundColor: "black",
isDrawingMode: true,
freeDrawingCursor: "default",
});
var circle = new fabric.Circle({
fill: "red",
radius: 80,
top: 55,
left: 100,
});
canvas.freeDrawingBrush.width = 20;
canvas.add(circle);
circle.set("erasable", true);
circle.dirty = true;
How to use the canvas SprayBrush
All the brushes provided in FabricJS inherit their properties from the BaseBrush class. The SprayBrush class is one of them.
In order to use a spray brush, we must create an instance of fabric.SprayBrush and pass it the canvas instance. In the code below, I have done just that. We need to create the button first like so:
<button id="select" style=" padding: 5px; border: 2px solid white; background-color: black;color: whitesmoke;">Select Drawing</button>By using the getElementById method, we select the id called “select”. Further the addEventListener method calls a function whenever we click on the button. This function sets the drawing mode of our canvas to false.
Whenever the drawing mode of the canvas is set to false, we will be able to play around with the free drawing instances as any other canvas objects. This is because, when we draw on the canvas, we are actually creating fabric.Path instances. Thus we will be able to modify, move, scale, skew or rotate these objects when isDrawingMode is turned off!
var canvas = new fabric.Canvas("canvas", {
backgroundColor: "black",
isDrawingMode: true,
freeDrawingCursor: "default",
});
canvas.freeDrawingBrush = new fabric.SprayBrush(canvas);
canvas.freeDrawingBrush.color = "yellow";
canvas.freeDrawingBrush.width = 35;
canvas.renderAll();
document.getElementById("select").addEventListener("click", function () {
canvas.isDrawingMode = false;
});
How to use the CircleBrush Class
Just as its name suggests, the CircleBrush class draws circles (DUH!). fabric.CircleBrush returns an instance of CircleBrush whose width can be controlled by using the width property (the default value is 10).
canvas.freeDrawingBrush = new fabric.CircleBrush(canvas);
canvas.freeDrawingBrush.color = "rgba(255,20,147,0.4)";
canvas.freeDrawingBrush.width = "2";
Useless Outro
The other brushes can be used exactly how we used the SprayBrush and CircleBrush classes! I hope this was helpful. See ya~
