HTML5 Canvas Width/Height Incorrect

Question

I'm coding a small game which will include boxes on a screen, and I'm using simple rectangles as placeholders for the timebeing. However, when I set the width and height of the rectangle, even though they're both set to the same length, let's say 100x100 for the sake of it, the height is clearly much longer than the width, as if I've set it to 100x140.

I have the basic stuff to set up the resolution for the canvas:

<canvas id='canvas' style='border: 1px solid; width: 1920px; height: 1080px;'>
</canvas>

<script>
    var canvas = document.querySelector('Canvas');
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    var ctx = canvas.getContext('2d');

But I must be doing something wrong/missing something. I've tried changing it from 1920x1080 to other resolutions but it doesn't fix the problem. Any ideas?

Answer 1

You need to describe canvas difrent change your code from:

<canvas id='canvas' style='border: 1px solid; width: 1920px; height: 1080px;'>
</canvas>

to:

<canvas id='canvas' style='border: 10px solid' width= '1920' height= '1080' ;>
</canvas>

That's how you should describe canvas, and everything should work :D