JSFiddle - React, Tailwind, and code Playground

by mstalfoort

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;
        scaleY = 1,
        startx = 0,
        starty = 0,
        deltax = 0,
        deltay = 0;
    $(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 - deltax;
            starty = e.pageY - deltay;
            deltax = 0;
            deltay = 0;
        });
        $("#tutorial").mouseup(function() {
            mousedown = false;          
        });
        
        $("#tutorial").mousemove(function(e) {
            if (mousedown) {
                deltax = (e.pageX - startx);
                deltay = (e.pageY - starty);
                console.log(startx+" + "+deltax+"/"+starty+" + "+deltay);
                draw(deltax, deltay);
            } 
        });
        
    });

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