Why does my browser render double the height value?

Question

If run below code and DOM, my browser is renderred double all height value.

First, I tested below code in about:blank.

In html:

...
<canvas id="canvasArea" style="
    width: 500px;
    height: 500px;
    background-color: E0E0E0;
"></canvas>
...

and In 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 rectangle

I was thinking first rect will be draw square. But first is long rectangle.

Why does this happen?

Chris Happy · Accepted Answer · 2021-12-03T05:34:17.843

JS Canvases are not aware of dimensions set by CSS.

Use HTML attributes or set using 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>

Why does my browser render double the height value?

1 Answers1