HTML5 Canvas Example

HTML

<canvas id="canvas" width="480" height="320"></canvas>
<div id="hittest">Hit</div>

CSS

#hittest.red {
    color: red;
}

JavaScript

$(document).ready(function() {
    var $hittest = $("#hittest");
    
    var canvas=document.getElementById("canvas");
    var c = canvas.getContext("2d");
    var logoImg = new Image();
    var position = {
        x: 50,
        y: 50
    }
    
    logoImg.onload=function(){
        
        
        c.clearRect (0, 0, canvas.width, canvas.height);
        
        var grd = c.createLinearGradient(0, 0, canvas.width, canvas.height);
        grd.addColorStop(0, "#9db7a0");
        grd.addColorStop(1, "#e6e6e6");
        c.fillStyle = grd;
        c.fillRect (0, 0, canvas.width, canvas.height);
        
        c.drawImage(logoImg, position.x, position.y, logoImg.width, logoImg.height); 
    }
    logoImg.src="http://dl.dropbox.com/u/139992952/car.png"; 
    
    $(canvas).on('mousemove', function(e) {
        
         var hitted = e.clientX >= position.x && e.clientX <= position.x + logoImg.width && e.clientY >= position.y && e.clientY <= position.y + logoImg.height;
        
        $hittest.toggleClass('red', hitted);
    });
});