Fabric.js line stroke Property Last Updated : 09 Feb, 2021 Comments Improve Suggest changes Like Article Like Report In this article, we are going to use stroke property to set the stroke color of the canvas line in FabricJS. The canvas line means the line is movable and can be stretched according to requirement. Further, the line can be customized when it comes to initial stroke color, height, width, fill color, or stroke width. To make this possible we are going to use a JavaScript HTML5 canvas library called FabricJS. After importing the library, we will create a canvas block in the body tag which will contain the line. After this, we will initialize instances of Canvas and line provided by FabricJS and set the stroke color of a canvas line using stroke Property, and render the line on the Canvas as given below. Syntax: fabric.line({ stroke : 'string' }); Parameters: This property accepts a single parameter as mentioned above and described below: stroke : It specifies the stroke color of a canvas line. It contains a string value. Example1: HTML <!DOCTYPE html> <html> <head> <script src= "https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.2/fabric.min.js"> </script> </head> <body> <h1>fabric.js | line stroke property</h1> <canvas id="canvas" width="600" height="200" style="border:1px solid #000000;"> </canvas> <script> var canvas = new fabric.Canvas("canvas"); var line = new fabric.Line([150, 10, 220, 150], { stroke: 'red', }); canvas.add(line); </script> </body> </html> Output: Comment More infoAdvertise with us Next Article Fabric.js line top Property T taran910 Follow Improve Article Tags : JavaScript Fabric.js Similar Reads 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 line strokeWidth Property In this article, we are going to use strokeWidth property to set the width of the stroke color in the canvas line in FabricJS. The canvas line means the line is movable and can be stretched according to requirement. Further, the line can be customized when it comes to initial stroke color, height, w 2 min read Fabric.js line top Property In this article, we are going to use top property to set the position relative to the top in the canvas line in FabricJS. The canvas line means the line is movable and can be stretched according to requirement. Further, the line can be customized when it comes to initial stroke color, height, width, 2 min read Fabric.js Polygon stroke Property 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, o 2 min read Fabric.js Polyline strokeWidth Property In this article, we are going to see how to set the stroke width of a canvas Polyline using FabricJS. The canvas Polyline means 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 color, 2 min read Fabric.js line strokeDashArray Property In this article, we are going to use strokeDashArray property to set the dash pattern of the stroke color in the canvas line in FabricJS. The canvas line means the line is movable and can be stretched according to requirement. Further, the line can be customized when it comes to initial stroke color 2 min read Like