html - キャンバス上のユーザー描画領域にマウスがあります

Question

基本的に、ユーザーは画像をアップロードし、その上にペイントして結果を保存できます。その後、別のユーザーが写真を表示し、ペイントされたのと同じ領域をクリックすると、何かが起こります。したがって、ユーザー 1 は、写真に描画することで、ユーザー 2 がクリックできる領域を作成できます。

これで、アップロードのビットは問題なく、チュートリアルとサンプルの助けを借りてペイントすることができました。ただし、クリック可能な領域を定義するのは少し難しいです。長方形のようなものは簡単なので、例を作りました。

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');


 var button = new Object();
    button.x = 50;
    button.y = 50;
    button.width = 50;
    button.height = 50;
    button.rgb = "rgb(0, 0, 255)";
    function drawbutton(buttonobject)
    {
        context.fillStyle = buttonobject.rgb;
        context.fillRect (buttonobject.x, buttonobject.y, buttonobject.width, buttonobject.height);
        context.strokeRect(buttonobject.x, buttonobject.y, buttonobject.width, buttonobject.height);
    }
    drawbutton(button);


    function checkIfInsideButtonCoordinates(buttonObj, mouseX, mouseY)
    {
        if(((mouseX > buttonObj.x) && (mouseX < (buttonObj.x + buttonObj.width))) && ((mouseY > buttonObj.y) && (mouseY < (buttonObj.y + buttonObj.height))))
            return true;
        else
            return false;
    }

    $("#myCanvas").click(function(eventObject) {
        mouseX = eventObject.pageX - this.offsetLeft;
        mouseY = eventObject.pageY - this.offsetTop;

        if(checkIfInsideButtonCoordinates(button, mouseX, mouseY))
        {
            button.rgb = "rgb(0, 255, 0)";
            drawbutton(button);
        } else {
            button.rgb = "rgb(255, 0, 0)";
            drawbutton(button);
        }
    });

しかし、円のような他の形状や、誰かがページを窒息させている場合、それをどのように検出しますか?

私が考えていたのは、編集されたレイヤーを使用して非表示にし、ここから青色のピクセル色を検出することでしたが、それは写真の色の使用を制限し、それを実装する方法が完全にはわかりません. 他のアイデアはありますか？

編集：

ピタゴラスの定理を使用して、マウス座標が半径よりも小さいかどうかを確認して、いじくり回した後、円を見つけましたが、これは円の中心が0,0であることを前提としているため、円の実際の中心でマウスをオフセットします。例

function checkIfInsideButtonCoordinates(buttonObj, mouseX, mouseY) {
actualX = mouseX - buttonObj.x
actualY = mouseY - buttonObj.y
mousesqX = actualX * actualX
mousesqY = actualY * actualY
sqR = buttonObj.r * buttonObj.r
sqC = mousesqX + mousesqY

if (sqC < sqR) return true;
    else return false;
}