Description:
The canvas does not behave perfectly on mobile devices. Trying to pan sometimes draws instead, and zooming is difficult.
How to Implement:
- Touch Events: Ensure Fabric.js is interpreting touch events properly. You might need to explicitly include the Fabric.js touch module or gesture handlers.
- Panning: Intercept touch events on the canvas container. If
touches.length === 2, disable drawing mode and treat the motion as a pan gesture (canvas.relativePan).
- Zooming: Calculate the distance between two touch points on
touchmove. If the distance increases, zoom in; if it decreases, zoom out (canvas.zoomToPoint).
- UI Adjustments: Hide hover-based tooltips and make toolbar buttons slightly larger for touch targets.
Description:
The canvas does not behave perfectly on mobile devices. Trying to pan sometimes draws instead, and zooming is difficult.
How to Implement:
touches.length === 2, disable drawing mode and treat the motion as a pan gesture (canvas.relativePan).touchmove. If the distance increases, zoom in; if it decreases, zoom out (canvas.zoomToPoint).