Estoy realizando un curso html de Coursera y se supone que debo convertir una imagen a escala de grises en uno de nuestros proyectos. ¿Alguien puede ayudar a explicar por qué esto no funciona? Hay formas de solucionarlo, pero quiero saber por qué cuando se llama a changeToGrayscale() y si la declaración es verdadera, ¿el bucle for no se está ejecutando? o si lo hace, la imagen no se carga en el lienzo? Gracias por adelantado.

 var originalImg = null; var grayscaleImg = null; var input; var canvas; function selectImage() { canvas = document.getElementById("canvas"); input = document.getElementById("input"); originalImg = new SimpleImage(input); originalImg.drawTo(canvas); } function changeToGrayscale() { if (imageEmpty(grayscaleImg)) { grayscaleImg = new SimpleImage(input); for (var pixel of grayscaleImg.values()) { var average = (pixel.getRed() + pixel.getGreen() + pixel.getBlue()) / 3; setRGB(average, average, average, pixel); grayscaleImg.setPixel(pixel.getX(), pixel.getY(), pixel); } grayscaleImg.drawTo(canvas); } } function imageEmpty(image) { return(image === null); } function setRGB(r, g, b, pixel) { pixel.setRed(r); pixel.setGreen(g); pixel.setBlue(b); }