HTML5 Scaling with JavaScript

I’m currently working on getting my HTML5 game to scale correctly given the JavaScript variables on the page. Is it possible to allow JavaScript to change the size of the game? I thought changing the width/height on the canvas might work, but it doesn’t seem to do anything.

Try changing the width/height of the parent DIV element, by default we should scale our canvas to match it’s dimensions

1 Like

Thank you, that helped a lot!! Do also know how I can put the game into several divs? Currently the game comes in a single div on a web page, but when you put it in a second dive, it wrecks the loading bar completely. When loading in several divs the canvas slowly scales up and then stops at the incorrect size. Normally a loading bar would appear and then the game would, so I’m confused. strange right?

You could try the following:

<window width="480" height="320" resizable="false" />

(using your own width/height)

I believe that will disable the auto-scaling behavior, and you can scale the canvas as you wish. Otherwise, it will resize itself to the dimensions of its parent DIV, but if your parent DIV does not have a set size, then it could end up in a loop where it resizes itself for the DIV, the DIV reports a larger size, and this repeats

1 Like