The canvas Polyline means the Polyline is movable and can be stretched according to requirements. Further, the Polyline can be customized when it comes to initial stroke color, shape, fill color, or stroke width.
In order to set the border of the canvas Polyline, the JavaScript library called FabricJS is been used. After importing the library, we will create a canvas block in the body tag that will contain the Polyline. After this, we will initialize instances of Canvas and Polyline provided by FabricJS and set the borders of the canvas Polyline using hasBorders property, and render the Polyline on the Canvas as given in the below example.
Syntax:
fabric.Polyline([
{ x: pixel, y: pixel },
{ x: pixel, y: pixel },
{ x: pixel, y: pixel},
{ x: pixel, y: pixel},
{ x: pixel, y: pixel }],
{ hasBorders: boolean }
);Parameters: This property accepts a single parameter as mentioned above and described below:
- hasBorders: It specifies whether to make the border is visible or not.
Note: Dimension pixels is must create a polyline.
The below example illustrates the hasBorders property in Fabric.js:
Example:
<!DOCTYPE html> <html>
<head>
<!-- Loading the FabricJS library -->
<script src=
</script>
</head>
<body>
<div style="text-align: center;width: 600px;">
<h1 style="color: green;">
GeeksforGeeks
</h1>
<b>
Fabric.js | Polyline hasBorders Property
</b>
</div>
<canvas id="canvas"
width="600"
height="200"
style="border:1px solid #000000;">
</canvas>
<script>
// Initiate a Canvas instance
var canvas = new fabric.Canvas("canvas");
// Initiate a polyline instance
var polyline = new fabric.Polyline([
{x: 200, y: 10 },
{x: 250, y: 50 },
{x: 250, y: 180 },
{x: 150, y: 180 },
{x: 150, y: 50 },
{x: 200, y: 10 }],
{
stroke: 'green',
strokeWidth: 3,
cornerStyle: 'circle',
excludeFromExport: false,
hasBorders: false
});
// Render the polyline in canvas
canvas.add(polyline);
</script>
</body>
</html>
|
Output:
Example 2: In this example, hasBorders property is set to true.
<!DOCTYPE html> <html> <head> <!-- Loading the FabricJS library -->
<script src= </script> </head> <body> <div style="text-align: center;width: 600px;">
<h1 style="color: green;">
GeeksforGeeks
</h1>
<b>
Fabric.js | Polyline hasBorders Property
</b>
</div>
<canvas id="canvas"
width="600"
height="200"
style="border:1px solid #000000;">
</canvas>
<script>
// Initiate a Canvas instance
var canvas = new fabric.Canvas("canvas");
// Initiate a polyline instance
var polyline = new fabric.Polyline([
{x: 200, y: 10 },
{x: 250, y: 50 },
{x: 250, y: 180 },
{x: 150, y: 180 },
{x: 150, y: 50 },
{x: 200, y: 10 }],
{
stroke: 'green',
strokeWidth: 3,
cornerStyle: 'circle',
excludeFromExport: false,
hasBorders: true
});
// Render the polyline in canvas
canvas.add(polyline);
</script>
</body> </html> |
Output: