In this article I’ll illustrate how we can create Line and Polyline on the canvas using FabricJS.
A line is an element which starts from one point and ends at another in the 2d plane. A Polyline is the object that we get on connecting multiple line segments.
Side-note:
- Click Here if you are still a little bit confused about Objects.
Let’s see the constructor definition now:
new fabric.Line( points: Array, options: Object )new fabric.Polyline( points: Array, options: Object )You might look at the constructor definition and think that there’s no difference between the two. However, the points Array of Line object specifies the starting(x1,y1) and ending coordinates(x2, y2) of a line. Whereas, the points Array of a Polyline object specifies the points that we want as coordinates where each point is an object with x and y coordinates.
Creating a line Object in the canvas
We can create a line object on the canvas by using FabricJS like this:
<!DOCTYPE html>
<html>
<head>
<!-- Adding the FabricJS library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></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 line object
var line = new fabric.Line([100, 90, 300, 20], {
stroke: "green",
});
// Adding it to the canvas
canvas.add(line);
</script>
</body>
</html>
Creating a Polyline Object in the canvas
We can create a polyline object and add it to the canvas like so:
<!DOCTYPE html>
<html>
<head>
<!-- Adding the FabricJS library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></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 polyline object
var polyline = new fabric.Polyline(
[
{ x: 50, y: 50 },
{ x: 50, y: 150 },
{ x: 200, y: 250 },
{ x: 200, y: 50 },
{ x: 125, y: 100 },
],
{
stroke: "pink", // Setting the stroke color as pink
strokeWidth: 2, // Setting the stroke width value
fill: "#fada5e", // Using a hexadecimal value as fill color
left: 50, // left offset
top: 50, // top offset
}
);
// Adding it to the canvas
canvas.add(polyline);
</script>
</body>
</html>
Creating a line by using Polyline
In order to prove my earlier point that a polyline is obtained by joining multiple line segments, I wanted to show a simple example of how you can create a line object by creating an instance of fabric.Polyline.
We need (x1, y1) and (x2, y2) which signify the starting and ending coordinates of a line.
In the code below you can see, (x1, y1) is (50, 50) and (x2, y2) is (250, 150).
<!DOCTYPE html>
<html>
<head>
<!-- Adding the FabricJS library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></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 polyline object
var polyline = new fabric.Polyline(
[
{ x: 50, y: 50 },
{ x: 250, y: 150 },
],
{
stroke: "#ff69b4", // Setting the stroke color
strokeWidth: 5, // Setting the stroke width value
}
);
// Adding it to the canvas
canvas.add(polyline);
</script>
</body>
</html>
Therefore we saw how easy it is to create line and polyline by using FabricJS. In the next article we will see how we can create a triangle object by using FabricJS.
