imagen sobre canvas con z-index

[mayid]

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?

[memoadian]

Me gustaría ver ese efecto, ¿se puede ver online?

a lo mejor así podemos ver mejor por que se superpone.

[mayid]

Listo. El problema era que la imagen era un png, con transparencia. Es decir, el dibujo tenía una transparencia. Por eso se veía el fondo!

[memoadian]

Que bien, si no se puede ver, pues no se puede