JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<button id="zoomIn">+</button>
<button id="zoomOut">-</button>
<div id="canvasContainer">
    <canvas id="c" width="800" height="400"></canvas>
</div>

CSS

#canvasContainer {
    border: dotted gray thin;
}

JavaScript

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

var circle = new fabric.Circle({
    radius: 20,
    fill: 'green',
    left: 100,
    top: 100,
    selectable: false
});

var triangle = new fabric.Triangle({
    fill: 'green',
    left: 200,
    top: 200,
    selectable: false
});
canvas.add(circle, triangle);

canvas.on('mouse:over', function (e) {
    e.target.setFill("#7BDBFF");
    canvas.renderAll();
});

canvas.on('mouse:out', function (e) {
    e.target.setFill('green');
    canvas.renderAll();
});

var panning = false;
canvas.on('mouse:up', function (e) {
    panning = false;
});

canvas.on('mouse:down', function (e) {
    panning = true;
});
canvas.on('mouse:move', function (e) {
    if (panning && e && e.e) {
        debugger;
        var units = 10;
        var delta = new fabric.Point(e.e.movementX, e.e.movementY);
        canvas.relativePan(delta);
    }
});

$(function () {
    $('#zoomIn').click(function () {
        canvas.setZoom(canvas.getZoom() * 1.1);
    });

    $('#zoomOut').click(function () {
        canvas.setZoom(canvas.getZoom() / 1.1);
    });
});