Update HTML5 canvas rectangle on hover?

Question

I\'ve got some code which draws a rectangle on a canvas, but I want that rectangle to change color when I hover the mouse over it.

The problem is after I\'ve drawn t

Answer 1

Consider this following code:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.rect(20,20,150,100);
ctx.stroke();

c.addEventListener("mouseover", doMouseOver, false);//added event to canvas

function doMouseOver(e){
    ctx.fillStyle = 'red';
    ctx.fill();
}

DEMO