Why am i not getting a square?

Question

I am on android phone and
ctx.fillRect(posx,posy,posx+5,posy+5);
is making a rectangle not square.
https://code.sololearn.com/WBOm4adsUrE1/?ref=app

Answer 1

You can't use css to set the width or height of canvas or it will result in it being stretched. You can use .setAttribute('width', '500'); instead.
Also note fillrect(x, y, width, height)

Answer 2

I have tried to make it square... you can further modify by changing posx,posy, height and width..
https://code.sololearn.com/WMnTTwxdo4QK/?ref=app

Answer 3

In your CSS just remove the styles you have given for canvas.

Remove

#canvas
{
//All styles defined her
}