HTML5 Game - Add mouse down and up event to canvas element

  1. HOME
  2. HTML5 Game
  3. Canvas Event
  4. Mouse Event

Description

Add mouse down and up event to canvas element

Demo

ResultView the demo in separate window 

<!doctype html>  
<html>  
 <head>  
  <meta charset="utf-8">  
  <title>Event Demo</title>  
 </head>  //from w w w.jav a 2  s. c o  m
 <body>  
  <canvas id="canvas" width="400" height="400"></canvas>  
  <script>  
  window.onload = function () {  
    let canvas = document.getElementById('canvas');  
  
    canvas.addEventListener('mousedown', function (event) {  
      console.log("mouse down");  
    }, false);  
  
    canvas.addEventListener('mouseup', function (event) {  
      console.log("mouse up");  
    }, false);  
  };  
  </script>  
 </body>  
</html>

Related Topic