HTML5/JavaScript File with Canvas doesn't work with Chrome&Firefox on windows 8 but works with all browsers on windows 7. why?

Question

I have a problem with this simple html5 file:

 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>

It's a simple html5 file with javascript implementations where you can simply draw on a canvas. It works fine wit all browsers on Windows 7 (my old laptop). But with Chrome & Firefox on Windows 8 (my new laptop) you can't draw anything, it doesn't work!

Drawing mode on windows 7:

• chrome: OK
• firefox: OK
• opera: OK
• ie10: OK
• safari: OK

Drawing mode on windows 8:

• chrome: NO
• firefox: NO
• opera: OK
• ie10: OK
• safari: OK

Can somebody please what the problem is? It's weird, that the DrawingMode doesn't work on chrome and firefox but works fine on opera, IE10 and Safari under Windows 8.

Answer 1

Fabric.js thinks that your Chrome/Firefox have touch enabled so it attaches itself to touch events instead of mouse events.

It is not too clear to me whether this is a bug in Chrome/Firefox or in fabric or both.

See this https://github.com/kangax/fabric.js/issues/670 and also this https://github.com/kangax/fabric.js/issues/450