Hola, he estado tratando de usar ctx.putImageData() en lugar de dibujar cada píxel uno por uno para ahorrar tiempo. Me encontré con un problema en el que cuando intento cambiar el ancho y el alto de los datos de imagen, parece que no sucede nada.

 const canvas = document.querySelector('canvas'); const ctx = canvas.getContext('2d'); function drawImageData(){ var imgData = ctx.createImageData(10,10); var i; for (i = 0; i < imgData.data.length; i += 4) { imgData.data[i+0] = 255; imgData.data[i+1] = 0; imgData.data[i+2] = 0; imgData.data[i+3] = 255; } ctx.putImageData(imgData,0,0,0,0,canvas.width,canvas.height) } drawImageData();

el código html es solo la plantilla básica con un solo lienzo.