Currently, example 1 starts with

<style>
  /* Disable intrinsic user agent touch behaviors (such as panning or zooming) so 
  that all events are given to the application instead. */
  
  html { 
    touch-action: none; 
  }
</style>

Personally, I find this a little heavy-handed and "dangerous". I've usually advocated applying touch-action (and before that, in touch events, preventDefault) more "surgically" just to the elements where it's needed, to avoid developers cargo-culting overly broad snippets of css/js that kill all browser defaults for everything.

I'd suggest applying it just to the canvas element in this example.

...
canvas {
  touch-action: none;
}
...