FabricJS freeDrawingBrush在触摸屏设备上无法正常工作的问题

移动端无法绘图反而触发页面滚动的核心原因是浏览器默认的触摸滚动行为干扰了Fabric.js的绘图事件，加上页面未做移动端适配，导致画布区域的触摸事件被浏览器优先处理。以下是修复方案：

关键修复步骤 #

• 添加移动端视口适配：在<head>中加入视口元标签，确保页面以设备宽度渲染，禁止缩放，避免不必要的滚动空间。
• 阻止画布触摸默认行为：给画布绑定touchstart和touchmove事件，阻止默认行为，让Fabric.js能捕获触摸事件用于绘图。

修复后的完整代码 #

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.0.0-beta.12/fabric.min.js"></script>
    </head>
    <body>
        <div class="canvas-container" style="width: 500px; height: 500px; position: relative; user-select: none;">
            <canvas id="c" width="500" height="500" style="border: 1px solid rgb(170, 170, 170);"></canvas>
        </div>
        <button id="clear" type="button">Clear</button>
        <script>
            // Free draw
            var canvas = new fabric.Canvas('c');
            canvas.freeDrawingBrush.width = 5;
            canvas.isDrawingMode = true;

            // 阻止触摸默认行为，避免页面滚动
            const canvasElement = document.getElementById('c');
            canvasElement.addEventListener('touchstart', function(e) {
                e.preventDefault();
            });
            canvasElement.addEventListener('touchmove', function(e) {
                e.preventDefault();
            });

            // Clear canvas
            document.getElementById('clear').addEventListener('click', function(){
                canvas.clear();
            })
        </script>
    </body>
</html>

内容的提问来源于stack exchange，提问作者KDog