Scale game to div

[BudBrain]

Hi,

I've seen a few examples of a canvas scaling to a div, for example:

http://www.bbc.co.uk/cbeebies/games/little-roy-wonder-doodler
(You'll need to click play)

When the browser window is reduced in size (< width of 700px ish) the game scales rather nicely to the containing div.

Can anyone advise how the following is achieved? Css or Js?

Thanks

[TheBoneJarmer]

Both. To give you an idea, you can set the canvas's style with Javascript like this:

var canvas = document.getElementById("canvas");
var div = document.getElementById("gamediv");

canvas.style.width = gamediv.getBoundingClientRect().width + "px";
canvas.style.height = gamediv.getBoundingClientRect().height + "px";
canvas.width = parseFloat(canvas.style.width);
canvas.height = parseFloat(canvas.style.height);

 

[BudBrain]

Thanks, but I don't think that will give me a similar effect.

The example I posted above doesn't just scale with the same height/width (see the black borders that appear).

[samme]

I can't find a game there, but Phaser does this automatically. Just use style the parent container and use SHOW_ALL.