Responding to the Mouse on Canvas

by Robert Mochel

HTML

<canvas width="400" height="400" id="myCanvas"></canvas>
<div id="mousepos"></div>
<div id="rectpos"></div>

JavaScript

$('#myCanvas').click(function(e){
    var offsetX = $('#myCanvas').offset().left;
    var offsetY = $('#myCanvas').offset().top;
    
   mouseClicked(e.pageX - offsetX , e.pageY - offsetY);
});    


var timer = window.setInterval(callAnimation, 30);

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

window.requestAnimFrame = (function (callback) {
    return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) {
        window.setTimeout(callback, 1000 / 60);
    };
})();

var step = 2;

var yellowRectangle = {
    x: 200,
    y: 200,
    xstep: 2,
    ystep: 1,
    width: 20,
    height: 20,
    movement: 'xy',
    borderWidth: 1,
    borderColor: 'black',
    fillColor: 'yellow', 
    currentColor: 'yellow'
};

var greenRectangle = 
 {
    x: 125,
    y: 200,
    xstep: 0,
    ystep: 1,
    width: 10,
    height: 75,
     movement: 'y',
    borderWidth: 1,
    borderColor: 'black',
    fillColor: 'green', 
    currentColor: 'green' 
};

var pinkRectangle = 
 {
    x: 100,
    y: 250,
    xstep: 1,
    ystep: 1,
    width: 20,
    height: 20,
    movement: 'xy',
    borderWidth: 1,
    borderColor: 'black',
    fillColor: 'pink', 
    currentColor: 'pink' 
};

var rectangles = new Array();
rectangles[0] = yellowRectangle;
rectangles[1] = greenRectangle;
rectangles[2] = pinkRectangle;


function drawRectangle(r, c) {
    c.beginPath();
    c.rect(r.x, r.y, r.width, r.height);
    c.fillStyle = r.currentColor;
    c.fill();
    c.lineWidth = r.borderWidth;
    c.strokeStyle = r.borderColor;
    c.stroke();
}

function callAnimation() {
    requestAnimFrame(function () {
        animate(rectangles, canvas, context);
    });
}

function mouseClicked(mx, my)
{
    $('#mousepos').html(mx + ":" + my);
    
    for (var i=0; i<rectangles.length; i++)
    {
        if (pointIsInRectangle(mx,...