I am trying to determine if the user has clicked on an image drawn in a canvas element. Despite clicking on the image, nothing seems to be happening. The alert function is not being triggered and the last condition in the code never evaluates to true. Any suggestions?
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="wrapper">
<canvas id="game" height="500" width="700">
</canvas>
</div>
<script>
(function() {
var canvas = document.getElementById('game'),
context = canvas.getContext('2d'),
fps = 1,
character = Image(),
positions = [[125, 55], [480, 55], [125, 185], [480, 182], [125, 315], [480, 315]],
random, x, y, xc, yc = null;
canvas.addEventListener('click', function(event) {
xc = event.screenX - canvas.offsetLeft;
yc = event.screenY - canvas.offsetTop;
if((xc >= x) && (xc <= (x + character.width)) && (yc >= y) && (yc <= (y + character.height))) {
alert('X = ' + x + 'Y = ' + y);
}
}, true);
character.src = 'character.png';
setInterval(function() {
random = (Math.floor(Math.random() * 6));
random = positions[random];
x = random[0];
y = random[1];
context.clearRect(0, 0, canvas.width, canvas.height);
context.drawImage(character, x, y);
}, 1000 / fps);
}());
</script>
</body>
</html>