JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://calebevans.me/projects/jcanvas/resources/jcanvas/jcanvas.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jcanvas/21.0.0/jcanvas.js"></script>
<button id='toggle-zoom'>Toggle Zoom</button>
<canvas width='450' height='400'></canvas>

CSS

canvas {
    border: solid 1px #000;
}

JavaScript

// Cache canvas and grid properties
var $canvas = $('canvas');
var canvasW = $canvas.width();
var canvasH = $canvas.height();

$canvas
// Create layer for scaling entire canvas
.scaleCanvas({
    layer: true,
    name: 'zoom',
    x: canvasW / 2, y: canvasH / 2,
    scale: 1
})
// Draw a draggable red rectangle
.drawRect({
    layer: true,
    draggable: true,
    fillStyle: '#c33',
    x: 150, y: 150,
    width: 140, height: 80,
})
// Draw a draggable blue circle
.drawArc({
    layer: true,
    draggable: true,
    fillStyle: '#36c',
    x: 250, y: 250,
    radius: 50
})
// Restore zoom level before next redraw
.restoreCanvas({
    layer: true
});

// Function for setting zoom level of canvas
function zoomCanvas(diff) {
    // Update zoom level
    $canvas.setLayer('zoom', {
        scale: diff
    });
    // Redraw canvas
    $canvas.drawLayers();
}

// Click a button to toggle zoom
var zoomed = false;
$('#toggle-zoom').on('click', function() {
    if (zoomed === false) {
        zoomCanvas(1.25);
    } else {
        zoomCanvas(1.0);
    }
    zoomed = !zoomed;
});