1

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?

Lukas J.
  • 196
  • 1
  • 11

1 Answers1

2

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

jbalsas
  • 3,484
  • 22
  • 25
  • And how it should be for separated blocks? For example I move my mouse over first one and only first one changes color. Is it possible? – Lukas J. Aug 31 '12 at 17:49
  • To do that, you would need a mechanism for mouse detection. This a more complex issue to address. If you need this kind of functionality, you'd probably do better by using some kind of canvas framework. You can find a discussion about some of the existing [here](http://stackoverflow.com/questions/3474608/what-is-the-current-state-of-the-art-in-html-canvas-javascript-libraries-and-fra) – jbalsas Sep 02 '12 at 14:30