Question

I don’t know why but my JS won’t return the correct values of my canvas’ dimensions.

I have this to get the values:

temp = document.getElementById('myCanvas');
canvas = new Array();
canvas['width'] = temp.width;
canvas['height'] = temp.height;

My CSS & HTML is:

//html
<canvas id="myCanvas" class="c"></canvas>

//related css
.c{
    width:100%;
    margin:0 auto;
    height:500px;
    background-color:green;
    position:absolute; 
    left: 0; 
    top: 0;
    border:1px solid red;
}

The result of the array shows:

width: 300, height: 150

This cannot be correct if the CSS sets it as 500px and it shows on the screen as 500px. Why might this be ?

Answer 1

This is the correct size!

By setting canvas dimensions in CSS, you haven’t changed the pixel-by-pixel size of the canvas. It’s still the default 300×150, you just stretched the pixels. You can verify this if you draw a circle on the stretched canvas: you will get an ellipse. It’s better to change the width and height attributes of the canvas tag directly, and not in CSS.

Source, Example