Clickable Rectangle

find mouse inside rectangle

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