Weird canvas behaviour

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);