Aplicar efecto Canvas a varios elementos

[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).

Me funciona para que una imagen reciba el efecto, pero mi pregunta es, ¿se puede aplicar un efecto Canvas a varios elementos, como si fuese una clase CSS?
¿Cómo puedo hacerlo?

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 (Imágenes).

Código HTML:

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

Me he puesto a toquetear el Javascript, pero nada. También he buscado, pero no he encontrado nada parecido. Tengo poca experiencia con Canvas, pero supongo que lo que quiero hacer es perfectamente factible.


Saludos!