Bueno. Después de un breve descanso, parece que tenemos de nuevo una andanada de preguntas que a uno le da miedo responder.
Vamos a poner un poco de contexto,
m3cubo. Debo suponer que si estás trabajando con
canvas, entonces sabés javascript; porque este elemento ya no acepta atributos sino es a través de un escript. De otra forma, no lo podrías usar.
Pero mirando tu ejemplo (que deberías haber puesto completo, y entre etiquetas
[code] si lo vas a colorear) veo que tenés problemas incluso con HTML.
¿De verdad no te fijaste que tenés dos
id="mycanvas"? ¡Si hasta los destacaste! (O al menos, lo intentaste...)
Y en el escript ¿no viste que toma solamente el primero como referencia para dibujar el
canvas (que por el tamaño, supongo que cubre a los otros)?
Tu problema no tiene nada que ver con el
canvas. Es js elemental.
Al hacer
document.getElementsByTagName( 'canvas' )[0].getContext( '2d' )
estás apuntando a la primer etiqueta. Deberías recorrerlas todas.
Aunque tampoco estoy seguro de que con eso se arregle. Tu código está tan mal puesto, que tendría que adivinar más de una situación para saber.
Si tu efecto es grisar las imágenes, se hace con una capa gris, no hace falta cambiar erregebés.
Hay mil ejemplos en el Foro, pero hace poco hablamos de uno y lo encontré más fácil.
Fondo transparente elementos a full color
Aquí lo que se hacía era "aclarar" una imagen de fondo.
Y se puede hacer perfectamente con CSS.