JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas" width="200px" height="200px" style="border:1px #000 solid;">

JavaScript

var canvas = new fabric.Canvas('canvas');
globscale=1;
var circle = new fabric.Circle({
    radius: 20, fill: 'green', left: 100, top: 100
});
var triangle = new fabric.Triangle({
    width: 20, height: 30, fill: 'blue', left: 50, top: 50
});
canvas.add(circle, triangle);

function displaywheel(e){
    var SCALE_FACTOR = 1.1;
	var evt=window.event || e
	var delta=evt.detail? evt.detail*(-120) : evt.wheelDelta
	var objects = canvas.getObjects();
	var dd = 1;
	if (delta == 120) dd=SCALE_FACTOR;
	if (delta == -120) dd=1/SCALE_FACTOR;
	globscale = globscale * dd;
    for (var i in objects) {
		objects[i].scaleX = globscale;
		objects[i].scaleY = globscale;
		objects[i].left = objects[i].left * dd;
		objects[i].top = objects[i].top * dd;
		objects[i].setCoords();
	}
	canvas.renderAll();
    canvas.calcOffset();
}
var mousewheelevt=(/Firefox/i.test(navigator.userAgent))? "DOMMouseScroll" : "mousewheel"
if (document.attachEvent) document.attachEvent("on"+mousewheelevt, displaywheel) 
else if (document.addEventListener) document.addEventListener(mousewheelevt, displaywheel, false)