JSFiddle - React, Tailwind, and code Playground

by m1erickson

HTML

<h4>Drag image anchors</h4>
<canvas id="canvas" width=300 height=300></canvas>

CSS

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

JavaScript

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var offsetX = canvas.offsetLeft;
var offsetY = canvas.offsetTop;
var isDown = false;

var iW;
var iH;
var iLeft = 50;
var iTop = 50;
var iRight, iBottom, iOrientation;

var img = new Image();
img.onload = function () {
    iW = img.width;
    iH = img.height;
    iRight = iLeft + iW;
    iBottom = iTop + iH;
    iOrientation = (iW >= iH) ? "Wide" : "Tall";
    draw(true);
}
img.src = "https://dl.dropboxusercontent.com/u/139992952/stackoverflow/facesSmall.png";

var border = 10;
var isLeft = false;
var isRight = false;
var isTop = false;
var isBottom = false;
var iAnchor;

canvas.onmousedown = handleMousedown;
canvas.onmousemove = handleMousemove;
canvas.onmouseup = handleMouseup;
canvas.onmouseout = handleMouseup;


function hitResizeAnchor(x, y) {

    // which borders are under the mouse
    isLeft = (x > iLeft && x < iLeft + border);
    isRight = (x < iRight && x > iRight - border);
    isTop = (y > iTop && y < iTop + border);
    isBottom = (y < iBottom && y > iBottom - border);

    // return the appropriate anchor
    if (isTop && isLeft) {
        return (iOrientation + "TL");
    }
    if (isTop && isRight) {
        return (iOrientation + "TR");
    }
    if (isBottom && isLeft) {
        return (iOrientation + "BL");
    }
    if (isBottom && isRight) {
        return (iOrientation + "BR");
    }
    if (isTop) {
        return ("T");
    }
    if (isRight) {
        return ("R");
    }
    if (isBottom) {
        return ("B");
    }
    if (isLeft) {
        return ("L");
    }
    return (null);
}

var resizeFunctions = {

    T: function (x, y) {
        iTop = y;
    },
    R: function (x, y) {
        iRight = x;
    },
    B: function (x, y) {
        iBottom = y;
    },
    L: function (x, y) {
        iLeft = x;
    },

    WideTR: function (x, y) {
        iRight = x;
        iTop = iBottom - (iH * (iRight - iLeft) / iW);
    },
    TallTR: function (x, y) {
   ...