JSFiddle - React, Tailwind, and code Playground

HTML

The Canvas Element:<br />
<canvas id="my-canvas"></canvas>

CSS

body {
    font-family: Arial, Helvetica;
    font-size: 11px
}
#my-canvas {
    border: 1px solid;
}
#my-div {
    width:50px;
    height:50px;
    border: 1px solid
}

JavaScript

document.querySelector("#my-canvas").addEventListener("keydown", function(event) {
    console.log("canvas element level key down: ", event);
}, false);
document.addEventListener("keydown", function(event) {
    console.log("document level key down: ", event);
}, false);

document.querySelector("#my-canvas").addEventListener("mousedown", function(event) {
    document.querySelector("#my-canvas").focus();
    console.log("canvas element level mouse down: ", event);
}, false);