Touch and Mouse Events Tutorial

Step 3

Event Handlers: Listeners

Learn to use event handlers to locate and drag elements on the HTML5 canvas.

Drag a Sprite Example Step 3 Overview Mobile Touch Event Handlers Desktop Mouse Event Handlers Process Drag Movements Tips Summary Source Code

Step 3 Overview

This tutorial explains how to assign event handlers which capture mouse or touch movement on the canvas. The event handlers move a sprite in response to mobile touch events and desktop mouse events. 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.

The Drag a Sprite example works on mobile devices and desktop full computers. The example was tested with Android Chrome browser, Windows Internet Explorer 11, iPhone 6, Microsoft Edge, and Windows Phone 8.1.

It's simple enough to implement Drag and Drop Mobile when the canvas uses the browser window starting with the upper left corner. However if the canvas only covers a portion of the browser window then scrolling, resizing, and reorientation change the canvas location in relationship to the browser window. To locate elements or sprites on the canvas, requires using data obtained from canvas reorientation in response to scroll, resize, and deviceorientation events.

To learn more about canvas reorientation events see the previous Step 2. Read the Respond to Dimension Changes Tutorial.

Mobile Touch Event Handlers

For mobile devices assign event handlers with JavaScript for touchstart, touchend, and touchmove, events.

Touch Start Event

The following JavaScript assigns a touchstart event listener which calls pointStart() when the user touches the canvas.

canvas.addEventListener(
 'touchstart', 
 function (e) {			
  e.preventDefault();
  pointStart();
  return false;
 },
 false
);

Touch End Event

The following JavaScript assigns a touchend event listener which calls pointEnd() when the user removes a finger from the canvas.

canvas.addEventListener(
 'touchend', 
 function (e) {
  e.preventDefault();		
  pointEnd();
  return false;
 },
 false
);

Touch Move Event

The following JavaScript assigns a touchmove event listener when a touch point moves across the canvas. Details regarding the touchmove event handler follow farther down in the tutorial.

 canvas.addEventListener(
 'touchmove', 
 function (e) {	
 ...		
 },
 false
);

Desktop Mouse Event Handlers

For desktop computers assign event handlers with HTML for onmousedown, onmouseup, and onmousemove events. The code below demonstrates one technique to assign desktop event handlers.

<canvas
id="cv" 
width="300" 
height="300"  
onmousedown="pointStart()" 
onmouseup="pointEnd()" 
onmousemove="pointMoveD(event)" 
>

Your browser doesn't support
the canvas element.
	
</canvas>

Process Drag Movements

In the Drag a Sprite example, sprite movement processes only when the mouse moves with the left mouse button down, or the user is touching the touch sensitive display screen. The sprite doesn't move if the mouse just hovers over the canvas.

Both desktop and mobile devices call pointEnd() and pointStart(). Boolean variable bRun indicates whether or not the user or mouse is touching the canvas. Therefore pointEnd() disables movement with bRun = false. Function pointStart() enables movement with bRun = true.

Process Mobile Movements

The anonymous touchmove function calls e.preventDefault() to prevent scrolling. If at least one finger is touching the display screen, then retrieve the first index entry in the targetTouches Array. Property t1.pageX is the X coordinate returned from the touchmove event handler. Property t1.pageY is the Y coordinate. The X and Y coordinates indicate where the user touched the canvas.

Obtain the value of the bb.left property, to determine the offset into the canvas for the X coordinate. Remember variable bb represents the canvas's bounding box. Use mYOffset to determine the offset into the canvas for the Y coordinate. The offsets are calculated with a set of resize events.

Step 2: Respond to Dimension Changes Tutorial explains how to calculate mYOffset. Events to Drag a Sprite Source Code includes the JavaScript which obtains canvas offsets.

The following listing includes the anonymous touchmove event listener for mobile devices.

canvas.addEventListener(
 'touchmove', 

 function (e) {

 // Prevent scrolling.
 e.preventDefault();	
 
 if (bRun == false) 
  return false;	
 
 if (e.targetTouches.length >=  1) 
 {
  // First touch point.
  var t1 = e.targetTouches[0];
	
  // Call pointMoveMD()
  // which moves the sprite
  // for both mobile and
  // desktop devices.
  pointMoveMD(
   t1.pageX- bb.left,
   t1.pageY-mYOffset
  );
  
  return false;
 }
 
 return false;
 },
 
 false
);

Function pointMoveMD() calls pointOverTest() to determine if the current touch point is near the sprite. We only want to move the sprite if the pointing device is near the sprite. If the touch point is near the sprite, then pointMoveMD() draws the sprite in the new location.

Tips

Reusing code whenever possible simplifies debugging and minimizes the size of the file for download.

The Drag a Sprite example calls functions pointStart() and pointEnd() for both mobile and desktop event handlers. The Drag a Sprite example also reuses function PointMoveMD() for both mobile and desktop devices after calcuating canvas offsets for X and Y coordinates.

Unfortunately the mobile and desktop versions which process drag movements, require slightly different code. Therefore the Events to Drag a Sprite Source Code creates an anonymous function for the touchmove event handler which later calls pointMoveMD(). The onmousemove event handler calls pointMoveD() for the desktop event handler which also later calls pointMoveMD().

Summary

This tutorial explained how to assign event handlers which capture mouse or touch movement on the canvas. The event handlers move a sprite in response to mobile touch events and desktop mouse events. 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.

It's simple enough to implement drag and drop mobile, when the canvas uses the browser window starting with the upper left corner. However if the canvas only covers a portion of the browser window then scrolling, resizing, and reorientation change the canvas location in relationship to the browser window. To locate elements or sprites on the canvas, requires using data obtained from canvas reorientation in response to scroll, resize, and deviceorientation events.

To learn more about canvas reorientation events see the previous Step 2. Read the Respond to Dimension Changes Tutorial. See source code or the Drag a Sprite Example.