JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas"></canvas>

CSS

#canvas {
   border: 2px solid;
}

JavaScript

canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");
canvas.width = 500;
canvas.height = 500;

var ox = 0;
var oy = 0;
var zoom = 1;
var objects = [];

function drawCanvas() {
	ctx.clearRect(0,0, canvas.width, canvas.height);
  for (i=0;i<objects.length;i++) {
  	var obj = objects[i];
    ctx.fillStyle = obj.col;
  	ctx.fillRect(obj.x*zoom, obj.y*zoom, obj.h*zoom, obj.h*zoom);
  }
}

for (i=0;i<100;i++) {
  var col = [
    Math.floor(Math.random()*255),
    Math.floor(Math.random()*255),
    Math.floor(Math.random()*255)
  ];
  objects.push({
	x: (Math.random()*canvas.height)*zoom,
  y: (Math.random()*canvas.width)*zoom,
  w: Math.random()*40,
  h: Math.random()*40,
  col: "rgb(" + col.join(",") +")"
  });
}

canvas.addEventListener("mousewheel", onmousewheel, false);
canvas.addEventListener("DOMMouseScroll", onmousewheel, false);

function onmousewheel(event) {
		var e = window.event || event;
    var x = e.offsetX;
    var y = e.offsetY;
    var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
	console.log(event);
  if (delta == 1) {
    zoom = zoom + 0.1*zoom;
  } else {
    zoom = zoom - 0.1*zoom;
  }
  
  if (zoom <= 1) {zoom = 1}
  drawCanvas();
}

drawCanvas();