ga icon indicating copy to clipboard operation
ga copied to clipboard

Using scaleToWindow

Open fzzylogic opened this issue 9 years ago • 3 comments

Hi

Not sure this is useful for the use cases you're aiming for, so just putting it here for what it's worth. scaleToWindow was not resizing to the full window size after multiple resizes (chrome / firefox). It develops unwanted spacing after multiple resizes, for example when changing from portrait to landscape and back again. Found a solution which works well for me. I am using a simple page containing only a canvas, so in my case this makes the canvas hug the sides of the browser window whenever it is resized:

  1. Modify the canvas centering code in plugins.js / ga.scaleToWindow: // first, reset all margins to zero. ga.canvas.style.margin = '0px 0px 0px 0px';

    // Center horizontally (for square or tall canvases) // margin shorthand order: top, right, bottom, left var margin; if (center === "horizontally") { margin = ((window.innerWidth - ga.canvas.width * scale) / 2) + 'px '; ga.canvas.style.margin = '0px ' + margin + '0px ' + margin; }

    //Center vertically (for wide canvases) if (center === "vertically") { margin = ((window.innerHeight - ga.canvas.height * scale) / 2) + 'px '; ga.canvas.style.margin = '0px ' + margin + '0px ' + margin; }

  2. Finally, set overflow: hidden on body tag in html to prevent scrollbars, for example with an inline style:

I like this as method as i don't need to use fullScreen. But if the browser is manually set to fullscreen, it fills available space as expected.

Thanks so much for GA, i'm having great fun with it.

fzzylogic avatar Dec 03 '16 11:12 fzzylogic

Thanks so much for sharing this! I'll merge this into Ga's codebase on the next major update 😄

kittykatattack avatar Jan 06 '17 17:01 kittykatattack

hello, the scaleToWindo function in the current ga version still does not work correctly when we rotate the screen many times, could you. provide full source code in which you solved this problem, sorry for my English, greetings Mariusz

MariuszOnik avatar Dec 10 '18 06:12 MariuszOnik

@MariuszOnik, the included code is all there is. However, i remember that i later found there were some situations where the canvas would be zoomed for some reason, so the above is not perfect.

fzzylogic avatar Dec 10 '18 10:12 fzzylogic