[ Done ] case 0: what is the most efficient way of fitting the canvas to mobile screen? please Share me your personal experience

Question

case 1:
when i wrote canvas.width = window.innerWidth
and canvas.height = window.innerHeight, my canvas element did not fit to the screen it was slightly towards right and bottom, but it should of worked see case 3 code

//////////////////////////////////////////////

case 2 (see case 2 css and compare it with case 1)
to fix it inside my css i set the width and height to 100%
then it started working.

so my question is why i had to use css part (case2) ??

it should of worked in case 1. because innerWidth and innerHeight basically gives us the mobile screen inside width and height.

//////////////////////////

case 3

by using console.log(innerWidth, innerHeight) i found my device screen height and width
so i applied it to css directly (see case 3) // no javascript has been used except console.log()

https://code.sololearn.com/WpDoB3qyd0rq/?ref=app

https://code.sololearn.com/WQM6bp42c1Ft/?ref=app

https://code.sololearn.com/Ws22DGRVsRT1/?ref=app

Answer 1

But the border also has its own height and width

Answer 2

My opinion-

Most of the Javascript game developers use window.innerwidth (case 1) to set the height and width.

But you can use any of the methods.

Hope it helps !

Answer 3

Code Infinite with Arnav

yeah, but when i used case 1 with innerWidth and innerHeight, the canvas is not fitting properly on the screen. I had to use css with it to fit it on the screen (case 2)

pls edit your answer above to reply

edit 1: theoretically speaking innerWidth and innerHeight returns exact size of the mobile screen. So it should be working without using css (case 3, i used console.log(innerWidth, innerHeight) to get the the screen size and applied the height and width directly in the css, no js used)

Answer 4

https://code.sololearn.com/WkcU9rHKv2DM/?ref=app

It is working, but not all the time.
I think it's sololearn's code editor problem

Answer 5

Code Infinite with Arnav
why did you wrote
-15 and -10,
theoretically you don't have to do this because innerWidth and innerHeight returns the exact width and height

Answer 6

Code Infinite with Arnav

i have set box-sizing: border box
so borders are inside

Answer 7

please listen
i'm asking if innerWidth and innerHeight returns the exact screen size then why we had to use css

case 1: says when i use only innerWidth and innerHeight

case 2: says when i used css with case 1

case 3: proves that innerWidth and innerHeight return the exact mobile screen size, so i directly put those values inside of css,
and you can see it fits the screen.
but the same is not happening in case 1,
it means,
case 1 should of worked without applying css (case 1 is working only if we apply css)

edit: my doubt is not that i want to fit the canvas to mobile screen, i just wanted to know why case1 is not working without css it should of worked as per case 3.

if you have your own version of fitting canvas to mobile screen then please send it to me.

Answer 8

Just use border on body tag instead of canvas tag.
I have updated my code, just see it.

Answer 9

I encountered this problem too.
For case 1: give the body element padding and margin of 0.

Answer 10

𝕡𝕣𝕠𝕘𝕣𝕒𝕞𝕞𝕖𝕣

Thankyou🤓🤓, i thought box-sizing will put borders inside. So it means, border box does not works on canvas.

Answer 11

Sherif Fasasi

Not working

Thanks for your time
but i have already set padding and margin to 0 by using the * selector,

i had also given margin and padding to body only but it still not works