Resize the Canvas and Coordinates

Free HTML5 Game Tutorial for Beginners: Page 9

Overview Resize Events Detect Resize Events Resize Displays Resize Graphical Coordinates Function resizeData() Summary Source: Mobile Resize Assignment Source: Desktop Resize Assignment Source: Mobile and Desktop Resizing
Resize Icon

Overview

This tutorial explains how to respond when the player resizes their browser window or reorients their mobile device. This article covers preparing variables which resize the dimensions of game elements, after a resize event. See the Draw and Redraw to the Canvas tutorial for details regarding how to draw with the new variables.

Graphics drawn to the canvas are unlike other elements in HTML. The canvas is a standalone element. Event handlers can be assigned to the canvas. However when graphics are drawn to various areas of the canvas, user defined code needs to maintain the location of those graphics.

Graphics displaying within the canvas differ from HTML img elements. It's relatively simple to assign an onclick event handler for image elements. However an onclick event handler for the canvas provides the X and Y coordinate location of the click, but not the location of specific objects already drawn to the canvas.

It's necessary to know where game elements are located on the canvas and where the canvas is located in relationship to the Web browser window. In order to know where the canvas is located in relationship to the Web browser assign resize events. Process and save new dimensions and locations based on the browser size.

Resize Events

Assign an onresize event handler to the Web page's body tag. Resize event handlers allow code to scale the dimensions of the canvas and other HTML elements. Game entities resize to fit the screen. The onresize event fires everytime a mobile device reorients, and everytime the browser window is resized on a desktop computer. A device reorients whenever the user rotates from vertical to horizontal display, or vice versa.

The Surface Game doesn't process resize events when the user scrolls. However capturing scroll events is very important. See the Drag a Sprite example with tutorials to learn about scroll events.

When the screen resizes, adjust the width and height of display elements. The coordinates of each game element will change. Therefore we need to detect the resize event, modify the size of the canvas, and save coordinates to interact with objects on the canvas.

Detect Resize Events

The canvas should resize based on the screen resolution of the current device. For the Surface Game this tutorial discusses two separate resize event handlers. One resize event handler prepares data for mobile devices. Another resize event handler prepares data for desktop computers. The Surface Game re-uses similar functions called from both resize event handlers. Both event handlers call functions resizeData() and resizeCoords().

Both resize events are declared in the body tag of the HTML Web page. The mobile resize event declaration is listed below. Substitute resizeCanvasMobile() with resizeCanvasDesktop() for desktop computers.

Other techniques exist to assign resize event handlers with JavaScript based on the device type. Such techniques provide more responsive design for Web pages. Responsive design allows one page to render the same game regardless whether the viewing device is a mobile phone or desktop computer.

 
<body 
 onload="loadGame(1)" 
 onresize="resizeCanvasMobile()" 
 onunload="stopGame()"
>
		

Resize Displays

For desktop computers the Surface Game calls resizeCanvasDesktop(). For mobile devices the Surface Game calls resizeCanvasMobile().

For mobile devices, assuming the player holds the device vertically, more height displays. Code allows the canvas to use the entire width of the screen. Other game elements are located below the canvas. For desktop computers the display screen has more horizontal space. Therefore the canvas is located to the left of the screen. Other game elements are located to the right of the canvas.

Both resizeCanvasDesktop() and resizeCanvasMobile() process the same variables, with different dimensions. They assign the width and height of the canvas. Both functions save the Y coordinate of the top box of digits. Number iDragBoxT maintains the Y coordinate for the top row of digits. Both functions save the Y coordinate of the bottom box of digits. Number iDragBoxB maintains the Y coordinate for the bottom row of digits.

Variable iDragBoxB

The variable name iDragBoxB begins with an i representing an integer. iDragBoxB maintains one coordinate for a box containing a set of draggable digits. Therefore the variable includes DragBox. The letter B indicates iDragBoxB is below the answer box.

Both Resize Event Handlers

Function resizeCoords() called by both resize event handlers determines coordinates for each digit. The tutorial Reusable Coordinates explains implementation of resizeCoords(). Function resizeCoords() saves the width and height of square digits to the variable iDimDigit. Variable iDimDigit maintains the dimensions for one digit within either the top or bottom answer box.

Both event handlers call resizeData(). Function resizeData() prepares a few variables used to resize game elements, then calls a set of functions which accomplish the actual size changes. See Function resizeData() below for more information.

Mobile Resize Event Handler

The following listing includes the entire resizeCanvasMobile() resize event handler for mobile devices. Notice number iW equals 90% of the window's width. Later JavaScript assigns iW to the width of the canvas. Also iSpacer equals one half the width of a digit. The spacer separates rows of boxes in the game along the vertical axis. Coordinates for both the top of the upper drag box and the top of the lower drag box are saved to variables iDragBoxT and iDragBoxB. Details regarding Function resizeData() follow below.

function resizeCanvasMobile(){
 
 var iW = window.innerWidth * 0.90;

 resizeCoords(iW);

 iSpacer = iDimDigit/2;

 iDragBoxT = iDimDigit+iSpacer;

 iDragBoxB = iDimDigit * 3.5;

 iH = new Number(iDimDigit * 4.5);

 resizeData(iW,iH);  

}

The following listing includes the entire resizeCanvasDesktop() resize event handler for Macintosh and Windows PCs. Notice number iW equals 50% of the window's width. Later JavaScript assigns iW to the width of the canvas. Also iSpacer equals one quarter the width of a digit. The spacer separates rows of boxes in the game. Function resizeData() is discussed below. Numbers iOffsetX and iOffsetY indicate how far the canvas is from the top and left side of the browser window. The offsets are necessary for desktop browsers.

Desktop Resize Event Handler

function resizeCanvasDesktop(){ 
 
 var iW = window.innerWidth * 0.5; 
 
 iW = new Number(iW); 
 
 resizeCoords(iW); 
 
 iSpacer = iDimDigit/4;
 
 iDragBoxT = iDimDigit+iSpacer;
 
 iDragBoxB = iDimDigit * 2.75;

 iH = new Number(iDimDigit * 3.75); 
 
 resizeData(iW,iH);
 
 iOffsetX = bb.left;
 
 iOffsetY = bb.top; 
 
}

Function resizeData()

Function resizeData() calls functions which redraw the answer box, the answers that are in the answer box, the top row of digits, and bottom row of digits. Function resizeData() uses coordinates calculated by the mobile and desktop resize event handlers which were just covered.

The code for resizeData() is listed below. Parameters iW and iH are assigned to the width and height of the canvas respectively. The Draw and Redraw to the Canvas tutorial explains functionality of drawAnswerBox(), drawAnswers(), and drawDigits(). This tutorial focuses on resizing variables in response to browser resize events. The Draw and Redraw to the Canvas tutorial focuses on redrawing elements based on resized variables.

function resizeData(iW,iH){
 
 if (context != null){
 
  context.canvas.width = iW;

  context.canvas.height = iH; 

  bb = cvs.getBoundingClientRect();

  drawAnswerBox();

  drawAnswers();

  drawDigits(); 

 } 
 
}
		

Recalculate Graphical Coordinates

Both resizeCanvasMobile() and resizeCanvasDesktop() call resizeCoords() which call coordsLoad().

The function coordsLoad(iW,aCoords,n) recalculates the position of each digit based on the current screen's resolution. See the Reusable Coordinates tutorial for details regarding coordsLoad(iW,aCoords,n).

In a nutshell, coordsLoad(iW,aCoords,n) divides the number of images by the width of the screen, then iterates over a list of coordinate objects, modifying the minimum and maximum X position of each coordinate.

Every resize event must reassign and save coordinates for each interactive game entity on the canvas. Once the coordinates are saved, then it's relatively easy to know when the player taps, touches, or drags, a game entity.

Summary

This tutorial explained how to respond when the player resizes their browser window or reorients their mobile device. This article covered preparing variables which resize the dimensions of game elements, after a resize event. See the Draw and Redraw to the Canvas tutorial for details regarding how to draw with the new variables.

Graphics drawn to the canvas are unlike other elements in HTML. The canvas is a standalone element. Event handlers can be assigned to the canvas. However, when graphics are drawn to various areas of the canvas, user defined code needs to maintain the location of those graphics.

Graphics displaying within the canvas differ from HTML img elements. It's relatively simple to assign an onclick event handler for image elements. However an onclick event handler for the canvas provides the X and Y coordinate location of the click, but not the location of specific objects already drawn to the canvas.

It's necessary to know where game elements are located on the canvas and where the canvas is located in relationship to the Web browser window. In order to know where the canvas is located in relationship to the Web browser assign resize events.

Have fun and love learning! For the next tutorial, tap the image icon containing text which says Next Lesson, or the right pointing arrow at the bottom of the page.

Previous Page Next Page
Copyright © 2015 Seven Thunder Software. All Rights Reserved.