Respond to Dimension Changes Tutorial

Step 2

Rotate, Scroll & Resize

Learn how to maintain canvas coordinates when the device rotates, scrolls, or browser window resizes.

Drag a Sprite Example Step 2 Overview Resize Event Handlers Process Event Handlers Tips Summary Source Code

Step 2 Overview

This tutorial explains how to respond to dimension changes with the HTML5 canvas. Maintain canvas coordinates when the device rotates, scrolls, or browser window resizes. This tutorial demonstrates how to respond when the canvas dimensions or position changes. When the user scrolls, resizes the window, or reorients the device, the position or dimensions of the canvas may change. To locate elements or sprites on the canvas, requires saving canvas coordinates. The names of the events which modify the position of the canvas include scroll, resize, and deviceorientation.

The Drag a Sprite Example works fine with the following test devices; Android Chrome browser, Windows Internet Explorer 11, Microsoft Edge, Windows Phone 8.1, iPhone 6, Internet Explorer 9 (one of the oldest browsers to support some HTML5 features), Chrome, Safari, and Firefox for Windows.

Assign Resize Event Handlers

For both desktop and mobile devices assign scroll and resize event handlers. For mobile devices only, assign a deviceorientation event handler.

The scroll event handler executes when the user scrolls the browser window, either with a touch point on a mobile device, or mouse on a desktop.

The resize event handler executes when a desktop browser is resized. On some devices resize events execute when the mobile device reorients, the browser window zooms in, or the browser window zooms out. The following JavaScript assigns scroll and resize event handlers. When the window is scrolled, zoomed, or rotated, function resizeHandler() executes.

window.addEventListener(
 'scroll',
 function (e) {
  resizeHandler(e);
 },
 false 
);	
								
window.addEventListener(
 'resize',
 function (e) {
  resizeHandler(e);
 },
 false 
);

The devicereorientation event only applies to mobile devices which have the ability to rotate between vertical and horizontal viewing. First determine if deviceorientation is enabled. Test if(window.DeviceOrientationEvent) doesn't equal null. The following code demonstrates how to assign a devicereorientation event handler.

if (window.DeviceOrientationEvent){			
 window.addEventListener(
  'deviceorientation', 
  function (e) {
   resizeHandler(e);
  }, 
  false
 );			
}

Process the Event Handler

Androids and Windows PCs apply changes to the browser window in different ways. We have to use the the correct values to drag sprites around the canvas with different devices. The Drag a Sprite example saves desktop Y axis offsets to variable dYOffset. The Drag a Sprite examples saves mobile Y axis offsets to variable mYOffset.

First obtain the new bounding box of the canvas. After resizing or reorientation the canvas client rectangle usually moves in relationship to the browser window. Call bb = canvas.getBoundingClientRect(). Variable bb is a DOMRect object with top, left, width, and height values. Use the bounding box to obtain X and Y axis offsets when moving a sprite.

Second if window.pageYOffset isn't null, then save that value too. The Property pageYOffset contains the vertical position of the scroll bar. The following listing demonstrates saving the vertical scroll bar position.

if (window.pageYOffset != null){
 nYScroll = window.pageYOffset;        
}

Save the Y axis offsets for desktops with dYOffset = Math.floor(bb.top). Save the Y axis offsets for mobile devices with the following list.

if (bb.top > 0){
 mYOffset = bb.top + nYScroll;
}

// bb.top is negative,
// but nYScroll can't be negative.	
else if (nYScroll  > 0){
	
 // Add a negative to subtract.
 mYOffset = nYScroll + bb.top;
 
}

Tips

One Function Instead of Three

When possible it's usually more efficient to create and debug one function.

The Drag a Sprite example uses one event handler for the three events discussed in this tutorial. Function resizeHandler() handles scroll, resize, and deviceorientation events. All three events require access to the same values, depending on the device or browser currently displaying the Web page.

The values accessed include window.pageYOffset, for any changes to the scroll position, and a reference returned from canvas.getBoundingClientRect().

Disable Default Browser Responses

Function resizeHandler(e) calls e.preventDefault(). Parameter e references an event object. Method e.preventDefault() stops the browser from executing default behavior. For example with scroll events, if e.preventDefault() is not called, the page scrolls when we want to move the sprite.

Additionally resizeHandler(e) returns false. Some browsers and devices require event handlers return false to prevent default behavior, as well.

Execute When the Web Page Loads

Function resizeAll() executes after the Web page loads and most initialization has completed. Function resizeHandler() calls resizeAll() also.

The entire resizeHandler() function follows. Function resizeHandler() responds to scroll, resize, and deviceorientation events. Function resizeAll() processes variables for those events and prepares variable values when the Web page first loads. See Events to Drag a Sprite Source Code resizeAll().

function resizeHandler(e){

 e.preventDefault();

 resizeAll();  

 return false; 

}

Summary

This tutorial explained how to respond to dimension changes with the HTML5 canvas. Maintain canvas coordinates when the device rotates, scrolls, or browser window resizes. This tutorial demonstrated how to respond when the canvas dimensions or position changes. When the user scrolls, resizes the window, or reorients the device, the position or dimensions of the canvas may change. To locate elements or sprites on the canvas, requires saving canvas coordinates. The names of the events which modify the position of the canvas include scroll, resize, and deviceorientation.

See the last section to this tutorial Respond to Touch & Mouse Events Tutorial.