Question

I’m working on some HTML5 canvas drawing. The drawing application is an IPad WebApp.

Now I would like to know whether there is any possibility to track a long tap (tap and hold) on the canvas and to link it to an event outside the canvas. For example: I tap hold for three seconds on the canvas, which causes a Popup to be visible.

Answer 1

​<canvas id="myCanvas"></canvas>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

You can simply set a Timeout on the mousedown event of the canvas,
then clear it on the mouseup event.

Here’s a Demo

​var canvas = document.getElementById('myCanvas');
var timer = null;

​canvas.onmousedown = function(){
  timer = setTimeout( doStuff, 2000 );
};

canvas.onmouseup = function(){
  clearTimeout( timer );
};

function doStuff() {
  alert('hello, you just pressed the mousebutton for two seconds.')
}