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>
 Paper Canvas

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

Fabric Canvas

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

JavaScript

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

paper.install(window);
paper.setup(canvas);
var createAlignedText = function(str, path, style) {
    if (str && str.length > 0 && path) {
        
        var glyphTexts = [];
        var glyphTexts1 = [];
        for (var i = 0; i < str.length; i++) {
            glyphTexts[i] = createPointText(str.substring(i, i+1));
            glyphTexts[i].justification = "center";
            
            glyphTexts1[i] = new fabric.IText(str.substring(i, i+1), { 
              fontFamily: 'Arial',
              fill: '#ff00ff',
              fontSize: 20,
              textAlign: 'center'
            });
            
            glyphTexts1[i].justification = "center";
        }
        
        var xOffsets = [0];
     var xOffsets1 = [0];
     //console.log(str.length)
        for (var i = 1; i < str.length; i++) {
            var pairText = createPointText(str.substring(i - 1, i + 1));
           
            
            xOffsets[i] = xOffsets[i - 1] + pairText.bounds.width - 
                glyphTexts[i - 1].bounds.width / 2 - glyphTexts[i].bounds.width / 2;
               
               var pairText1 = createFabricText(str.substring(i - 1, i + 1))
                             
                             xOffsets1[i] = xOffsets1[i - 1] + pairText1.width - 
                                 glyphTexts1[i - 1].width / 2 - glyphTexts1[i].width / 2;
               //console.log(pairText1.width,pairText.bounds.width, pairText1.text);
        }
        
        for (var i = 0; i < str.length; i++) {
        	var pathPoint;
          var tan;
            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 {
     ...