在javascript

Question

我的图片 700x500 ，网站将图片设置为 300x300 。即：<img height="300px" weight="300px">。我要知道图像是在边界层内还是在椭圆边界外点击。顺便说一下，根据图像的宽度和高度，点击的x，y坐标会发生变化。

bounding_box_area = (40, 150, 290, 380)     

我必须在中心画一个椭圆。

我已经尝试过以下代码，但它无法正常工作

        <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();
}