Veo que has dado "razones" de porqué no paras de postear sin pasarme algo de ayuda, pero voy a refutártelas, porque no eres el único/a que tiene tiempo libre para desvirtuar el tema.
Cita:
Iniciado por furoya 
Pedís una solución, y después resulta que no pediste una solución.
Claro que he pedido una solución, pero no me has proporcionado nada tangible para solucionarlo.
Cita:
Iniciado por furoya Posteás código suelto, y después resulta que insistís en que pusiste el documento completo.
Lo que te he dicho es que el código es el mismo. No cuesta imaginar los Tags HTMl, pero sí sirven para ofuscar el código. Si me molesto en ponerlo de forma separada, es para distinguirlo mejor. Más abajo pongo el código en el mismo recuadro, y verás que es lo mismo.
Cita:
Iniciado por furoya Te estoy describiendo tus líneas, pero la seguís conque no vi tu código.
Créeme, se me ocurrió lo del ciclo for y demás antes de postear (lo he probado varias veces pero así no lo he conseguido), pero también sigues con no soltar una línea de código de como se haría.
Cita:
Iniciado por furoya Tu modelo (según vos) funciona en el primero, pero sigue siendo problema del canvas
No terjiverses, por favor. Lo que hay que cambiar es la función Javascript, pero usando Canvas, que es lo que pareces ignorar.
Cita:
Iniciado por furoya Tu modelo (según vos) funciona en el primero, pero no es la falta de un mugroso y elemental bucle for() para seguir con los otros.
Pues al final, resulta que no. Lo que hacía falta era JQuery y aplicarlo a una determinada clase, que es como lo tengo actualizado, y así funciona. Así que deja ese for() del que no has puesto ni una línea de código.
Aquí tienes el mismo código, con los tag HTML.
Código HTML:
Ver original<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
(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);
}
})();
<img src="imagen1.png" class="icono"id="mycanvas" />
<img src="imagen2.png" class="icono" id="mycanvas" />
Como puedes ver y ya te dije varias veces,
es el mismo código.
Si tienes tanto orgullo que dices que "estabas haciendo un par de ejemplos" pero se te "quitaron las ganas al encontrarte con gente como yo", entonces guárdatelos, por favor. He venido a pedir ayuda, pero no a suplicarte.
He empezado pidiendo gracias por adelantado, y usuarios como Panino5001 me han pasado un ejemplo que casi era lo que necesitaba, en un único post.
Para 4 mensajes que has posteado, me has pasado un enlace cuyo planteamiento inicial no era el que he pedido. Uso Canvas porque el efecto que quiero lograr es modificar los píxeles a blanco y negro, no cambiar la opacidad, etc.
Con frases textuales que has posteado, como "el punto es si te lo mereces" yo diría que tu "
punto" fuerte no es la educación.
Si según
tu, no me merezco tu "ayuda", entonces deja de desvirtuar el hilo, aunque ya lo hemos conseguido.
Saludos.
¿Alguien sabe solucionar esto? Gracias. 
