Question

I’m trying to change canvas color (gradient) on mouseover.

Now I have this code – http://jsfiddle.net/juodikis/p7htB/4/

How can I do it?

Answer 1

You can just parameterize your drawing function and then add the mouseover/mouseout events to your canvas to call the draw function with different parameters.

canvas.addEventListener(“mouseover”, function() {
draw(“#ff0000”, “#00ff00”, “#0000ff”);
});

canvas.addEventListener(“mouseout”, function() {
draw(“#474747”, “#6a6a6a”, “#b9b9b9”);
});​

where

var draw = function(color1, color2, shadow) {

[…]

  var lingrd = context.createLinearGradient(0, 0, 0, 195);
  lingrd.addColorStop(1, color1);
  lingrd.addColorStop(0, color2);
  context.fillStyle = lingrd;
  context.shadowColor = shadow; 

[…]

}

You can see this working in this fiddle