JSFiddle - React, Tailwind, and code Playground

by Vijay Gujar

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.10.2/paper-full.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.17/fabric.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) {
        // 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] = new fabric.IText(str.substring(i, i+1), { 
              fontFamily: 'Arial',
              fill: '#ff00ff',
              fontSize: 20,
              textAlign: 'center',
              originX: 'center',
              originY: 'center',
            });
            
            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.bounds.width - 
                glyphTexts[i - 1].bounds.width / 2 - glyphTexts[i].bounds.width / 2;
               
               var pairText1 = createFabricText(str.substring(i - 1, i + 1))
                             //pairText1.remove();
                             xOffsets1[i] = xOffsets1[i - 1] + pairText1.width - 
                                 glyphTexts1[i - 1].width / 2 - glyphTexts1[i].width / 2;
               //console.log(xOffsets[i],xOffsets1[i],pairText1.width,pairText.bounds.width, pairText1.text);
        }
        // set point for each glyph and rotate glyph aorund the point
        for (var i = 0; i < str.length; i++) {
        	var pathPoint;
          var tan;
            var centerOffs = xOffsets[i];
            if (path.length < centerOffs) {
                if (path.closed) {
                ...