Drawing a dashed line with fabric.js

javascript canvas fabricjs
Hartwig picture Hartwig · Jul 22, 2013 · Viewed 12.2k times · Source

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

Matěj G. picture Matěj G. · Jul 22, 2013

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'
});

Related questions

How to select Fabric.js object programmatically

I want to programmatically select Fabrics.js object. What do I have to do? For example, I am adding two objects like this: var canvas = new fabric.Canvas('canvas'); canvas.add(new fabric.Rect({ left: 100, top: 100, width: 75, height: 50, fill: 'green', …

Read More
Fabric.js changes my canvas size to 300x150 after initialization

HTML: <div class="canvas-wrapper"> <canvas id="myCanvas"></canvas> </div> CSS .canvas-wrapper { width: 900px; min-height: 600px; } #myCanvas{ border:1px solid red; position: absolute; top:22px; left:0px; height: 100%; width: 99%; } JS var myCanvas = new …

Read More
Let user delete a selected fabric js object

I have a simple fabric js based application where I will let users add shapes connect them and animate them. Following is my JS var canvas; window.newAnimation = function(){ canvas = new fabric.Canvas('canvas'); } window.addRect = function(){ var rect = new …

Read More