JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.4.0/fabric.min.js"></script>
<canvas id="canvas" width=400 height=300></canvas>
<button id="hexagon">Hexagon</button>
<button id="octagon">Octagon</button>
<button id="circle">Circle</button>
<button id="triangle">Triangle</button>
<button id="rectangle">Rectangle</button>
<button id="square">Square</button>
<button id="oval">Oval</button>
<button id="clear">Clear </button>
<br>
<button id="addImage">Add Image</button>
<!-- <button id="backgroundImage">Add background Image</button> -->
<br>
<br>
<div style="margin:10px 0"></div>
<select id="colors">
<option>red</option>
<option>blue</option>
<option>green</option>
</select>
<button id="changeBackgroundColor">Change background color</button>
<br>
<br>

<button id="changeGradient">change gradient</button>
<input type="range" min="0" max="100" id="rangeGradient"/>

CSS

#canvas {
  border: 1px solid blue;
}

JavaScript

// create a wrapper around native canvas element (with id="c")


var canvas = new fabric.Canvas('canvas');
document.getElementById("clear").addEventListener("click", clearThisCanvas)
document.getElementById("hexagon").addEventListener("click", addHexaGon)
document.getElementById("octagon").addEventListener("click", addOctagon)
document.getElementById("circle").addEventListener("click", addCircle)
document.getElementById("rectangle").addEventListener("click", addRectangle)
document.getElementById("triangle").addEventListener("click", addTriangle)
document.getElementById("square").addEventListener("click", addSquare)
document.getElementById("addImage").addEventListener("click", addThisImage)
document.getElementById("changeBackgroundColor").addEventListener("click", updateBackgroundColor);
document.getElementById("changeGradient").addEventListener("click", changeGradient);
document.getElementById("rangeGradient").addEventListener("change", rangeGradient)
document.getElementById("rangeGradient").setAttribute("max",canvas.getObjects().width);

document.getElementById("oval").addEventListener("click", addOval);





function rangeGradient(){
    var rangeVal = document.getElementById("rangeGradient").value;
    var colorVal = canvas.getObjects()[0].fill;
    updateGradient(colorVal,rangeVal);
}
function updateGradient(color,val){
    var ValGrad = val || canvas.getObjects()[0].width ;
        canvas.getObjects()[0].setGradient('fill', {
        type: 'linear',
        x1: -ValGrad ,
        y1: 0,
        x2: ValGrad ,
        y2: 0,
        colorStops: {
            0: color,
            1: '#000'
        }
    })
    canvas.renderAll()
}
function changeGradient(gradientVal){
var colorVal = canvas.getObjects()[0].fill;
updateGradient(colorVal)
}

function addOctagon(){
 clearThisCanvas();
var size = canvas.height-14;
var side = Math.round((size * Math.sqrt(2)) / (2 + Math.sqrt(2)));
var octagon = new fabric.Polygon([
  {x:-side / 2, y:size / 2},
  {x:side / 2, y:size...