JSFiddle - React, Tailwind, and code Playground

by solex16

HTML

<script src="https://rawgithub.com/kangax/fabric.js/master/dist/all.js"></script>
<canvas id="the-canvas"></canvas>

JavaScript

var canvas = new fabric.Canvas("the-canvas");
canvas.setDimensions({
    height: 600,
    width: 600,
    backgroundColor: "#f5f5f5"
});

var text = new fabric.IText("test", {
    fontSize: 60,
    textAlign: 'center',
    fill: 'black',
    top: 100,
    left: 100
});

var text1 = new fabric.IText("another test", {
    fontSize: 60,
    textAlign: 'center',
    fill: 'black',
    top: 130,
    left: 130
});

canvas.add(text);
//text.enterEditing();
canvas.add(text1);
canvas.setActiveObject(text1);
canvas.on('text:changed', function(e) {
    console.log("changed");
});

text1.on('editing:entered', function(e) {
    console.log("editing:entered");
});

text1.on('editing:exited', function(e) {
    console.log("editing:exited");
});

canvas.on('object:modified', function(e) {
    console.log("object:modified");
});