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

Enter Text<input type="text" id="txtInput" id= onchange="changeText()" />

<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");
canvas1.on('object:scaling', onObjectScaled);
canvas1.on('object:modified', objectModified);
paper.install(window);
paper.setup(canvas);
var scaledObject;
var scaledObjectCordinates = {
	scaleX: 1,
	scaleY: 1,
	left: 100,
	top: 200
};
var pathgroup;


function onObjectScaled(e)
{
	if (e.target.type === 'path') {
		scaledObject = e.target;
	}
    
}
function objectModified(e)
{
	console.log('modi:',e.target);
	scaledObjectCordinates.left = e.target.left;
	scaledObjectCordinates.top = e.target.top;
	scaledObjectCordinates.scaleX = e.target.scaleX;
	scaledObjectCordinates.scaleY = e.target.scaleY;
	if (e.target.type === 'path') {
		scaledObject = e.target;
		
		scaledObject.left = e.target.left;
		scaledObject.top = e.target.top;
		paper.project.activeLayer.removeChildren();
		paper.view.draw();
		paperPath = addPath();
		
		
		resetPath(pathText, paperPath);
	}
    
	addCurvePathText();
	
}


function resetPath(str, path) {
	var items = pathTextGroup._objects;
        
        pathTextGroup._restoreObjectsState();
        canvas1.remove(pathTextGroup);
        
         
        canvas1.renderAll();
		
	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;
                }
            }
			var tt = items[i];
			if (tt) {
				if (centerOffs !== undefined) {
					pathPoint = path.getPointAt(centerOffs);
					glyphTexts[i].point = pathPoint;
					tan = path.getTangentAt(centerOffs); 
					tt.left = pathPoint.x;
					tt.top = pathPoint.y;
					tt.rotate(tan.angle);
				}
			   
				tt.setCoords();
			}	            
         
        }
		canvas1.remove(pathTextGroup);
		
		pathTextGroup = new fabric.Group(items, {
	  
		});
		...