alyssamichelle/canvas-course: Source code for egghead.io HTML Canvas Course

# Add click interaction to HTML Canvas using JavaScript events
Being able to draw shapes is cool and all, but we want to add interactivity to our graphics! In this lesson we will learn how to add click handlers to our Canvas elements.

## Code Example
- https://plnkr.co/edit/6t4NaRyY9dxErg5g9FO3?p=preview

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <h1>Add click interaction to HTML Canvas</h1>
    <canvas id="canvas" height="200" width="200"></canvas>
    <div class="display-coords"></div>
    
    <script src="script.js"></script>
  </body>

</html>

const canvas = document.querySelector('#canvas');
const context = canvas.getContext('2d');
const coords = document.querySelector('.display-coords');

context.fillStyle = 'pink';
context.fillRect(0, 0, canvas.width, canvas.height);

const getCoords = (event) => {
  const container = canvas.getBoundingClientRect();
  const x = (event.clientX - container.left) - container.width/2;
  const y = (event.clientY - container.top) - container.height/2;

  coords.textContent = `${x}, ${y}`;
};

canvas.addEventListener('click', getCoords);

canvas {
  cursor: crosshair;
}