title: Adding a border to circle object fabricjs
body: <p>I'm trying to add a border to a circle. The only round about way I can think of is by adding another circle underneath it. Is there a better way?</p>
  
  <p>fiddle: <a href="http://jsfiddle.net/9mqqh3of/4/" rel="nofollow noreferrer">http://jsfiddle.net/9mqqh3of/4/</a></p>
  
  <p>PS: having trouble centering it too.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;canvas id="c" width="300" height="300"&gt;&lt;/canvas&gt;
  </code></pre>
  
  <p>Javascript:</p>
  
  <pre><code>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);
  </code></pre>