Estoy luchando para dibujar en el lienzo HTML usando putImageData .
Aquí está mi código: https://jsfiddle.net/173mbg0n/58/
HTML:
<canvas id='c'></canvas>CSS:
canvas { width: 100px; height: 100px; background: red; }JavaScript:
let W = 100; let H = 100; let c = document.getElementById('c'); var ctx = c.getContext("2d"); let array = new Uint32Array(W * H); for (let i = 0; i < array.length; i++) array[i] = 0xff00ffff; let ca = new Uint8ClampedArray(array.buffer); let img = new ImageData(ca, W); ctx.putImageData(img, 0, 0);Aquí está mi resultado: https://i.stack.imgur.com/bzUxV.png
Espero que todo el lienzo sea amarillo.
¿Qué estoy haciendo mal?
Tienes que darle al elemento <canvas> atributos de height y width :
<canvas id='c' height=100 width=100></canvas>Con ese cambio, funciona. El tamaño CSS del lienzo determina cómo se ve el lienzo, mientras que los atributos del elemento determinan su geometría para fines de dibujo.