JSFiddle - React, Tailwind, and code Playground

HTML

<div id="bg" style="">
    <canvas id="canvas" style="margin-top:32px;margin-left:65px;" width=243 height=150></canvas>
</div>
<br>Click and drag the image or drag the dots to resize.
<br>
<br>Text:
<input type="textarea" id="words" value="" />
<input type="file" id="imageLoader" name="imageLoader" />

CSS

#bg {
    width:375px;
    height:187px;
    background-image:url(http://teckstyle.co.uk/communities/3/004/012/270/953//images/4608565102.jpg);
}
body {
    padding:0px;
}
#canvas {
    border:1px solid red;
}

JavaScript

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

var Input = document.getElementById('words');
var x = 10;
var y = 30;
ctx.font = "bold 20px sans-serif";
ctx.fillStyle = "black";
$('#words').keyup(function () {
    ctx.fillText($("#words").val(), x, y);
});

var imageLoader = document.getElementById('imageLoader');
imageLoader.addEventListener('change', handleImage, false);

function handleImage(e) {
    var reader = new FileReader();
    reader.onload = function (event) {
        var img = new Image();
        img.onload = function () {
            canvas.width = img.width;
            canvas.height = img.height;
            ctx.drawImage(img, 0, 0);
        }
        img.src = event.target.result;
    }
    reader.readAsDataURL(e.target.files[0]);
}

var canvasOffset = $("#canvas").offset();
var offsetX = canvasOffset.left;
var offsetY = canvasOffset.top;

var startX;
var startY;
var isDown = false;

var pi2 = Math.PI * 2;
var resizerRadius = 3;
var rr = resizerRadius * resizerRadius;
var draggingResizer = {
    x: 0,
    y: 0
};
var imageX = 39;
var imageY = 15;
var imageWidth, imageHeight, imageRight, imageBottom;
var draggingImage = false;
var startX;
var startY;

var img = new Image();
img.onload = function () {
    imageWidth = 165;
    imageHeight = 125;
    imageRight = imageX + imageWidth;
    imageBottom = imageY + imageHeight
    draw(true, false);
}
img.src = "http://teckstyle.co.uk/communities/3/004/012/270/953//images/4604129137_332x242.png";


function draw(withAnchors, withBorders) {

    // clear the canvas
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // draw the image
    ctx.drawImage(img, 0, 0, img.width, img.height, imageX, imageY, imageWidth, imageHeight);

    // optionally draw the draggable anchors
    if (withAnchors) {
        drawDragAnchor(imageX, imageY);
        drawDragAnchor(imageRight, imageY);
        drawDragAnchor(imageRight, imageBottom);
        drawDragAnchor(imageX,...