JSFiddle - React, Tailwind, and code Playground

by InferOn

HTML

<script src="https://code.jquery.com/jquery-3.1.1.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" width="800" height="600"></canvas>
</div>

JavaScript

var canvas = new fabric.Canvas('c');

var text = new fabric.Text('Some text', {
  left: 100,
  top: 100
});
canvas.add(text);

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