JSFiddle - React, Tailwind, and code Playground

by Steve Eberhardt

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.5.0/fabric.min.js"></script>
<canvas id="canvas" width="400" height="300" style="border:1px solid black"></canvas>
<input id="upload-picture" type="file"/>

JavaScript

var canvas = new fabric.Canvas('canvas');

const IText = new fabric.IText('Text', {
        originX: 'center',
        originY: 'center',
        top: canvas.getCenter().top,
        left: canvas.getCenter().left,
        fontSize: 30,
        fill: 'black',
        cornerSize: 15,
})
canvas.add(IText)

document.getElementById("upload-picture").onchange = function(e) {
  var reader = new FileReader();
  reader.onload = function(e) {
    var image = new Image();
    image.src = e.target.result;
    image.onload = function() {
      var img = new fabric.Image(image);
      img.set({
        left: 100,
        top: 100
      });
      img.scaleToWidth(200);
      canvas.add(img).setActiveObject(img).renderAll();
    }
  }
  reader.readAsDataURL(e.target.files[0]);
}