This is the final lesson of “Drawing with FabricJS”, and after this we can finally move on to newer topics.
But first, let’s see how we can create a triangle on the canvas by using FabricJS.
There are several ways by which we can create a triangle in FabricJS. We can instantiate an instance of fabric.Triangle or we can instantiate a Polyline object and provide it the x and y coordinates that we want for our triangle or we can also do the same via instantiating an instance of fabric.Polygon.
When we draw a triangle by initiating an object of fabric.Triangle, we get an isoceles triangle whose base is going to be specified by the width property and height by the height property.
Let’s look at the constructor definition:
new fabric.Triangle( options: Object )Creating an instance of fabric.Triangle
In the code below, I have created an instance of fabric.Triangle. As the options, I have provided the width property a value of 150 which means that the base of the triangle will be 150 px wide. Similarly, I have provided a value to the height property which is 200 px.
var triangle = new fabric.Triangle({
width: 150,
height: 200,
fill: "#ff8243",
});
// adding it to the canvas
canvas.add(triangle)Adding multiple objects to the canvas
Obviously we know how to add multiple objects to the canvas, right? We simply call the add() method and keep adding the objects one by one by separating them with commas like this: add(object1, object2, object3, object4, …..)
I totally understand if it’s still not crystal clear. So, let’s try to understand this from the example below:
<!DOCTYPE html>
<html>
<head>
<!-- Adding the FabricJS library -->
<script
src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/521/fabric.min.js"
integrity="sha512-nPzvcIhv7AtvjpNcnbr86eT6zGtiudLiLyVssCWLmvQHgR95VvkLX8mMpqNKWs1TG3Hnf+tvHpnGmpPS3yJIgw=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
></script>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap"
rel="stylesheet"
/>
</head>
<body>
<canvas
id="canvas"
style="border: 2px solid black"
width="400"
height="300"
></canvas>
<script>
var canvas = new fabric.Canvas("canvas");
// Creating a rectangle object for no reason
var rect = new fabric.Rect({
width: 150,
height: 100,
fill: "#ffbf00",
top: 200,
selectable: false, // Unselectable
});
// First triangle object
var triangleOne = new fabric.Triangle({
width: 150,
height: 200,
fill: "#ff8243",
selectable: false, // Unselectable
});
// Second triangle object
var triangleTwo = new fabric.Triangle({
left: 37.5,
width: 75,
height: 100,
fill: "#ff0038",
selectable: false, // Unselectable
});
// This is the first text object
var text1 = new fabric.Text("Happily \nUnbothered", {
fontFamily: "Roboto, Sans-serif",
// fontStyle: "Sans-serif" -- Wrong approach
fontSize: 20,
top: 240,
fontWeight: 800,
left: 10,
});
// The second text object
var text2 = new fabric.Text("Eyebrows \ntwitching", {
fontFamily: "Roboto, Sans-serif",
fontSize: 15,
top: 130,
fontWeight: 800,
left: 35,
});
// Creating the third text object
var text3 = new fabric.Text(
"Wanting\nto\nthrow\nthe\nevil jerk\noff\nthis\ntower",
{
fontFamily: "Roboto, Sans-serif",
fontSize: 5,
top: 50,
fontWeight: 800,
left: 60,
}
);
// Adding multiple objects
canvas.add(rect, triangleOne, triangleTwo, text1, text2, text3);
</script>
</body>
</html>
Okay, so that’s a terribly long code because of my personal frustration after getting overcharged UNNECESSARILY. Which made me want to create this which I have named “the tower of ultimate annoyance” ( -____- ).
That being said, let’s understand things one by one:
// First triangle object
var triangleOne = new fabric.Triangle({
width: 150,
height: 200,
fill: "#ff8243",
selectable: false, // Unselectable
});
// Second triangle object
var triangleTwo = new fabric.Triangle({
left: 37.5,
width: 75,
height: 100,
fill: "#ff0038",
selectable: false, // Unselectable
});These are the two triangle objects that I have created. You can also see that I have used the property selectable and passed a false value to it. An object can be selected on the canvas by simply clicking on it. When the selectable property is turned off, this isn’t allowed and thus objects become fixed.
Since, I haven’t passed selectable as false to the Text objects, you’ll see that in the output, only the Text objects are selectable.
// This is the first text object
var text1 = new fabric.Text("Happily \nUnbothered", {
fontFamily: "Roboto, Sans-serif",
// fontStyle: "Sans-serif" -- Wrong approach
fontSize: 20,
top: 240,
fontWeight: 800,
left: 10,
});I have also created three text objects, one of which I have shown above. We can add text on the canvas by creating instances of fabric.Text and yes, just like every other object, we can provide it an optional options Object which allows us to play around with its properties. But we must provide it the Text string as the first parameter. You can read more about fabric.Text here.
Creating a triangle by using fabric.Polygon
Any closed object in the 2-D plane which has many sides can be termed as a polygon. According to Wikipedia, the word polygon is derived from Greek words which essentially translate to “many” and “corner”.
By now you know the drill so let’s initiate an instance of fabric.Polygon and create a triangle with it.
<!DOCTYPE html>
<html>
<head>
<!-- Adding the FabricJS library -->
<script
src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/521/fabric.min.js"
integrity="sha512-nPzvcIhv7AtvjpNcnbr86eT6zGtiudLiLyVssCWLmvQHgR95VvkLX8mMpqNKWs1TG3Hnf+tvHpnGmpPS3yJIgw=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
></script>
</head>
<body>
<canvas
id="canvas"
style="border: 2px solid black"
width="400"
height="300"
></canvas>
<script>
var canvas = new fabric.Canvas("canvas");
// Initiating a polygon object
var triangle = new fabric.Polygon(
[
{ x: 0, y: 0 },
{ x: 100, y: 150 },
{ x: 0, y: 200 },
],
{
fill: "#ffbf00",
top: 20,
left: 50,
}
);
// Adding it to the canvas
canvas.add(triangle);
</script>
</body>
</html>In the 2 dimensional coordinate system, a triangle an be drawn by drawing three points and connecting them. The idea remains the same here as well.
We need three points to create a triangle and therefore we have specified a points Array where each point is simply an object with the x and y coordinate values.
The output will look like this:
We can draw any polygon provided we pass the right coordinates to the points Array of fabric.Polygon.
Useless Outro
Sorry for the sudden emotional outburst guys…. *sigh* I think I definitely need to watch some corny cute cat stuff.
Thankfully, we have finally learned how to draw several objects. As you keep practicing and experimenting, you’ll become a master at it. In the next article we will learn about gradients. Till then, see yaaaa~.
