Clickable CIrcle
find if mouse is inside circle
HTML
<canvas id="myCanvas" width="480" height="480" style="cursor:crosshair;background:url(https://media-exp1.licdn.com/mpr/mpr/shrinknp_200_200/AAEAAQAAAAAAAAo-AAAAJDE3MTU4MmI4LTVmZDctNDg2Zi05YzYyLWYwMWNmMzQ5N2JhNQ.jpg) no-repeat; background-size: cover;"></canvas>
JavaScript
var canvas = document.getElementById('myCanvas');
var context = document.getElementById("myCanvas").getContext("2d");
var button = new Object();
button.x = 100;
button.y = 100;
button.r = 25;
button.rgb = "rgb(0, 0, 255)";
var buttontwo = new Object();
buttontwo.x = 200;
buttontwo.y = 200;
buttontwo.r = 25;
buttontwo.rgb = "rgb(0, 0, 255)";
var buttonthree = new Object();
buttonthree.x = 300;
buttonthree.y = 200;
buttonthree.r = 25;
buttonthree.rgb = "rgb(0, 0, 255)";
var buttonfour = new Object();
buttonfour.x = 400;
buttonfour.y = 200;
buttonfour.r = 25;
buttonfour.rgb = "rgb(0, 0, 255)";
var buttonfive = new Object();
buttonfive.x = 300;
buttonfive.y = 400;
buttonfive.r = 25;
buttonfive.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);
drawbutton(buttontwo);
drawbutton(buttonthree);
drawbutton(buttonfour);
drawbutton(buttonfive);
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 if (checkIfInsideButtonCoordinates(buttontwo, mouseX, mouseY)) {
buttontwo.rgb = "rgb(0, 255, 0)";
drawbutton(buttontwo);
} else if (checkIfInsideButtonCoordinates(buttonthree, mouseX, mouseY)) {
buttonthree.rgb = "rgb(0, 255, 0)";
...