title: Detecting Left and Right Mouse Events for a Canvas Game
body: <p>I want to implement a <strong>canvas</strong> <strong>minesweeper</strong> game using plain <strong>javascript</strong>. I use 2D array for my grid. For the game, I need to detect right and left mouse clicks, each of which will do different things. My research directed me towards <code>mousedown</code>, <code>mouseup</code>, <code>contextmenu</code>, however, my code does not seem to work, as for the right click it does the functions for both right and left click,because the mouseup event gets triggered for the right click as well. Can anyone help me understand how to distinguish between the two? I ran into examples of <code>event.which</code>, where left click is <code>event.which === 0</code>, and the right click is <code>event.which === 2</code>, but that works only for <em>buttons</em>, as far as I understood.
  Here is the code.</p>
  
  <pre><code> canvas.addEventListener('mouseup', function(evt) {
      let x1 = Math.floor(evt.offsetX/(canvas.height/rows));
      let y1 = Math.floor(evt.offsetY/(canvas.width/cols));
      draw (y1, x1); //this is my drawing functions (draws the numbers, bombs)
  
  }, false); 
  
  canvas.addEventListener('contextmenu', function(evt) {
      let j = Math.floor(evt.offsetX/(canvas.height/rows));
      let i = Math.floor(evt.offsetY/(canvas.width/cols));
  
      ctx.drawImage(flagpic, j*widthCell+5, i*widthCell+2, widthCell-9, 
      widthCell-5); //draws the flag where right mouse clicked
  
  }, false);
  </code></pre>