If you want to test the UI in all functional aspects, it'is important to be able to simulate user interactions. Trdditionally this is mainly done by simulating key pressed and mouse events. For touch events the support is less common and often restricted to a platform (e.g. selendroid extends Selenium tests for Android browsers.)
To achive basic touch support one must be able to programmatically generate touch events. This can simply be done by calling new TouchEvent, new PointerEvent, but it's more complex to hide the platform differences behind a consistent interface. To achive this goal we start to record touch and mouse events.
<main id="main" class="container interactive" style="width: 100%; height:400px; border: 1px solid gray;">
<canvas id="canvasTest" draggable="false" style="position: absolute; z-index: 1000; user-select: none; pointer-events: none;"></canvas>
<canvas id="canvasProduction" style="position: absolute; z-index: 500; user-select: none;"></canvas>
</main>