キャンバスのHTML5/JavaScriptファイルは、Windows 8のChromeとFirefoxでは動作しませんが、Windows 7のすべてのブラウザで動作します。なぜですか？

Question

私はこの単純なHTML5ファイルに問題があります：

var canvas = window.__canvas = new fabric.Canvas('c'); 
 
canvas.backgroundColor = '#efefef'; 
 
canvas.freeDrawingBrush.width = 10; 
 
canvas.renderAll(); 
 

 
document.getElementById('drawingMode').addEventListener('click', function(e) { 
 
    e.target.innerHTML = canvas.isDrawingMode ? 'Start freedrawing' : 'End freedrawing'; 
 
    canvas.isDrawingMode = !canvas.isDrawingMode; 
 
});

canvas { 
 
    border: 1px solid #ccc; 
 
    padding: 20px; 
 
} 
 
/*.canvas-class { 
 
    border-left: 20px solid black; 
 
    padding: 20px; 
 
}*/

<button id="drawingMode">Start freedrawing</button> 
 
<div class="wrapper"> 
 
    <canvas id="c" class="canvas-class" width="400" height="300" style="border:1px solid #ccc;"></canvas> 
 
</div>

それはあなたが簡単にキャンバスに描くことができますjavascriptの実装と簡単なHTML5のファイルです。それは、Windows 7（私の古いラップトップ）上のすべてのブラウザでうまく動作します。 しかし、Chromeの場合は、Windows 8（私の新しいノートパソコン）のFirefox & Firefoxを使っては何も描画できません。うまくいきません！

• はクローム：OK
• のfirefox：OK
• オペラ：OK
• IE10：OK
• サファリ：OK

Windows 7でモードを描く

図面Windows 8の上のモード：

• クローム：NO
• のfirefox：NO
• オペラ：OK
• IE10：OK
• サファリ：OK

誰かが問題をどういうことができますか？ DrawingModeはchromeとfirefoxでは動作しませんが、Windows 8ではOpera、IE10、Safariで正常に動作します。

Answer 1

私はあなたのWindows 7ノートパソコンに触れていないと仮定しています。これは、すべてのブラウザがマウス/タッチパッドイベントをキャプチャする必要があることを意味していました。ただし、Windows 8タッチラップトップをお持ちの場合、ブラウザの入力ソース（タッチパッドやタッチスクリーンなど）が異なる可能性があります。異なるブラウザーでは、それぞれの入力を処理する異なる実装を使用して、表示されているこの不一致を引き起こす可能性があります。

Answer 2

Fabric.jsは、Chrome/Firefoxにタッチが有効になっていると考えて、マウスイベントの代わりにイベントに触れると考えています。

これはChrome/Firefoxのファブ、ファブリック、またはその両方のバグかどうかはあまり明確ではありません。

は、参照してください。このhttps://github.com/kangax/fabric.js/issues/670もこのhttps://github.com/kangax/fabric.js/issues/450