problem with multitouch in an HTML5 canvas game
I'm developing an HTML5 game on canvas that should support multi-finger controls — for example, one finger controls the character's movement, and another triggers a jump or attack. Everything works fine on desktop, but on mobile devices, I’m running into strange behavior. The issue is that multitouch events (touchstart, touchmove, touchend) either don’t fire at all or behave incorrectly. Sometimes only one touch is registered, even when I'm using two fingers. After the second touch, the browser starts zooming or scrolling the page; In some browsers, the game just "freezes" when trying multitouch. I’ve already added event.preventDefault() to all touch events — doesn’t always help. I’ve applied touch-action: none; in the canvas styles — works partially, but not everywhere. I’ve tried listening to events with addEventListener('touchstart', handler, { passive: false }) — still doesn’t fully solve the issue. I’ve made sure that no other elements are overlapping the canvas. I suspect that on some devices, multitouch is either limited or handled differently. There may be differences in multitouch implementation across Safari, Chrome, and Firefox (especially on iOS vs Android). Canvas itself doesn’t block browser gestures (like pinch-to-zoom). I’m looking for advice on how to properly implement multitouch in HTML5 games so that it works reliably across different mobile devices.