¿Por qué la configuración del tamaño del lienzo con atributos en JS funciona correctamente?
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>mientras que configurarlo directamente con CSS falla totalmente con una relación de aspecto incorrecta? (¡da un rectángulo en lugar de un cuadrado!)
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>