JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script>
<canvas id="c" width="400" height="400"></canvas>

CSS

canvas {
    border: 1px dashed skyblue;
}

JavaScript

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

var pattern = new fabric.Pattern({
	source: 'https://cdn.seats.io/static/version/v198/chart-designer/grid.png',
  repeat: 'repeat'
});

canvas.backgroundColor = pattern;
setTimeout(function(){canvas.renderAll();}, 10);

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

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) {
        var delta = new fabric.Point(e.e.movementX, e.e.movementY);
        canvas.relativePan(delta);
        pattern.offsetX += e.e.movementX;
        pattern.offsetY += e.e.movementY;
        canvas.renderAll();
    }
});