JSFiddle - React, Tailwind, and code Playground

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');

function addFirstGroup() {
	var firstLine = new fabric.Line([0, 0, 0, 100], {
    strokeLineCap: 'round',
    strokeWidth: 2,
    stroke: '#070B7D'
  });
  var group = new fabric.Group([firstLine], {
    left: 100,
    top: 100
  });
  canvas.add(group);
}

function addSecondGroup() {
	var firstLine = new fabric.Line([0, 0, 0, 100], {
    strokeLineCap: 'round',
    strokeWidth: 2,
    stroke: '#070B7D'
  });
  var secondLine = new fabric.Line([0, 100, 100, 100], {
    strokeLineCap: 'round',
    strokeWidth: 2,
    stroke: '#070B7D'
  });
  var thirdLine = new fabric.Line([100, 100, 100, 0], {
    strokeLineCap: 'round',
    strokeWidth: 2,
    stroke: '#070B7D'
  });
  var group = new fabric.Group([firstLine, secondLine, thirdLine], {
    left: 100,
    top: 300
  });
  canvas.add(group);
}

addFirstGroup();
addSecondGroup();

$('#canvas-wrapper').mousewheel(function(e) {
	if (e.originalEvent.deltaY < 0) {
    var newZoom = canvas.getZoom() + 0.1;
  } else {
    var newZoom = canvas.getZoom() - 0.1;
  }
  canvas.setZoom(newZoom);
});