JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

#myCanvas{
  padding: 100px;
    background: #eee;
}

JavaScript

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


canvas.onmousedown = function(){
  console.log('click');
   timer = setTimeout( doStuff, 2000 );
    
};

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

function doStuff() {
  alert('hello, you just holded the mousebutton for two seconds. Is everything ok?')
}