JSFiddle - React, Tailwind, and code Playground

by Steve Eberhardt

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.4.0/fabric.min.js"></script>
<canvas id="canvas" width="800px" height="400px" style="border:1px solid black"></canvas>

JavaScript

let svg = '<svg width="800" height="400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><text id="svg_5" fill="#000000" x="20" y="50" width="400" height="50" font-size="25" font-family="sans">1. Edit this</text><text id="svg_6" fill="#000000" x="20" y="100" width="400" height="30" font-size="25" font-family="sans">2. then click here</text><text id="svg_7" fill="#000000" x="20" y="150" width="100" height="30" font-size="25" font-family="sans">3. text curser remain on 1.</text></svg>';

let canvas = new fabric.Canvas('canvas');
fabric.loadSVGFromString(svg, (objects, options) => {
    canvas.renderAll();
  },
  (item, object) => {
    var textobj = object.toObject();
    //delete textobj.type;
    
    let new_text = new fabric.Textbox(object.text, textobj);
    canvas.add(new_text);
    console.log(new_text.toObject().type)
  });

canvas.on("text:editing:exited", function(e) {
  console.log('updated text:', e.target.text);
});