HTML5 Scaling Window / Render Area

I am working on my landing page for my HTML5 game and I want the window-drag-size-scaling to affect the rendered area a bit better.

I noticed every time I hit the fullscreen button that the game automatically scales itself perfectly before actually going fullscreen. I’d like to use that function during the “window.addEventListener(‘resize’, resizeCanvas, false);” event.

However when going out of full screen it scales it back to the previous rate, which is incorrect and despite removing minimum size values it still appears unable to go below certain values.

for 4.20 – there’s a drop down selector in the project setting’s to allow you to do pick the following “Canvas Scaling Mode”:

  • FIXED: this will lock the game resolution and canvas sizes
  • ASPECT: this will lock the game resolution – but allow the canvas size to scale when the browser size changes
  • SCALE: both game resolution and canvas size will dynamically scale when the browser size changes.

for now, you can manually change this on the generated HTML page (or make it stick on the template file found at: Engine/Build/HTML5/GameX.html.template)

look for “var canvasWindowedScaleMode” – and choose 1=STRETCH, 2=ASPECT, or 3=FIXED

then, to change the resolution, you can set them at:

  • var canvasAspectRatioWidth = xxxx
  • var canvasAspectRatioHeight = yyyy

i know there’s also the DefaultEngine.ini [SystemSettings] r.setRes=WidthxHeight setting… this is currently not used, but these can be if you uncomment (again in the same HTML file/template) the lines of code that is set with:

  • UE_JSlib.UE_GSystemResolution_ResX()
  • UE_JSlib.UE_GSystemResolution_ResY()

hope this helps!

oops, forgot to mention, one line also need to change in Engine/Build/HTML5/GameX.html.template

if (aboutToEnterFullscreen)


if (aboutToEnterFullscreen && !aboutToEnterFullscreen.type)

Thanks - I think that one line did make quite a bit of difference. I had been playing with these settings but they were not working properly and this line did make improvements.

I am sending over another YouTube link through direct message - it is close but not 100% there. The vertical stretch is not expanding all the way. At the beginning of the video, I show through the console browser inspector that the canvas is in fact the right size but the “vertical render area” is not being stretched. There is also a weird displacement sometimes after removing full screen.

Edit: Attached a snipet of my gamename.html (aka index.html) regarding the canvas section.
link text

Any additional thoughts?