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 with the help of a JavaScript library called FabricJS.
Syntax:
var polyline = new fabric.Polyline(Points, {
lockRotation: boolean
}); Parameters: This property accepts a single parameter as mentioned above and described below:
- lockRotation: It specifies whether to enable rotation or not.
The below example illustrates the lockRotation property in Fabric.js. 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 lock the rotation of the canvas Polyline using lockRotation property and render the Polyline on the Canvas.
Example:
<!DOCTYPE html> <html>
<head>
<!-- Loading the FabricJS library -->
<script </script>
</head>
<body>
<div style="text-align: center;width: 600px;">
<h1 style="color: green;">
GeeksforGeeks
</h1>
<b>Fabric.js | Polyline lockRotation 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',
lockRotation: true
});
// Render the polyline in canvas
canvas.add(polyline);
</script>
</body>
</html>
|
Output: