-1

I created an animation screen in javascript which is running about 20 frames per second. (I can do it faster, but 20fps is fine and have one eye on battery consumption.)

However, it can rain or get dark in the game, so I want to put a blue or grey hue over the scene.

The obvious idea is to have another canvas with a higher z value with the blue/grey hue on it. I can have that offscreen or onscreen depending on when it rains or gets dark.

Unfortunately, this is not a great solution as I need to capture touch/mouse events on the original canvas. This means the rain/dark/hue canvas would block the original canvas from receiving those events.

So is there any fast way of doing this? Again I want to keep an eye on battery consumption and speed. (I do not want to access and modify the image data of each pixel of the original canvas each frame.)

Is having the rain/dark canvas showing permantently but with transparent, blue or grey drawn once every 10 or so minutes (the typical gap between night/rain events). This could then capture the mouse events and the lower canvas has mouse/touch events turned off.

The only thing I do not like about that is when it is a clear day I would constantly have the gpu calculating colours for the screen when looking through a totally transparent canvas. That does not seem great.

Rewind
  • 2,554
  • 3
  • 30
  • 56
  • 1
    Use https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events `pointer-events: none;` but I don't see why you don't render this in the canvas.... Compositing with a div is probably more expensive than within the canvas – Ruan Mendes Sep 03 '19 at 17:56
  • 1
    Is this a HTML based application? If so you could solve this with CSS, by using either `pointer-events:none;` on the overlay or by adding a css filter such as `filter: grayscale(50%) contrast(50%);` to the canvas. – Moob Sep 03 '19 at 17:59

1 Answers1

1

If you really need to use 2 canvas, you can use the pointer-events: none CSS property so the clicks events go through the "filter" canvas.(Click through div to underlying elements)

If you are using a canvas library, there most likely is a layer system so you don't have to manage it by yourself.

Seblor
  • 6,947
  • 1
  • 25
  • 46