Post by Acid Prank in How do you handle Canvas Resizing with EaselJS on itch.io?

Viewing post in How do you handle Canvas Resizing with EaselJS on itch.io?

← Return to topic

Acid Prank6 years ago

My game has a original resolution of 1024 / 720

here is the javascript code I use for get the body size and resize canvas.

function getBodySize() {

var w = window,

d = document,

e = d.documentElement,

g = d.getElementsByTagName('body')[0],

x = w.innerWidth || e.clientWidth || g.clientWidth,

y = w.innerHeight|| e.clientHeight|| g.clientHeight;

if (x != new_W || y != new_H) {

new_W = x;

new_H = y;

resizeCanvas();

}

function resizeCanvas() {

var new_canvas_W = W;

var new_canvas_H = H;

if (W > Body_W || H > Body_H) {

new_canvas_W = Body_W;

new_canvas_H = H / 1024 * Body_W;

if (H > Body_H) {

new_canvas_W = W / 720 * Body_H ;

new_canvas_H = Body_H;

}

if (new_canvas_W != canvas.width || new_canvas_H != canvas.height) {

canvas.width = new_canvas_W;

canvas.height = new_canvas_H;

}

stage.scaleX = new_canvas_W / 1024;

stage.scaleY = new_canvas_H / 720;

stage.update();

}

or see paste bin, its more readable https://pastebin.com/hdgnYSVX

I call it periodically in my game loop (every 100 ticks) and everywhere I can . I'm not sure.. but I think it is a bad idea to use the body width and height because its size seems to change after the canvas size has changed : I noticed that in landscape, the canvas grows up its width correctly then just after it grows up again a little more ..., 5 or 6 times. Also If you read the stackoverflow links I give, there is that really annoying problem which does that when you change the tablet orientation, depending of the brower and the model it doesn't act the same way and the body size.

but again, I really lacks of experience with all of this... Could you provide me the code you use for resize ?

Like Reply

No Time To Play6 years ago(+1)

Here, look at the source code for RogueBot (it's the old version of the framework, which has a bug, but that's elsewhere). In the resize() method of each screen I simply store the width and height (probably overkill) and precalculate some values (this was before I started using whole-canvas scaling systematically). Note how I use innerWidth/innerHeight, because it's supported by every browser that matters, and only re-read them in a resize event handler, because there's no point otherwise. And yes, the browser fires several of those while a window resizes; that's true both on the desktop and mobile, e.g. when playing with the responsive view in Firefox or rotating the device. But it's still better than checking it all the time.

Like Reply