为圆形对象fabricjs添加边框

Question

我正在尝试为圆圈添加边框。关于我能想到的唯一一种方法是在它下方添加另一个圆圈。还有更好的方法吗？

小提琴：http://jsfiddle.net/9mqqh3of/4/

PS：也无法集中精力。

HTML：

<canvas id="c" width="300" height="300"></canvas>

使用Javascript：

var canvas  = new fabric.Canvas('c');

let radius = 20;
let radius1 = 10;

let circle = new fabric.Circle({
  fill: "green",
  hoverCursor: "pointer",
  left: 20 - radius,
  opacity: 1,
  radius,
  selectable: false,
  strokeWidth: 5,
  strokeColor: "white",
  top: 20 - radius
});   

let circle1 = new fabric.Circle({
  fill: "red",
  hoverCursor: "pointer",
  left: 20 - radius1,
  opacity: 1,
  radius: radius1,
  top: 20 - radius1
}); 

canvas.add(circle);
canvas.add(circle1);

Answer 1

使用stroke表示笔画颜色，strokeWidth表示笔画宽度。

<强> 样本

＆＃13;

＆＃13;

let canvas = new fabric.Canvas('canvas');
let circle = new fabric.Circle({
  fill: "green",
  hoverCursor: "pointer",
  left: 20,
  opacity: 1,
  radius:100,
  selectable: false,
  strokeWidth: 15,
  stroke: "red",
  top: 20
});   
canvas.add(circle)

＆＃13;

canvas {
  border:1px solid #000;
}

＆＃13;

<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<canvas id="canvas" height="400" width="400"></canvas>

＆＃13;

＆＃13;

＆＃13;