title: Using event handlers in canvas functional component
body: <p>Here is the component.</p>
  
  <pre><code>const CanvasComponent = (props) =&gt; {
      const canvasRef = useRef(null);
      const [controller, setController] = useState({
          a: false,
          shift: false,
      });
  
      return (
          &lt;canvas
              ref = { canvasRef }
              width = { 1000 }
              height = { 1000 }
          /&gt;
      );
  };
  </code></pre>
  
  <p>I would like to create event handlers on the canvas so that, on keydown, the controller state is modified to flip <code>a</code> to true. Same with <code>shift</code>. </p>
  
  <p>I've been reading about custom <code>useEventHandler</code> hooks, but any references that are specifically about canvases seem to only use mouse events. </p>
  
  <p>I want to create a custom hook that makes the process of adding events for specific keys easy and elegant. I've tried several things already, and none of them seem to work as I want them to. </p>