JSFiddle - React, Tailwind, and code Playground

by heldersepu

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.2/fabric.min.js"></script>
 <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  
<h2>  This is the test image </h2>

<img id='testImg' src="https://picsum.photos/seed/123/50/50" crossorigin="anonymous">
<h2>
 Fabric canvas
</h2>
<canvas id='c'></canvas>
<h2>Save canvas as an image</h2>
<div id='render'></div>

CSS

#c {
  border: 2px solid black;
}

#render {
  border: 2px solid red;
}

JavaScript

var canvas = new fabric.Canvas('c');
canvas.setHeight(200);
canvas.setWidth(200);

$("#testImg")[0].onload = function () {
  var newImg = new fabric.Image(this, { left: 0, top:0 });
  canvas.add(newImg);
  canvas.renderAll();
}


var newTextBox = new fabric.Textbox("Hello textbox", { left: 0, top: 100, width: 200 });
canvas.add(newTextBox);
canvas.renderAll();


//show the canvas image
var canvasUrl = canvas.toDataURL('png');
var canvasImg = $("<img id=canvasImg>");
canvasImg.attr('src', canvasUrl);
canvasImg.appendTo("#render");