JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://250mils-transfer.s3.amazonaws.com/fabric05182015.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="convert"> Convert </button>

CSS

#canvas {
  border: 1px solid;
}

JavaScript

// Convert IText to TextBox

var canvas, ctx, activeObject, text, canvasJSON = '';
canvas = new fabric.Canvas('canvas');
ctx = canvas.getContext('2d');

text = new fabric.IText('Sample', {
	fill: 'red',
	left: 50,
  top: 50,
  border: "1px solid",
  borderColor :'blue'
});
canvas.add(text).renderAll().setActiveObject(text);
activeObject = canvas.getActiveObject();

$(document).on('click', '#convert', function(e){
	e.preventDefault();
  canvas.clear();
  var newText = new fabric.Textbox(activeObject.text, {
  	fill: 'green',
    height: activeObject.geight,
    left: 50,
    top: 10,
    width: 120,
  });
  canvas.add(newText).renderAll().setActiveObject(newText);
	activeObject = canvas.getActiveObject();
});