Fabric.js - Transparent circle background with stroke / border.

Question

I have a circle that appears in fabric.js version 1.6.0-rc.1 file:

var circlePatrol = new fabric.Circle({ top: 300, left: 180, radius: 200, strokeDashArray: [10, 10], stroke: 'black', strokeWidth: 10, fill: 'white', opacity: 0.2 }); 

I want to set the background as transparent, but keep the move around the circle. Is this possible in fabric.js? Transparency is also applied to the stroke / border, I try to apply it only against the background of the circle.

I tried this also with a transparent background, still no luck:

 var circlePatrol = new fabric.Circle({ top: 300, left: 180, radius: 200, strokeDashArray: [10, 10], stroke: 'black', strokeWidth: 10, backgroundColor: 'transparent', }); 

Answer 1

You can set fill: 'rgba(0,0,0,0)' .

 var circlePatrol = new fabric.Circle({ top: 0, left: 0, radius: 200, strokeDashArray: [10, 10], stroke: 'black', strokeWidth: 10, fill: 'rgba(0,0,0,0)' }); 

Jsfiddle

Answer 2

Another option is to use a "transparent" value in the padding

 const rect = new fabric.Rect({ top: 10, left: 10, width: 50, height: 50, hasBorder: true, stroke: 'yellow', strokeWidth: 3, fill:'transparent' });