Aplicar efecto Canvas

[m3cubo]

Saludos a todos,

tengo unos iconos a los que quiero aplicar un efecto Canvas, en el que estos tengan una tonalidad grisácea y al pasar el cursor por ellos se iluminen (es decir, vuelva a su color original).

El código que uso detecta el primer elemento canvas y aplica el efecto Canvas.
Pero al tener varias imágenes a las que quiero aplicarles el efecto, son ignoradas por ir "detrás" en el DOM. Es decir, el script actual sólo detecta el primer tag "<canvas>" y el resto no.


Este es el código:

Función Javascript para el Canvas:

Código Javascript:

(function() {
             var supportsCanvas = !!document.createElement('canvas').getContext;
             supportsCanvas && (window.onload = greyImages);
     
             function greyImages() {
                var ctx = document.getElementsByTagName('canvas')[0].getContext('2d'),
                img = document.getElementById('mycanvas'),
                imageData, px, length, i = 0,
                red, green, blue, grey;
     
                ctx.drawImage(img, 0, 0);
     
                imageData = ctx.getImageData(0, 0, 640, 400);
                px = imageData.data;
                length = px.length;
     
                for ( ; i < length; i+= 4 ) {
                   // rgba
                   grey = 0.3*px[i] + 0.59*px[i+1] + 0.11*px[i+2];
                   px[i] = px[i+1] = px[i+2] = grey;
                }
     
                ctx.putImageData(imageData, 0, 0);
             }
          })();
 

Código HTML.

Código HTML:

/*Esta imagen recibe el efecto*/
     
    <img src="imagen1.png" class="icono" [B]id="mycanvas"[/B] />
    [B]<canvas width=50 height=50></canvas>[/B]
     
    /*Esta imagen no recibe el efecto*/
     
    <img src="imagen2.png" class="icono" [B]id="mycanvas"[/B] />
    [B]<canvas width=50 height=50></canvas>[/B]
 

Me he puesto a toquetear el Javascript, pero nada. También he buscado, pero no he encontrado nada parecido.


En resumen: Lo que quiero es que, teniendo una sola función Javascript, baste con poner la misma clase a una imagen para que aplique a todas las que tengan esa clase en común el mismo efecto de Canvas (de "iluminar" una imagen).


Estoy bastante perdido. ¿Alguien sabe solucionar esto? Gracias.