JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.0/fabric.min.js"></script>
<div id="canvas-wrapper">
  <canvas id="c" class="canvas"></canvas>
</div>

CSS

.canvas {
  border: 1px solid #999;
}

JavaScript

var canvas = new fabric.Canvas('c');
var line = new fabric.Line([100, 50, 100, 100], {
	stroke: 'black',
  strokeWidth: 1
});
canvas.add(line);

$('#canvas-wrapper').mousewheel(function(e) {
  if (e.originalEvent.deltaY < 0) {
    canvas.setZoom(canvas.getZoom() * 1.1);
  } else {
    canvas.setZoom(canvas.getZoom() / 1.1);
  }
  console.log(canvas.getZoom());
});