HTML5 Canvas Desktop and Mobile Events Support Tutorial

To add event handlers to shapes that work for both desktop and mobile applications with KineticJS, we can use the on() method and pass in paired events. For example, in order for the mousedown event to be triggered on desktop and mobile applications, we can use the "mousedown touchstart" event pair to cover both mediums. In order for the mouseup event to be triggered on both desktop and mobile applications, we can use the "mouseup touchend" event pair. We can also use the "dblclick dbltap" event pair to bind a double click event that works for both desktop and mobile devices.

Instructions: Mousedown, mouseup, touchstart, or touchend the circle on either a desktop or mobile device to observe the same functionality.

Open in new window

Code Editor

<!DOCTYPE HTML>
<html>
  <head>
    <meta name="viewport" content="width=device-width"/>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.5.2.min.js"></script>
    <script defer="defer">
      function writeMessage(messageLayer, message) {
        var context = messageLayer.getContext();
        messageLayer.clear();
        context.font = '18pt Calibri';
        context.fillStyle = 'black';
        context.fillText(message, 10, 25);
      }
      var stage = new Kinetic.Stage({
        container: 'container',
        width: 578,
        height: 200
      });
      var circleLayer = new Kinetic.Layer();
      var messageLayer = new Kinetic.Layer();

var numEvents = 0;

var circle = new Kinetic.Circle({
        x: stage.getWidth() / 2,
        y: stage.getHeight() / 2 + 10,
        radius: 70,
        fill: 'red',
        stroke: 'black',
        strokeWidth: 4
      });

/*
       * mousedown and touchstart are desktop and
       * mobile equivalents so they are often times
       * used together
       */
      circle.on('mousedown touchstart', function() {
        writeMessage(messageLayer, 'Mousedown or touchstart');
      });
      /*
       * mouseup and touchend are desktop and
       * mobile equivalents so they are often times
       * used together
       */
      circle.on('mouseup touchend', function() {
        writeMessage(messageLayer, 'Mouseup or touchend');
      });

circleLayer.add(circle);

stage.add(circleLayer);
      stage.add(messageLayer);
    </script>
  </body>
</html>

< Multi-Event Remove Event >

More Examples

Modified on April 9th, 2013 by Eric Rowell