JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas" width="600" height="600"></canvas>

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: #666;
}

#canvas {
  background: #f1f1f1;
  margin: 50px;
  border: 2px solid #2b2b2b;
}

JavaScript

/*
    get canvas element
     */
    var $jqueryCanvas = $('#canvas');

    /*
    init all variables
     */
    var canvas = document.getElementById('canvas'),
        canvasContext = canvas.getContext('2d'),
        canvasOffset = $jqueryCanvas.offset(),
        offsetX = canvasOffset.left,
        offsetY = canvasOffset.top,
        startX,
        startY,
        isDown = false,
        pi2 = Math.PI * 2,
        resizerRadius = 8,
        rr = resizerRadius * resizerRadius,
        draggingResizer = {x: 0,  y: 0},
        imageX = 0,
        imageY = 0,
        imageWidth,
        imageHeight,
        imageRight,
        imageBottom,
        draggingImage = false;

    var userImage = new Image();

    userImage.onload = function () {

        oImageWidth = userImage.width;
        oImageHeight = userImage.height;

        imageWidth = oImageWidth;
        imageHeight = oImageHeight;

        imageRight = imageX + imageWidth;
        imageBottom = imageY + imageHeight;

        drawImage();

    };

    userImage.src = 'https://c2.staticflickr.com/8/7301/11186264136_7860190995_n.jpg';

    /**
     * draw image, four circles and embed shape
     */
    function drawImage(clearCanvas, withTransparency, opacity) {

        var toClear = clearCanvas || true;
        var hasOpacity = withTransparency || false;
        var imageOpacity = opacity || 0.5;

        /*
            clear canvas
        */
        if ( toClear )
            canvasContext.clearRect(0, 0, canvas.width, canvas.height);

        /*
            draw image
        */
        if ( hasOpacity )
            canvasContext.globalAlpha = imageOpacity;

        canvasContext.drawImage(userImage, 0, 0, imageWidth, imageHeight, imageX, imageY, imageWidth, imageHeight);
        canvasContext.globalAlpha = 1;

    }

    function hitImage(x, y) {

        return ( x > imageX && x < (imageX + imageWidth) && y > imageY && y < (imageY + imageHeight) );

    }

    function handleMouseDown(e) {

       ...