Setting canvas size does not work with CSS but works with JS attribute, when using putImageData

Question

Why does setting the canvas size with attributes in JS work correctly:

canvas = document.getElementById('canvas');
canvas.width = 200;
canvas.height = 200;
const ctx = canvas.getContext('2d');
const arr = new Uint8ClampedArray(40000);
for (let i = 0; i < arr.length; i += 4) { arr[i + 0] = 0; arr[i + 1] = 190; arr[i + 2] = 0; arr[i + 3] = 255; }
let imageData = new ImageData(arr, 100, 100);
ctx.putImageData(imageData, 0, 0, 0, 0, 100, 100);

#canvas { border: 1px solid black; }

<canvas id="canvas"></canvas>

whereas setting it directly with CSS totally fails with wrong aspect ratio? (it gives a rectangle instead of a square!)

canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const arr = new Uint8ClampedArray(40000);
for (let i = 0; i < arr.length; i += 4) { arr[i + 0] = 0; arr[i + 1] = 190; arr[i + 2] = 0; arr[i + 3] = 255; }
let imageData = new ImageData(arr, 100, 100);
ctx.putImageData(imageData, 0, 0, 0, 0, 100, 100);

#canvas { border: 1px solid black; height: 200px; width: 200px; }

<canvas id="canvas"></canvas>