Estoy tratando de dibujar un degradado gris (o algunos de ellos en realidad) en el lienzo. Para hacer esto, estoy usando los métodos de lienzo getImageData() y putImageData(). data es un Uint8ClampedArray con un tamaño de 1000 * 1000 * 4. En los bucles for, los elementos de color rgb de los datos están configurados correctamente para ser x% 255, como se muestra al imprimir la matriz de data en la consola. Sin embargo, el resultado del código difiere de lo esperado. Se muestra un cnvas completamente blanco mientras que se esperan 4 degradados grises.
Ejemplo de trabajo mínimo:
<!DOCTYPE html> <html> <head> </head> <body> <canvas id = "canvas" width = "1000" height = "1000"></canvas> <script> var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); draw(); function draw(){ const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height); const data = imageData.data; for(let y = 0; y < canvas.height; y++){ for(let x = 0; x < canvas.width; x++){ for(let color = 0; color < 3; color++){ let idx = (y * canvas.width + x) * 4; data[idx + color] = x % 255; } } } ctx.putImageData(imageData, 0, 0); } </script> </body> </html>No estás configurando el canal alfa.
for (let y = 0; y < canvas.height; y++) { for (let x = 0; x < canvas.width; x++) { let idx = (y * canvas.width + x) * 4; for (let color = 0; color < 3; color++) { data[idx + color] = x % 255; } data[idx + 3] = 255; // alpha } }