Overview Events to Drag a Sprite

Step 1

Drag Elements Across HTML5 Canvas

Drag a Sprite Example Step 1 Overview Tips Responsive Design Summary Source Code

Step 1 Overview

This set of tutorials covers a series of nine events required to drag a sprite on mobile devices and desktop computers. The events respond to device rotation, scrolling, and browser window resize events. The nine events include scroll, resize, deviceorientation, touchstart, touchend, touchmove, onmousedown, onmouseup, and onmousemove.

This article introduces the steps involved to drag an element across an HTML5 2D canvas. It's simple enough to implement drag and Drop for mobile devices, when the canvas uses the entire browser window. However when the canvas covers only a portion of the Web browser's window, scrolling, resizing, and reorienting change the location of the canvas. To locate elements or sprites on the canvas, requires saving changes to the location of the canvas. The names of the events which modify the location of the canvas include scroll, resize, and deviceorientation.

To move a sprite on the canvas in response to mobile touch, requires touchstart, touchend and touchmove events. To move a sprite on the canvas in response to desktop mouse movements requires onmousedown, onmouseup, and onmousemove events. Code needs the location of the upper left corner of the canvas to determine if the user has dragged near the sprite. We need to know where the canvas is located in relationship to the browser window and the sprite. Therefore the scroll, resize, and deviceorientation events are also necessary to drag a sprite around the canvas.

The Drag a Sprite Example was tested with Microsoft Edge and Chrome for Windows 10, iPhone 6, Android Chrome browser, and Windows Phone 8.1.

The tutorial's divided into two sections to cover all nine events. The first section describes events to keep track of canvas location changes. The location of the canvas changes in response to scroll, resize, and deviceorientation events. The second section describes touch and mouse events including touchstart, touchend, touchmove, onmousedown, onmouseup, and onmousemove.

Tips

To drag elements on the canvas we need to know where the user touched the canvas. Sometimes the unexpected happens when trying to determine coordinates on the canvas with various browsers and devices. It would seem straightforward to determine canvas coordinates from the bounding box of the canvas, for both mobile and desktop browsers. However Androids require an offset from the scroll position. Desktop browsers simply use the top left corner of the canvas bounding box. The moral of the story for Web development is to test with as many devices and browsers as possible.

The code below illustrates saving canvas location offsets along the vertical axis. For desktop computers offsets are saved to the variable dYOffset. For mobile devices offsets are saved to the variable mYOffset. The next two tutorials fill in details.

function resizeAll(){	
 
//Scroll position:
var nYScroll = new Number(0);
	
if (canvas != null){

bb = canvas.getBoundingClientRect();

// The X offset is bb.left.
 dYOffset = Math.floor(
  bb.top
 );
 
 nYScroll = 0;
}

// With desktops subtract the 
// scroll position from the 
// top of the canvas,
// if the offset with the range check will
// not be negative.
if (bb != null){
 if (window.pageYOffset != null){
  nYScroll = window.pageYOffset;								
 }

 // For mobile devices
 // Add the scroll  position to the top
 // of the canvas.		
 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 subract.
  mYOffset = nYScroll + bb.top;
 }
}
...	
}

Responsive Design

The Drag A Sprite example drags a circle across the canvas regardless of scroll position, horizontal or vertical orientation. However the example applies a hard coded canvas size of 300 units. For the best experience with mobile and desktop devices consider applying responsive Web design. With responsive design the canvas resizes to fit the window.

Summary

This article introduced the steps involved to drag an element across an HTML5 2D canvas. It's simple enough to implement drag and drop for mobile devices, when the canvas uses the entire browser window. However when the canvas covers only a portion of the Web browser's window, scrolling, resizing, and reorienting change the location of the canvas. To locate elements or sprites on the canvas, requires saving changes to the location of the canvas. The names of the events which modify the location of the canvas include scroll, resize, and deviceorientation.