用Fabric.js创建空心圆

Question

How can I achieve a similar effect like http://jsfiddle.net/Hnw6a/1137/ using Fabric.js?

I tried with clipTo but without luck.

I want to update this script http://jsfiddle.net/kxjV5/ to accept 'hollow' circles

Answer 1

Use:

{
  fill: "none",
  stroke: "red",
  strokeWidth: 5
}

http://jsfiddle.net/eguneys/kxjV5/

Answer 2

Well this one is not working on Chrome for sure.

{
  fill: "none",//should be fill:undefined
  stroke: "red",
  strokeWidth: 5
}

The fill should be set to undefined , not none .

Answer 3

If fill: "none" doesn't work, try this:

{
 fill: "rgba(0,0,0,0.0)", //setting alpha channel to 0.0 will make fill transparent
 stroke: "red", 
 strokeWidth: 5
}

Answer 4

Actual working solutions, that I found

{
 fill: 'transparent',
 // or: fill: undefined,
 // or: fill: "rgba(0,0,0,0.0)", //setting alpha channel to 0.0 will make fill transparent

 stroke: "red", 
 strokeWidth: 5
}

example: https://jsfiddle.net/1dvcrxa8/