+ 4

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

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

8th Apr 2022, 12:00 PM
NonStop CODING
NonStop CODING - avatar
11 ответов
+ 2
But the border also has its own height and width
9th Apr 2022, 2:15 AM
Arnav Gumber
Arnav Gumber - avatar
+ 1
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 !
9th Apr 2022, 2:01 AM
Arnav Gumber
Arnav Gumber - avatar
+ 1
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)
9th Apr 2022, 2:04 AM
NonStop CODING
NonStop CODING - avatar
+ 1
https://code.sololearn.com/WkcU9rHKv2DM/?ref=app It is working, but not all the time. I think it's sololearn's code editor problem
9th Apr 2022, 2:12 AM
Arnav Gumber
Arnav Gumber - avatar
+ 1
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
9th Apr 2022, 2:14 AM
NonStop CODING
NonStop CODING - avatar
+ 1
Code Infinite with Arnav i have set box-sizing: border box so borders are inside
9th Apr 2022, 2:16 AM
NonStop CODING
NonStop CODING - avatar
+ 1
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.
9th Apr 2022, 2:19 AM
NonStop CODING
NonStop CODING - avatar
+ 1
Just use border on body tag instead of canvas tag. I have updated my code, just see it.
9th Apr 2022, 2:23 AM
Arnav Gumber
Arnav Gumber - avatar
+ 1
I encountered this problem too. For case 1: give the body element padding and margin of 0.
10th Apr 2022, 8:10 AM
Sherif Fasasi
+ 1
𝕡𝕣𝕠𝕘𝕣𝕒𝕞𝕞𝕖𝕣 Thankyou🤓🤓, i thought box-sizing will put borders inside. So it means, border box does not works on canvas.
10th Apr 2022, 12:01 PM
NonStop CODING
NonStop CODING - avatar
0
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
10th Apr 2022, 8:53 AM
NonStop CODING
NonStop CODING - avatar