JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
  <canvas class="dynamic-drawing-canvas" width="1200" height="300" style="
    transform: matrix3d(1.0303, 0.00317459, 0, 2.13211e-05, -0.68458, -0.165542, 0, -0.00111181, 0, 0, 1, 0, -34.7412, 264.118, 0, 1);
    transform-origin: left top;
"></canvas>
</div>

CSS

#container {
  pointer-events: none;
  margin-left: 400px;
}

.dynamic-drawing-canvas{
   pointer-events: auto;
   background-color: blue;
}

JavaScript

$(".dynamic-drawing-canvas").on("mouseout", function(e){console.log(e.clientX, e.clientY)})