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

Engage thrusters
In these steps, we add the graphics to beauify our DOM elements:
1. First, we add the background and border image to the customer view:
#customer-view {
background: url(../images/stand-background.png) center
center no-repeat;
background-size: cover;
border-style: solid;
border-width: 26px 32px 42px 32px;
border-image: url(../images/sushi-stand-border.png) 26
32 42 32 repeat;
}
2. The border's width affects the canvas's size. In the view.js file, we add the
following funcion to get the border width style from the computed style:
var getBorderWidths = function(element) {
// get computed style.
var style = getComputedStyle(element);
// return the 4 values as object.
return {
top: parseInt(style.borderTopWidth),
right: parseInt(style.borderRightWidth),
bottom: parseInt(style.borderBottomWidth),
left: parseInt(style.borderLeftWidth)
};
};
3. After we define the getBorderWidths funcion, we need to modify the
resizeCanvas method to adjust with the border's width based on the values:
var resizeCanvas = function() {
var w = getBorderWidths(customerView);
game.canvas.width = customerView.offsetWidth - w.left -
w.right;
game.canvas.height = customerView.offsetHeight - w.top
- w.bottom;
};