JSFiddle - React, Tailwind, and code Playground

HTML

<button onClick="newAnimation()">new Animation</button>
<button onClick="addRect()">Rectangle</button>
<button onClick="addCircle()">Circle</button>
<canvas id="canvas" width="600" height="300"></canvas>

CSS

#canvas{
    background-color:gray
}

JavaScript

var canvas; 
window.newAnimation = function(){
   canvas = new fabric.Canvas('canvas');
}

window.addRect = function(){
    var rect = new fabric.Rect({
  left: 100,
  top: 100,
  fill: 'red',
  width: 20,
  height: 20,
});
    canvas.add(rect);

}

window.addCircle = function(){
    var circle = new fabric.Circle({
  radius: 20, fill: 'green', left: 100, top: 100
});
    canvas.add(circle);
}