Events in the Canvas Demo

Messages from the canvas will show up here: 

Canvas Message Area

Messages from the wrapper will show up here: 

Wrapper Message Area
Notes:

The HTML file:

<head>
 <script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
  <script type="text/javascript" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML"> </script>
 <script type="text/x-mathjax-config">
  MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}});
</script>

 <link rel="stylesheet" href="http://mirkwood.cs.edinboro.edu/~bennett/style/hw.css">
</head>

<body>
<h1> Events in the Canvas Demo</h1>

<div id="canvasWrapper" style="border:2px solid #ff0000">

<canvas id="eventCanvas" width="400" height="200" style="border:1px solid #000000;"></canvas>
<p>
Messages from the canvas will show up here:
<pre id="messageArea">
Canvas Message Area
</pre>
<p>
Messages from the wrapper will show up here:
<pre id="wrapperMessageArea">
Wrapper Message Area
</pre>
</div>

<script type="text/javascript" src="../code/event.js"> </script>

Notes:
<ul>
   <li> The div respons to
   <ul>
        <li> Click events.
        <li> FocusLoss events.
   </ul>
   <li> The canvas responds 
   <ul>
       <li> to the events: click, keydown, focus, wheel
       <li> p will turn mouse tracking on and off.
       <li> it watches for shift, ctrl and alt keys too.
    </ul> 
</ul>
</body>

event.js

"use strict"

let wrapper = document.getElementById("canvasWrapper");
let canvas = document.getElementById("eventCanvas");
canvas.tabIndex = 0;
let ctx = canvas.getContext('2d');

let clickCount = 0;

wrapper.addEventListener("click", WrapperClick);
wrapper.addEventListener("focusout", WrapperFocusOut);
canvas.addEventListener("click", MyHandler);
canvas.addEventListener("keydown", MyHandler);
canvas.addEventListener("focus", MyHandler);
canvas.addEventListener("wheel", MyHandler);

let pointerActive = false;
let mousex = canvas.width/2;
let mousey = canvas.height/2;
ctx.font = "15px Georgia";

function WrapperClick(evnt) {
   let msgArea = document.getElementById("wrapperMessageArea");
   clickCount++;
   let text = "Click in DIV " + clickCount + " times";
   msgArea.innerText = text;
}

function WrapperFocusOut(evnt) {
   let msgArea = document.getElementById("wrapperMessageArea");
   let text = "Lost Focus";
   msgArea.innerText = text;
}

function MyHandler(evnt) {
   // either bind the event handler, or get the canvas.
   let canvas = document.getElementById("eventCanvas");
   let msgArea = document.getElementById("messageArea");
   let text = "";

   switch(evnt.type) {
       case "click":
          text = "Click \n";
          text += "It was the "+ evnt.button+ " button";

          mousex = evnt.offsetX;
          mousey = evnt.offsetY;
          ctx.fillRect(evnt.offsetX, evnt.offsetY, 2,2);
          break;

       case "focus":
          let divArea = document.getElementById("wrapperMessageArea");
          text = "Focus \n";
          divArea.innerText = "\n";
          break;

       case "keydown":

          text = "A key: "+ evnt.key+ " was pressed\n";

          ctx.strokeText(evnt.key, mousex, mousey);

          if (evnt.key == 'p') {
             if (!pointerActive) {
                canvas.addEventListener("pointermove", MyHandler);
                pointerActive = true;
             }  else {
                canvas.removeEventListener("pointermove", MyHandler);
                pointerActive = false;
             }
          }

          if (evnt.altKey) {
            text += "\tThe alt key was pressed \n";
          }

          if (evnt.ctrlKey) {
            text += "\tThe crtl key was pressed \n";
          }

          if (evnt.shiftKey) {
            text += "\tThe shift key was pressed \n";
          }
          break;

       case 'pointermove':
          text = "Ponter Move \n";
          text += "Located at ("+Math.floor(evnt.offsetX)
               + ", "+Math.floor(evnt.offsetY)+")\n";
          break;

       default:
          text = "Unknown Event\n";
   }
   msgArea.innerText = text;
}