How to create canvas line using Fabric.js ? Last Updated : 16 Jul, 2021 Comments Improve Suggest changes Like Article Like Report In this article, we are going to see how to create a canvas line using FabricJS. The canvas line means the line is movable and can be stretched according to your requirements. Further, the line can be customized when it comes to initial stroke color and its starting and ending coordinates.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 our line. After this, we will initialize instances of Canvas and Line provided by FabricJS and render the Line instance on the Canvas instance as given in the example below.Syntax: fabric.Line(points, options); Parameters: This function accepts two parameters as mentioned above and described below: points: It specifies the starting and ending coordinates of the line which are in the sequence like start x-coordinate, start y-coordinate, end x-coordinate and end y-coordinate.options: It specifies the additional options to be applied. Example: We can use FabricJS to create simple editable canvas line. html <!DOCTYPE html> <html> <head> <title> How to create canvas line using Fabric.js? </title> <!-- Loading the FabricJS library --> <script src= "https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.2/fabric.min.js"> </script> </head> <body> <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 line instance var line = new fabric.Line([50, 10, 200, 150], { stroke: 'green' }); // Render the rectangle in canvas canvas.add(line); </script> </body> </html> Comment More infoAdvertise with us Next Article How to create canvas line using Fabric.js ? G gurrrung Follow Improve Article Tags : JavaScript Web Technologies JavaScript-Misc Fabric.js Similar Reads How to create a polyline canvas using Fabric.js? In this article, we are going to see how to create a canvas-like polyline using Fabric.js. The canvas means polyline is movable and can be stretched according to requirement. Further, the polyline can be customized when it comes to initial fill color, stroke color, and its coordinates. To make it po 2 min read How to create a rectangle canvas using Fabric.js ? In this article, we are going to create a canvas rectangle using FabricJS. The canvas rectangle means rectangle is movable and can be stretched according to requirement. Further, the rectangle can be customized when it comes to initial stroke color, height, width, fill color or stroke width. Approac 2 min read How to create a canvas image using Fabric.js ? Creating a canvas image using Fabric.js is a powerful method for generating dynamic and interactive graphical content on the web. Fabric.js, a robust JavaScript library, simplifies the process of working with the HTML5 canvas element by providing a rich API for manipulating shapes, text, and images. 2 min read How to add a linethrough to a canvas-type text using Fabric.js ? In this article, we are going to see how to add linethrough to a canvas-like text using FabricJS. The canvas means text written is movable and can be stretched, resized and rotated according to requirements. Further, the text itself cannot be edited like a textbox.Approach: To make it possible we ar 2 min read Fabric.js line cornerStyle Property In this article, we are going to see how to set the style of controlling corners of the canvas lines using 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 2 min read Like