JSFiddle - React, Tailwind, and code Playground

HTML

<div class="parent">

<canvas id="canvas" width="600" height="300" style="position:absolute;width:600px;height:300px; border: 1px solid red;">
    
</canvas>
    
</div> <br/><br/>

<div id="cords"></div>

CSS

.parent{
position:relative;
    width:600px;
    height:300px;
    margin-left:20px;
}

JavaScript

function test(e){
    var coords = getxy(e,this);
    document.getElementById('cords').innerHTML = 'X '+coords.x+' | Y '+coords.y;
}

function getxy(event,el){
    canvasX = event.pageX - el.parentNode.offsetLeft,
    canvasY = event.pageY - el.offsetTop;
    return {x:canvasX, y:canvasY}
}

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

var img = new Image();
img.src = 'http://www.adiumxtras.com/images/thumbs/adiumtwit_twitters_icon_for_adium_1_31971_7892_thumb.png';
img.onload = function(){
        ctx.drawImage(img,10,10);
}

    c.addEventListener('click',test,false);