title: Drag canvas images/pieces on a chess board
body: <p>I am trying to build a chess game using Javascript(ES 6) and Canvas.
  I have built a basic chessboard and also rendered pawns on top of it.
  Now I intend to either click on the pawn or drag it to make a move.</p>
  
  <p><code>document.addEventListener('click',board_click)</code></p>
  
  <p>or</p>
  
  <p><code>canvas.addEventListener('click', board_click, false);</code></p>
  
  <p>is the way I manage to listen to these events.</p>
  
  <p>Now how would I know where I have clicked? I figured I can try to get the current position of the click, but how will I know what item is there at the present location.
  Any libraries or already implemented logics will also be helpful</p>
  
  <p>I have rendered my pawns like this</p>
  
  <pre><code>const drawPawns = (white, black, ctx, boardDimension, allPieces) =&gt; {
    const rows = [0, 1, 2, 3, 4, 5, 6, 7];
    const cols = [1, 6];
    let pawn;
    let side;
    // boardDimension  = 90;
    cols.forEach((col) =&gt; {
      rows.forEach((row) =&gt; {
        // pawn = Pawn.call(this, 'black');
        side = col === 1 ? 'black' : 'white';
        // That little tinkering is to center align the Pawn in the tile
        pawn = new Pawn(side, row * boardDimension + 30, col * boardDimension + 5, true);
        spriteImage.draw(ctx, pawn.canvasPosition, pawn.x, pawn.y);
        allPieces.push(pawn);
      });
    });
  };
  </code></pre>
  
  <p>The pawn.canvasPostion is to draw the image(using Sprite), whereas x and y are the places where its coordinates are. Now how would I get this particular Coor ordinates?</p>