JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<canvas id="canvas" width="300" height="300"></canvas> <br/>
<button id="replace"> Replace </button>

CSS

#canvas {
  border: 1px solid;
}

JavaScript

// Fabric js - Get All Properties of Text Object

var canvas = ctx = activeObject = text1 = text2 = '';
var textProperties = ['angle', 'backgroundColor', 'clipTo', 'fill', 'fillRule', 'flipX', '


', 'fontFamily', 'fontSize', 'fontStyle', 'fontWeight', 'globalCompositeOperation', 'height', 'id', 'left', 'letterSpace', 'lineHeight', 'opacity', 'originX', 'originY', 'scaleX', 'scaleY', 'shadow', 'stroke', 'strokeDashArray', 'strokeLineCap', 'strokeLineJoin', 'strokeMiterLimit', 'strokeWidth', 'text', 'textAlign', 'textBackgroundColor', 'textDecoration', 'top', 'transformMatrix', 'visible', 'width'];

console.clear();
canvas = new fabric.Canvas('canvas');
ctx = canvas.getContext('2d');

text1 = new fabric.Text('Text1', {
});

text1.set('fill', 'red');
text1.set('left', 50);
text1.set('top', 110);


text2 = new fabric.Text('Text2', {
	fill: 'green',
	left: 150,
  top: 50
});

canvas.add(text1, text2).renderAll().setActiveObject(text1);
activeObject = canvas.getActiveObject();

$(document).on('click', '#replace', function(e) {
	e.preventDefault();
  
  console.log('Enter');
  for(var i=0; i<textProperties.length; i++) {
  	var property = textProperties[i];
    text2.set(property, activeObject.get(property));
  }
  canvas.renderAll().setActiveObject(text2);
  console.log('Exit');
});