Creating a Sushi Shop Game with Device Scaling - HTML5 Game Development - page 303

var resizeCanvas = function() {
game.canvas.width = customerView.offsetWidth;
game.canvas.height = customerView.offsetHeight;
};
resizeCanvas();
// register the resize event.
window.onresize = function(){
resizeCanvas();
repositionCustomer();
};
function repositionCustomer() {
// todo
}
repositionCustomer();
}
Objective complete - mini debriefing
We have created a skeleton that the game components resize or reposiion according to
the game's screen.
The elements use percentages to make the size flexible enough to fit different screen sizes.
When the layout changes dramaically, we reposiion the elements with media queries.
A media query lets us define rules that only applies to the selectors when the media type
matches. For example, we can apply rules to the screen size that's larger or smaller than
a certain value. In this task, we defined two break points, 500 pixels and 800 pixels, to
determine whether the game is being displayed in a narrow, medium, or wide screen.
We also need to define a mobile landscape query because the screen's height isn't large
enough to display all the game elements while in the mobile device.
Classified intel
We have set the canvas's size at the resize event. It is worth knowing that seing the width
or height of the canvas will clear all the drawings and reset the canvas. That's not a problem
for us because EaselJS redraws the display list on every ick. This is why you may see that
some other example code on the Internet clears the canvas by calling canvas.width =
canvas.width .