Really weird canvas behavior with putImageData

February 14, 2022

I’m struggling to draw on HTML canvas using putImageData.

Here is my code:
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);

Here is my result:
https://i.stack.imgur.com/bzUxV.png

I expect all canvas to be yellow.

What I’m doing wrong?

>Solution :

You have to give the <canvas> element height and width attributes:

<canvas id='c' height=100 width=100></canvas>

With that change, it works. The CSS sizing of the canvas determines how the canvas looks, while the attributes of the element determine it’s geometry for drawing purposes.