0

I've an image which is 700x500 and the site sets the image as 300x300. ie: <img height="300px" weight="300px"> . I've to know if the image was clicked within the boundary layer or outside the boundary of an ellipse. Btw, based on the width and height of the image the x,y coordinates for the click changes.

bounding_box_area = (40, 150, 290, 380)

I have to draw an ellipse in the center.

I've tried the code below bu it is not working

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


        var posX = event.offsetX ? (event.offsetX) : event.pageX - img.offsetLeft;
        var posY = event.offsetY ? (event.offsetY) : event.pageY - img.offsetTop;

        var bodyRect = img.getBoundingClientRect();

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

ellipse(ctx,40, 150, 290, 380) 

function ellipse(context, cx, cy, rx, ry){
        context.save(); // save state
        context.beginPath();

        context.translate(cx-rx, cy-ry);
        context.scale(rx, ry);
        context.arc(1, 1, 1, 0, 2 * Math.PI, false);

        context.restore(); // restore to original state
        context.stroke();
}
jason
  • 3,932
  • 11
  • 52
  • 123
  • Can you clarify a bit please ? Also, maybe you could post more code to help us understand your issue – Serge K. Sep 29 '17 at 08:26
  • I have a possible work around idea if you would be interested to try it, 1. You can create a complex grid system and check if your x and y is in the space using linear graphs system, or you can use a fake transparent image as your eclipse then you will know where the click was. – Renier Sep 29 '17 at 08:32
  • Not sure if there's a function in jquery that you can use for this. – Renier Sep 29 '17 at 08:33
  • related: [Detect if user clicks inside a circle](https://stackoverflow.com/questions/16792841/detect-if-user-clicks-inside-a-circle) – adiga Sep 29 '17 at 08:33
  • @Renier That's what I had in mind but I've no idea how to proceed. – jason Sep 29 '17 at 08:38
  • @NathanP. Let me know what else you need to understand the problem. – jason Sep 29 '17 at 08:39
  • @jason Check the posting of adiga above the first answer in that post could work for you , you need to check if you click is in the radius of the circle. – Renier Sep 29 '17 at 08:42
  • @adiga I've tried the code but it's similar to this case but for some reason it's not working properly. I'll look into it :) – jason Sep 29 '17 at 09:12
  • @Renier Yup. I just tried that it's not working properly but it's similar. – jason Sep 29 '17 at 09:12

0 Answers0