Drawing a dashed line with fabric.js

Question

I'd like to draw a dashed line using fabric.js. I've found Issue #603 on github that should implement this feature. However I didn't find any example code and can't get it to work with fabric.js 1.2.1.

Is it already part of fabric.js 1.2.1 or do I have to get it off github directly and build it myself? Could someone provide me with a simple example to get me started?

Answer 1

The property you're looking for is strokeDashArray which encodes the SVG attribute stroke-dasharray. It expects an array that describes the pattern of dashes and gaps, see the linked page for more details.

An example of usage may look like the following, which would create a dashed black line with equally spaced 5px fills:

new fabric.Line([0, 20, 100, 20], {
    strokeDashArray: [5, 5],
    stroke: 'black'
});