Tengo un canvas con una anmación. Se trata de una linea que se mueve, dejando una estela. El efecto de la estela se logra pintando el fondo una y otra vez con una opacidad baja:
Código HTML:
context.fillStyle = "rgba(255, 255, 255, "+bgOpacity+")";
context.fillRect(0, 0, canvas.width, canvas.height);
Esto, al poco de empezar, va pintando el background con un blanco casi transparente. La cuestion es que ese background, o mejor dicho el canvas mismo se esta superponiendo a una imagen que tiene z-index mas alto. Por que?
El codigo es mas o menos así:
Código HTML:
<img src="/images/header-bg.png" alt="" />
<canvas id="waves" width="1160" height="150"></canvas>
La imagen tiene z-index altisimo y el canvas z-index=1. Ambos tienen posicion absoluta. Por qué entonces la imagen es afectada por el canvas?