JSFiddle - React, Tailwind, and code Playground

by oganez09

HTML

<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<canvas id="canvas" width="500" height="500" style="border: 1px solid #000;"></canvas>
<button id="addText">add Text</button>
<button id="remText">remove Text</button>
<textarea id="fabricText" style="display: none;"></textarea>

JavaScript

var canvas = new fabric.Canvas('canvas');
document.getElementById('addText').addEventListener('click', function (e) {
    var text = new fabric.Text('hello world', { left: 100, top: 100 });
    canvas.add(text);
});
document.getElementById('remText').addEventListener('click', function (e) {
    var objRem = canvas.getActiveObject();
    objRem.remove();
    $("#fabricText").hide().html();
    canvas.renderAll();
});
canvas.on('mouse:down', function() {
    var objAct = canvas.getActiveObject();
    if (objAct.type == "text") {
        $("#fabricText").show().html(objAct.getText());
    }
    canvas.renderAll();
});
document.getElementById('fabricText').addEventListener('keyup', function (e) {
    var obj = canvas.getActiveObject();
    if (!obj) return;
    obj.setText(e.target.value);
    canvas.renderAll();
});
// img
fabric.Image.fromURL('http://corser.ru/img/game.png', function(img) {
  img.scale(0.5).set({
    left: 150,
    top: 150,
    angle: -15
  });
  canvas.add(img).setActiveObject(img);
});

// нельзя выбирать несколько объектов
canvas.selection = false;
canvas.renderAll();