Draw circle with FabricJS

by Vijay Gujar

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.17/fabric.min.js"></script>
<script src="https://two.js.org/third-party/two.js"></script>
 Please draw circle here

<div id="canvasContainer">
  <canvas id="canvas" width="400" height="400" style="border: solid 1px"></canvas>
</div>

JavaScript

var two = new Two({
	fullscreen: true
}).appendTo(document.body);

var canvas = new fabric.Canvas('canvas');
//var circle = new Circle(canvas);
var circle = new fabric.Circle({radius: 100,
                 fill: '',
                 stroke: 'red',
                 strokeWidth: 3,
                 originX: 'center', 
                 originY: 'center' 
               });
            
            //canvas.add(circle);
            
var path = new fabric.Path('M 0 0 L 50 0 M 0 0 L 4 -3 M 0 0 L 4 3 z', {
    left: 100,
    top: 100,
    stroke: 'red',
    strokeWidth: 1,
    fill: false
});
canvas.add(path);
          
/* canvas.add(new fabric.IText('VJ', { 
      left: 50,
      top: 100,
      fontFamily: 'arial black',
      fill: '#333',
      fontSize: 20
}));
 */

var createAlignedText = function(str, path, style) {
    if (str && str.length > 0 && path) {
        // create PointText object for each glyph
        var glyphTexts = [];
        for (var i = 0; i < str.length; i++) {
            glyphTexts[i] = createPointText(str.substring(i, i+1), style);
            glyphTexts[i].justification = "center";
            canvas.add(glyphTexts[i]);
        }
        // for each glyph find center xOffset
        var xOffsets = [0];
        for (var i = 1; i < str.length; i++) {
            var pairText = createPointText(str.substring(i - 1, i + 1), style);
            pairText.remove();
            xOffsets[i] = xOffsets[i - 1] + pairText.width - 
                glyphTexts[i - 1].width / 2 - glyphTexts[i].width / 2;
        }
        console.log(path);
        // set point for each glyph and rotate glyph aorund the point
        for (var i = 0; i < str.length; i++) {
            var centerOffs = xOffsets[i];
            if (path.length < centerOffs) {
                if (path.closed) {
                    centerOffs = centerOffs % path.length;
                }  else {
                    centerOffs = undefined;
                }
            }
            if...