JSFiddle - React, Tailwind, and code Playground

by intrinsica

HTML

<h4 id=screen>Screen Coordinates:</h4>
<h4 id=transformed>Transformed Coordinates:</h4>
<h4 id=trx>Pan & Scale</h4>
<button id=scaledown>Scale Down</button>
<button id=scaleup>Scale Up</button>
<button id=panleft>Pan Left</button>
<button id=panright>Pan Right</button>
<br>
<div style="max-width:200px;">
<canvas id="canvas" width=400 height=400></canvas>
</div>

CSS

body{ background-color: ivory; }
#canvas{border:1px solid red;}

JavaScript

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var $canvas = $("#canvas");
var canvasOffset = $canvas.offset();
var offsetX = canvasOffset.left;
var offsetY = canvasOffset.top;
var scrollX = $canvas.scrollLeft();
var scrollY = $canvas.scrollTop();
var cw = canvas.width;
var ch = canvas.height;

var scaleFactor = 1.00;
var panX = 0;
var panY = 0;

var circleX = 200;
var circleY = 200;

var $screen = $("#screen");
var $transformed = $("#transformed");
var $trx = $("#trx");

drawTranslated();

$("#canvas").mousemove(function (e) {
    handleMouseMove(e);
});
$("#scaledown").click(function () {
    scaleFactor /= 1.1;
    drawTranslated();
});
$("#scaleup").click(function () {
    scaleFactor *= 1.1;
    drawTranslated();
});
$("#panleft").click(function () {
    panX -= 10;
    drawTranslated();
});
$("#panright").click(function () {
    panX += 10;
    drawTranslated();
});


function drawTranslated() {
    ctx.clearRect(0, 0, cw, ch);

    ctx.save();
    ctx.translate(panX, panY);
    ctx.scale(scaleFactor, scaleFactor);

    ctx.beginPath();
    ctx.arc(circleX, circleY, 15, 0, Math.PI * 2);
    ctx.closePath();
    ctx.fillStyle = randomColor();
    ctx.fill();

    ctx.restore();

    $trx.text("Pan: " + panX + ", Scale: " + scaleFactor);
}

function handleMouseMove(e) {
    e.preventDefault();
    e.stopPropagation();

    var mouseX = parseInt(e.clientX - offsetX);
    var mouseY = parseInt(e.clientY - offsetY);

    var mouseXT = parseInt((mouseX - panX) / scaleFactor);
    var mouseYT = parseInt((mouseY - panY) / scaleFactor);

    $screen.text("Screen Coordinates: " + mouseX + "/" + mouseY);

    $transformed.text("Transformed Coordinates: " + mouseXT + "/" + mouseYT);
}


function randomColor() {
    return ('#' + Math.floor(Math.random() * 16777215).toString(16));
}