Fabric.js Polygon stroke Property Last Updated : 20 Jan, 2021 Comments Improve Suggest changes Like Article Like Report In this article, we are going to see how to set the stroke color of a canvas Polygon using FabricJS. The canvas rectangle means Polygon is movable and can be stretched according to requirement. Further, the Polygon can be customized when it comes to initial stroke color, height, width, fill color, or stroke width. Approach: To make it possible, we are going to use a JavaScript library called FabricJS.After importing the library, we will create a canvas block in the body tag which will contain the Polygon.After this, we will initialize instances of Canvas and Polygon provided by FabricJS and set the stroke color of the Polygon using stroke property, and render the Polygon on the Canvas as given in the example below. Syntax: fabric.Polygon([ { x: pixel, y: pixel }, { x: pixel, y: pixel }, { x: pixel, y: pixel}, { x: pixel, y: pixel}, { x: pixel, y: pixel } ], { stroke: string }); Parameters: This property accepts a single parameter as mentioned above and described below: stroke: It specifies the stroke color. Below examples illustrate the Fabric.JS Polygon stroke in JavaScript: Example: HTML <!DOCTYPE html> <html> <head> <!-- Loading the FabricJS library --> <script src= "https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.2/fabric.min.js"> </script> </head> <body> <div style="text-align: center;width: 600px;"> <h1 style="color: green;"> GeeksforGeeks </h1> <b> Fabric.js | Polygon stroke 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 }], { fill:'green', stroke: 'blue', paintFirst: 'fill', }); // Render the polygon in canvas canvas.add(polygon); </script> </body> </html> Output: Comment More infoAdvertise with us Next Article Fabric.js Polygon stroke Property S skyridetim Follow Improve Article Tags : JavaScript Web Technologies HTML Fabric.js Similar Reads Fabric.js Polygon strokeWidth Property In this article, we are going to see how to set the stroke width of a canvas Polygon using FabricJS. The canvas rectangle means Polygon is movable and can be stretched according to requirement. Further, the Polygon can be customized when it comes to initial stroke color, height, width, fill color, o 2 min read Fabric.js Polyline stroke Property In this article, we are going to see how to set the stroke color of a canvas polyline using FabricJS. The canvas polyline means the polyline is movable and can be stretched according to requirement. Further, the polyline can be customized when it comes to initial stroke color, height, width, fill co 2 min read Fabric.js Polygon top Property In this article, we are going to see how to set the top of the canvas polygon using FabricJS, it used to fill an object. The canvas polygon means the polygon is movable and can be stretched according to requirements. Further, the polygon can be customized when it comes to initial stroke color, heigh 2 min read Fabric.js Polygon strokeLineCap Property In this article, we are going to see how to set the strokeLineCap of the canvas polygon using FabricJS, it's used to fill an object. The canvas polygon means the polygon is movable and can be stretched according to requirements. Further, the polygon can be customized when it comes to initial stroke 2 min read Fabric.js Polygon strokeUniform Property In this article, we are going to see how to lock the uniform stroke width of a canvas Polygon using FabricJS so that width of the stroke remains the same even when we scale the object to a bigger size. The canvas means the Polygon is movable and can be stretched according to the requirement. Further 2 min read Like