fitting canvas on non-fullscreen, user scrolling

[Sandcastle Games]

Hello,

I have a question that is partly technical but also a usability question. I am usually working on PCs but want my games to run on smartphones as well. Often I have the situation that I have a canvas that should cover as much of the screen as possible. I have not found out a reliable way to find out the correct size of the screen due to my inability to detect scrollbar presence reliably. So I reduce the canvas size a little on the right and bottom to leave space for potential scrollbars. This leaves touch screen users the chance to scroll the page up and down and therefore hiding parts of the canvas. I have a general website menu above the canvas and a manual for the game below. So for these reasons I also appreciate the people to be able to scroll there.

As an overlay on the canvas I have a drop down "hamburger" menu to toggle the canvas area to full screen (solves the problem) or to center the canvas (I.e. align  the top left to the top left of the screen). There is also a button to move up to the website menu section or down to the manual section

I have recently started to make small learning programs to support schools. Children using this are not all skilled using smart phones. A kid recently moved part of the canvas out of the visible area and was not able to complete the tasks anymore as it was missing essential information outside of the screen. I suppose this kid wouldn't have been able to operate the menu to toggle full screen on or off or center the screen.

So what I am searching for is a reliable solution to make the canvas as big as the screen without using full screen mode and without making the canvas so big it creates scrollbars itself. Alternatively I am searching for a way to prevent the "unintended" scrolling (but somehow want to still accept intended scrolling to see the manual or website menu section next to the canvas - but this could be through the drop down menu). Actually I am not too sure what I am searching for ... Is there some kind of widely accepted approach for this type of problem?

The game can be found here:

"Himmelsrichtungen" (a game teaching geographical directions, directions of the sun etc.)

It is German only but I am really just asking about the technique.

Thanks for any advice

[geralsoft]

8 hours ago, Sandcastle Games said:

Hello,

I have a question that is partly technical but also a usability question. I am usually working on PCs but want my games to run on smartphones as well. Often I have the situation that I have a canvas that should cover as much of the screen as possible. I have not found out a reliable way to find out the correct size of the screen due to my inability to detect scrollbar presence reliably. So I reduce the canvas size a little on the right and bottom to leave space for potential scrollbars. This leaves touch screen users the chance to scroll the page up and down and therefore hiding parts of the canvas. I have a general website menu above the canvas and a manual for the game below. So for these reasons I also appreciate the people to be able to scroll there.

As an overlay on the canvas I have a drop down "hamburger" menu to toggle the canvas area to full screen (solves the problem) or to center the canvas (I.e. align  the top left to the top left of the screen). There is also a button to move up to the website menu section or down to the manual section

I have recently started to make small learning programs to support schools. Children using this are not all skilled using smart phones. A kid recently moved part of the canvas out of the visible area and was not able to complete the tasks anymore as it was missing essential information outside of the screen. I suppose this kid wouldn't have been able to operate the menu to toggle full screen on or off or center the screen.

So what I am searching for is a reliable solution to make the canvas as big as the screen without using full screen mode and without making the canvas so big it creates scrollbars itself. Alternatively I am searching for a way to prevent the "unintended" scrolling (but somehow want to still accept intended scrolling to see the manual or website menu section next to the canvas - but this could be through the drop down menu). Actually I am not too sure what I am searching for ... Is there some kind of widely accepted approach for this type of problem?

The game can be found here:

"Himmelsrichtungen" (a game teaching geographical directions, directions of the sun etc.)

It is German only but I am really just asking about the technique.

Thanks for any advice

 

function gcd(a, b) {
  if (b > a) {
    let _temp = a;
    a = b;
    b = _temp
  }
  while (b != 0) {
    let _m = a % b;
    a = b;
    b = _m;
  }
  return a;
}

function ratio(x, y) {
  let _c = gcd(x, y);
  return "" + (x / _c) + ":" + (y / _c)
}



class Utilidades{
    //width = ancho
    //height = alto 
    construct(){
        
    }
        
    getAspect(){
        aspect = ratio(window.innerWidth,window.innerHeight);
        console.log("que "+aspect);
        switch(aspect) {
            case '4:3':
                ancho=2048;
                alto=1536;
                //console.log(this.alto+" aa "+this.ancho);
            break;case '1:5':
                ancho=2048;
                alto=1536;
                //console.log(this.alto+" aa "+this.ancho);
            break;
            case '16:9':
                ancho=1920;
                alto=1080;
                console.log("bb");
            break;            
            default:
                ancho=1920;
                alto=960;
                console.log("ccc");
            break;
            
        }
        anchoMid= ~~(ancho/2);
        altoMid= ~~(alto/2);
        
        console.log("width g "+ancho+" height g "+alto);
        
    }
    setDisplay(){    
    
        //dataRes.mode = false;
        let gameWidth = window.innerWidth;
        let gameHeight = window.innerHeight;
        let scaleToFitX = gameWidth/ancho ;
        let scaleToFitY =  gameHeight/alto ;

        let currentScreenRatio = gameWidth / gameHeight;
        let optimalRatio = Math.min(scaleToFitX, scaleToFitY);

        if (currentScreenRatio >= 1.77 && currentScreenRatio <= 1.79) {
                canvas.style.width = gameWidth + "px";
                canvas.style.height = gameHeight + "px";        
                canvas.style.left = ((gameWidth - (ancho * optimalRatio))/2)+"px";
                canvas.style.top = ((gameHeight - (alto * optimalRatio))/2)+"px";

            console.log("a "+canvas.style.left);
        }else {

                canvas.style.left = ((gameWidth - (ancho * optimalRatio))/2)+"px";
                canvas.style.top = ((gameHeight - (alto * optimalRatio))/2)+"px";
                canvas.style.width = ancho * optimalRatio + "px";
                canvas.style.height = alto * optimalRatio + "px";

        //    console.log("b "+canvas.style.left);
        }

        scaleX = ancho/(gameWidth-(gameWidth-(ancho*optimalRatio)));
        scaleY = alto/(gameHeight-(gameHeight - (alto*optimalRatio)));


        //console.log("scale x "+scaleX+" scaley "+scaleY);

        console.log("width "+ancho+" height "+alto);
        dataRatio.offx = parseInt(canvas.offsetLeft);
        dataRatio.offy = parseInt(canvas.offsetTop);

        //if(jugando){
        engine.resize();

        
    
    }//fin de setDisplay
    
    setAspect(){
        
    }
    
    
}//end of class utils

call util.getAspect(); on load, and setDisplay on resize event

Edited July 1, 2020 by geralsoft

[Sandcastle Games]

Thank you for taking your time to reply.

I tried to integrate this into my game and came up with several issues:

• Much of the code deals with designing the canvas to a specific aspect ratio which I do not want. For many games this would be the intent and I use something similar in other games. But in this case I want to cover the available area. But of course I could simplify this for myself.
• The width calculation is based on window.innerWidth which includes scrollbars. For example my website will most of the time have a vertical but no horizontal scrollbar. Setting the canvas to window.innerWidth would create a horizontal scrollbar as well to scroll to the part of the canvas that is "behind" the vertical scrollbar. As a result also not the full height would be visible as the bottom is covered by a scrollbar. At no time the full canvas would be visible.
• The canvas dimensions are set using the style width/height which would stretch/shrink the canvas instead of setting it to the dimensions available which is my intent. I could simply adapt your code to this (and did already).
• For some reason it also creates the canvas higher than my window is. I am not sure why this is yet. I adapted your code a little to fit into my game so there might be a problem there. I considered creating a minimum viable product to show it but I think as your code does not address my real issue of covering the whole area (partly due to padding created by maintaining aspect ratio but also by not addressing the scrollbar issue) I think it is not useful to present the working example here.

Does anyone have suggestions especially on the scrollbar issue?