JSFiddle - React, Tailwind, and code Playground

by 20yco

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<button id="btnAddText" >Add Text</button>
<canvas id="divPad" style="height: 500px; width: 500px"></canvas>

JavaScript

var canvas = new fabric.Canvas('divPad', {
      width: $("#divPad").width(),
      height: $("#divPad").height()
  });


  $("#btnAddText").click(function () {

      var text = new fabric.Text("Testing", {
          fontSize: 50,
          fill: "green",
          top: 50,
          left:50
      }); 
      canvas.add(text);
      text.globalCompositeOperation = 'source-atop';
      canvas.renderAll();
  });
  var background;
  fabric.Image.fromURL('http://www.clipartbest.com/cliparts/Rid/Bjo/RidBjoni9.png', function (objects, options) {
      background = objects;
      background.set({
          left: 0,
          top: 0,
          scaleY: canvas.height / background.width,
          scaleX: canvas.width / background.width,
      });
      canvas.add(background);
      canvas.renderAll();
  });