Fabric.js Polygon strokeDashArray Property
Last Updated :
20 Jan, 2021
In this article, we are going to see how to add a stroke dash pattern to the Polygon canvas using FabricJS. The canvas means Polygon written is movable, rotatable, resizable, and can be stretched. But in this article, we will add a stroke dash pattern. Further, the Polygon itself cannot be edited like a textbox.
To make it possible, we are going to use a JavaScript library called FabricJS. After importing the library using CDN, we will create a canvas block in the body tag which will contain our Polygon. After this, we will initialize instances of Canvas and Polygon provided by FabricJS and create a stroke using stroke property and further use the strokeDashArray property to add stroke dash pattern and render the Canvas on the Polygon as given in the below example.
Syntax:
fabric.Polygon([
{ x: pixel, y: pixel },
{ x: pixel, y: pixel },
{ x: pixel, y: pixel},
{ x: pixel, y: pixel},
{ x: pixel, y: pixel }],
{
strokeDashArray : Array
}
);
Parameters: This property accepts a single value as an array mentioned above and described below:
- Array: It specifies the stroke dash pattern.
Below example illustrate the Fabric.js strokeDashArray:
Example:
HTML
<!DOCTYPE html>
< html >
< head >
< script src =
</ script >
</ head >
< body >
< div style = "text-align: center;width: 600px;" >
< h1 style = "color: green;" >
GeeksforGeeks
</ h1 >
< b >
Fabric.js | Polygon strokeDashArray 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 polygon instance
var polygon = new fabric.Polygon([{
x: 295,
y: 10
}, {
x: 235,
y: 198
}, {
x: 385,
y: 78
}, {
x: 205,
y: 78
}, {
x: 355,
y: 198
}], {
stroke: 'green',
strokeDashArray: [10]
});
// Render the polygon in canvas
canvas.add(polygon);
</ script >
</ body >
</ html >
|
Output:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...