JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://rawgithub.com/kangax/fabric.js/master/dist/fabric.js"></script>
<canvas  width="400" height="400" id="canvasContainer"></canvas>
<img id="ten" style="border:2px solid;"/>

JavaScript

var canvas  = new fabric.Canvas('canvasContainer');
var rect = new fabric.Rect({
        left: 100,
        top: 100,
        fill:  "#FF0000",
        stroke: "black",
        width: 100,
        height: 100,
        strokeWidth: 10, 
    });
   
   
    canvas.add(rect);
     
canvas.renderAll();
var convertToImage=function(){
  canvas.deactivateAll().renderAll();  
  document.getElementById("ten").src=canvas.toDataURL('png'); 
}
convertToImage();