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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.10.2/paper-full.min.js"></script>
 Please draw circle here

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

JavaScript

var canvas = new fabric.Canvas("canvas");

paper.install(window);
paper.setup(canvas);
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";
        }
        // 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.bounds.width - 
                glyphTexts[i - 1].bounds.width / 2 - glyphTexts[i].bounds.width / 2;
        }
        // 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 (centerOffs === undefined) {
                glyphTexts[i].remove();
            } else {
                var pathPoint = path.getPointAt(centerOffs);
                glyphTexts[i].point = pathPoint;
                var tan = path.getTangentAt(centerOffs); 
                glyphTexts[i].rotate(tan.angle, pathPoint);
            }
        }
    }
}

// create a PointText object for a string and a style
var createPointText = function(str, style) {
    /* var text = new PointText() */;
    var text = new fabric.IText(str, { 
      left: 50,
      top: 100,
      fontFamily: 'Arial',
      fill: '#333',
	    fontSize: 50
		});

    
    return text;
}
var createPointText1 = function(str, style) {
    var text = new fabric.IText(str, { 
 ...