javascript - How to calculate X Y coordinates of image when window resize? -

i writing code putting small image on html canvas. generate click event on image. image have height(50), width(50), x-y coordinates(250, 150) , canvas have height(480), width(720).
when click on image getting alert("you clicked on image"). generating alert on wrong place when resize window small alert message generate on wrong place.

i want generate alert message on click on image. , if resize window(small) alert message should generated on click on image.
check fiddle-
[enter link description here][1]

  [1]: https://jsfiddle.net/u84p9qn1/ 

when canvas element , canvas bitmap has different sizes, need use factor scale mouse position fit relative in bitmap. can done dividing bitmap size on element size.

modified fiddle

$("#mycanvas").click(function (event) {      // size of element , divide bitmap size on     var rect = this.getboundingclientrect();     var scalex = this.width  / rect.width;     var scaley = this.height / rect.height;      // scale position: (first adjust, scale)     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");     } }