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.