How to draw a line on a canvas using fabric.js

user2779232 picture user2779232 · Sep 16, 2013 · Viewed 23.2k times · Source

I am using fabric.js to draw a line on a canvas. This is my code, but I'm not getting any output:

$("#Line").click(function() {
    // alert("Line");
    canvas.add(new fabric.Line([50, 100, 200, 200], {
        left: 170,
        top: 150,
        fill: 'red'
    }));
});

Answer

Sanjay Nakate picture Sanjay Nakate · Sep 16, 2013

Simple change: You can't fill a line with a color in fabric.js. You have to use stroke with a color instead.

In the snippet below fill:'red' is replaced with stroke:'red'.

$("#Line").click(function () {
    // alert("Line");
    canvas.add(new fabric.Line([50, 100, 200, 200], {
        left: 170,
        top: 150,
        stroke: 'red'
    }));
});