JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="myCanvas" height="480" width="720" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
    var canvas = document.getElementById('myCanvas');
    var context = canvas.getContext('2d');
    var imageObj = new Image();

    imageObj.onload = function() {
        context.drawImage(imageObj, 250, 150, 50, 50);
    };
    imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';
</script>

CSS

body {
    margin: 0px;
    padding: 0px;
}
#myCanvas {
    width:100%;
    height:100%;
    display: table;
    border: 2px solid black;
    max-height:480px;
    max-width:720px;
}

JavaScript

function getElementCSSSize(el) {
    var cs = el.getBoundingClientRect();
    return {
        width: cs.width,
        height: cs.height
    }
}

$(document).ready(function () {

    $("#myCanvas").click(function (event) {

        var rect = this.getBoundingClientRect();
        var scaleX = this.width / rect.width;
        var scaleY = this.height / rect.height;

        var mouseX = Math.round((event.clientX - rect.left) * scaleX);
        var mouseY = Math.round((event.clientY - rect.top ) * scaleY);

        var x = 250;
        var y = 150;
        var w = 50;
        var h = 50;

        if (mouseX >= x && mouseX <= x + w && mouseY >= y && mouseY <= y + h) {
            alert("You clicked on image");
        }
    });
});