Skip to main content

HTML5 Canvas Mobile Touch Events Tutorial

To bind event handlers to shapes on a mobile device with Konva, we can use the on() method. The on() method requires an event type and a function to be executed when the event occurs. Konva supports touchstart, touchmove, touchend, tap, dbltap, dragstart, dragmove, and dragend mobile events.

For more complex gestures like rotate take a look into Gestures Demo.

If you are looking for pan and zoom logic for the whole stage take a look into Multi-touch scale Stage demo.

Note: This example only works on mobile devices because it makes use of touch events rather than mouse events.

Instructions: move your finger across the triangle to see touch coordinates and touch start and touch end the circle.

import Konva from 'konva';

const stage = new Konva.Stage({
  container: 'container',
  width: window.innerWidth,
  height: window.innerHeight,
});

const layer = new Konva.Layer();

const text = new Konva.Text({
  x: 10,
  y: 10,
  fontFamily: 'Calibri',
  fontSize: 24,
  text: '',
  fill: 'black',
});

const triangle = new Konva.RegularPolygon({
  x: 80,
  y: 120,
  sides: 3,
  radius: 80,
  fill: '#00D2FF',
  stroke: 'black',
  strokeWidth: 4,
});

const circle = new Konva.Circle({
  x: 230,
  y: 100,
  radius: 60,
  fill: 'red',
  stroke: 'black',
  strokeWidth: 4,
});

function writeMessage(message) {
  text.text(message);
  layer.draw();
}

triangle.on('touchmove', function () {
  const touchPos = stage.getPointerPosition();
  const x = touchPos.x;
  const y = touchPos.y;
  writeMessage('x: ' + x + ', y: ' + y);
});

circle.on('touchstart', function () {
  writeMessage('touchstart circle');
});
circle.on('touchend', function () {
  writeMessage('touchend circle');
});

layer.add(triangle);
layer.add(circle);
layer.add(text);
stage.add(layer);