JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="tutorial" width="960" height="480"></canvas>  
<div id = "big">+</div>
<div id = "small">--</div>

CSS

canvas { border: 1px solid black; }

JavaScript

var scaleX = 1;
    var scaleY = 1;
    var startX;
    var startY;
    $(document).ready(function() {
        draw();
        var canvas = document.getElementById('tutorial');  
        var context = canvas.getContext("2d");
        var mousedown = false;
        $("#big").click(function() {
            scaleX = 1.5;
            scaleY = 1.5;
            console.log("Big Click")
            draw();
        });
        $("#small").click(function() {
            scaleX = .8;
            scaleY = .8;
            draw();
        });
        $("#tutorial").mousedown(function(e) {
            mousedown = true;
            startX = e.pageX;
            startY = e.pageY;
        });
        $("#tutorial").mouseup(function() {
            mousedown = false;
        });
        
        $("#tutorial").mousemove(function(e) {
            if (mousedown) {
                var positionX = (e.pageX - startX);
                var positionY = (e.pageY - startY);
                console.log(positionX);
                console.log(positionY);
                draw(positionX, positionY);
            } 
        });
        
    });

    function draw(positionX, positionY){  
        var canvas = document.getElementById('tutorial');  
        var context = canvas.getContext("2d");
        context.clearRect(0, 0, canvas.width, canvas.height);
        context.save();
        context.translate(positionX, positionY);
        context.scale(scaleX,scaleY);
        context.beginPath();  
        context.moveTo(0.86,89.48);
        context.lineTo(53.46,89.48);
        context.lineTo(53.46,60.16);
        context.lineTo(0.86,60.16);
        context.lineTo(0.86,89.48);
        context.closePath();
        context.stroke();
        
        context.beginPath();  
        context.moveTo(53.6,90.09);
        context.lineTo(116.35,90.09);
        context.lineTo(116.35,59.98);
        context.lineTo(53.6,59.98);
        context.lineTo(53.6,90.09);
        context.closePath();
       ...