JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script>
<canvas id="canvas" width="300" height="300"></canvas> <br/>
<button id="reload"> Reload </button>
CSS
#canvas {
border: 1px solid;
}
JavaScript
// Load From JSON with Text Properties
var canvas, ctx, activeObject, text, canvasJSON = '';
canvas = new fabric.Canvas('canvas');
ctx = canvas.getContext('2d');
text = new fabric.Text('Sample', {
left: 50,
top: 50,
fill: 'red',
fontFamily : 'arial',
});
canvas.add(text).renderAll().setActiveObject(text);
activeObject = canvas.getActiveObject();
canvasJSON = JSON.stringify(canvas.toJSON());
$(document).on('click', '#reload', function(e){
e.preventDefault();
canvas.clear();
canvas.loadFromJSON(canvasJSON, canvas.renderAll.bind(canvas), function(o, object) {
canvas.setActiveObject(object);
});
});