JSFiddle - React, Tailwind, and code Playground

by Steve Eberhardt

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.2.3/fabric.min.js"></script>

Canvas:
<canvas id="c" width="400" height="400" class="c"></canvas>
<p>
PNG:
</p>
<input type="button" id="toPNG" value="Update PNG" />

<div id="png">

</div>

CSS

#zoom-level {
  width: 40px;
}

#png img {
  width: 400px;
  height: 400px;
}

JavaScript

var canvas = new fabric.Canvas('c');
canvas.backgroundColor = "#ccc";

var obj = new fabric.Textbox('😒', {
  left: 10,
  top: 10,
  width: 150,
  fontSize: 350,
  textAlign: 'center',
});

canvas.add(obj);
exportPNG(); 

$('#toPNG').click(function() {
  exportPNG();  
});

function exportPNG(){
  var image = new Image();
  image.src = canvas.toDataURL({
    format: 'png',
    multiplier: 2
  });
  $('#png').html(image);
}