Si se ejecuta debajo del código y DOM, mi navegador se representa el doble de todo el valor de altura.
Primero, probé el siguiente código en aproximadamente: en blanco.
en html:
... <canvas id="canvasArea" style=" width: 500px; height: 500px; background-color: E0E0E0; "></canvas> ...y en js:
let cv = document.getElementById("canvasArea"); let cvArea = cv.getContent('2d'); cvArea.fillRect(10, 10, 50, 50); // I was thinking this Rect is square cvArea.fillRect(60, 10, 50, 25); // and this Rect is long rectangleEstaba pensando que el primer rect será dibujar un cuadrado. Pero primero es un rectángulo largo.
¿Por qué pasó esto?
JS Canvases no tiene en cuenta las dimensiones establecidas por CSS.
Use atributos HTML o configure usando JS.
let cv = document.getElementById("canvasArea"); let cvArea = cv.getContext('2d'); cvArea.fillRect(10, 10, 50, 50); // I was thinking this Rect is square //cvArea.fillRect(60, 10, 50, 25); // and this Rect is long rectangle <canvas id="canvasArea" width="500" height="500" style=" background-color: #E0E0E0; "></canvas>