CODEWITHSUNDEEP
javascripthtmlcanvashtml5-canvasfabricjs
graphics123
graphics123

Reputation: 1271

how to draw Fabric js strokeRect as in html5 canvas?

I am drawing shapes using html5 canvas library Fabric js :

Code : canvas.add(new fabric.Rect({top: 100, left: 100, width: 50, height: 50, fill: 'empty', stroke: 'white', strokeWidth: 1}));

But it is filling black in the middle area which I dont want . I want the functionality like strokeRect in html5 canvas . Any suggestions?

Upvotes: 1

Views: 726

Answers (2)

graphics123
graphics123

Reputation: 1271

canvas.add(new fabric.Rect({ top : 100, left : 100, width : 50, height : 50, fill : '', stroke : 'white', strokeWidth : 1 }));

Upvotes: 1

Kesavamoorthi
Kesavamoorthi

Reputation: 969

Use transparent instead of empty to fill the rectangle.

Sample:

canvas.add(new fabric.Rect({top: 100,
    left: 100,
    width: 50,
    height: 50,
    fill: 'transparent',
    stroke: 'white',
    strokeWidth: 1
}));

Upvotes: 1

Related Questions