Clickable CIrcle

find if mouse is inside circle

by rudigerkidd

HTML

<canvas id="myCanvas" width="578" height="200"></canvas>

JavaScript

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


var button = new Object();
button.x = 100;
button.y = 100;
button.r = 50;
button.rgb = "rgb(0, 0, 255)";

function drawbutton(buttonobject) {
    context.beginPath();
    context.arc(buttonobject.x, buttonobject.y, buttonobject.r, 0, 2 * Math.PI, false);
    context.fillStyle = buttonobject.rgb;
    context.fill();
    context.stroke();
}
drawbutton(button);


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

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