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>
<div id="canvasContainer1">
  <canvas id="canvas1" width="400" height="400" style="border: solid 1px"></canvas>
</div>

JavaScript

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

paper.install(window);
paper.setup(canvas1);
var createAlignedText = function(str, path, style,path1) {
    if (str && str.length > 0 && path) {
        // create PointText object for each glyph
        var glyphTexts = [];
        var glyphTexts1 = [];
        for (var i = 0; i < str.length; i++) {
            glyphTexts[i] = createPointText(str.substring(i, i+1), style);
            glyphTexts[i].justification = "center";
            glyphTexts1[i] = createPointText1(str.substring(i, i+1), style);
            glyphTexts1[i].justification = "center";
        }
        // for each glyph find center xOffset
        var xOffsets = [0];
        var xOffsets1 = [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;
                
                 var pairText1 = createPointText1(str.substring(i - 1, i + 1), style);
            pairText1.remove();
            xOffsets1[i] = xOffsets1[i - 1] + pairText1.bounds.width - 
                glyphTexts1[i - 1].bounds.width / 2 - glyphTexts1[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 = xOffsets1[i];
            
            if (path1.length < centerOffs) {
                if (path1.closed) {
                    centerOffs = centerOffs % path1.length;
                }  else {
                    centerOffs = undefined;
                }
            }
            if (centerOffs === undefined) {
                glyphTexts1[i].remove();
            } else {
                var pathPoint = getPointAt(centerOffs,path1);
                
                glyphTexts1[i].point = pathPoint;
                var tan =...