Responsive canvas (adaptive, resizable)

[Ctibor Laky]

How to achieve responsive canvas for a crafty game? I the way that viewport will adapt to new window size? Is it possible? Because when I was trying to resize canvas by js, everything messed up :/

canvas = Crafty.stage.elem.getElementsByTagName("canvas")[0]

canvas.width = window.innerWidth-100;

canvas.height = window.innerHeight-100;

Canvas resized correctly, but the game was distroyed...

Thanks for answers in advance ;)

[figosi...@gmail.com]

Have the same bl...dy problem.

Any help?

[Sam Fereday]

It's possible that on the resize all of the values have changed such as coordinates and whatnot perhaps? You may have to reload all elements to recalculate the positions of everything and then place it all down again. This is just a theory, so by all means correct me if I'm wrong.

[Kevin Simper]

You can bind a function to the window resize event, and then trigger the Crafty.viewport.reload() function.

Remeber to use some form of a debouncer, because dragging the window will fire the window.resize function maybe a 1000 times and it will be very heavy.

Use something like this:

var delay = (function(){

  var timer;

  return function(callback, ms){

    clearTimeout (timer);

    timer = setTimeout(callback, ms);

  };

})();

$(window).resize(function() {

    delay(function(){

      Crafty.viewport.reload();

      //...

    }, 500);

});

[starwed]

Crafty.viewport.reload should already trigger on resize, I think.

But it looks like if you set the viewport size explicitly,  reload won't change it.  That kind of makes sense, but we should probably support a responsive viewport other than fullscreen.

We should certainly trigger an event when the viewport resizes, and automatically deal with the canvas size when it happens.

[Ctibor Laky]

Viewport.reload doesnt do the thing, if anyone have working example please share it via jsfiddle or similar service, thanks ;)

[Ctibor Laky]

My attempt with viewport.reload():

window.onresize = function() { // responsible game borders

var stage = Crafty.stage.elem,

canvas = stage.getElementsByTagName("canvas")[0];

stage.style.width = Game.width() + "px";

stage.style.height = Game.height() + "px";

canvas.width = Game.width();

canvas.height = Game.height();

  Crafty.viewport.reload();

};

[starwed]

You'll probably also want to specifically resize the viewport as well.

I just landed a [change](https://github.com/craftyjs/Crafty/pull/691) that resizes the canvas and stage when you change the viewport dimensions, so this'll be easier in the next version of Crafty.  :)