HTML5/JavaScript Файл с Canvas не работает с Chrome и Firefox в окнах 8, но работает со всеми браузерами в 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>

Это простой html5 файл с яваскриптом реализациями, где вы можете просто рисовать на холсте. Он отлично работает со всеми браузерами на Windows 7 (мой старый ноутбук). Но с Chrome & Firefox на Windows 8 (мой новый ноутбук) вы ничего не можете нарисовать, это не сработает!

режим рисования на окнах 7:

• хром: OK
• светлячок: OK
• опера: OK
• IE10: OK
• сафари: OK

Рисование Режим на окнах 8:

• хром: NO
• светлячок: NO
• опера: OK
• IE10: OK
• сафари: OK

Может кто-нибудь пожалуйста, в чем проблема? Странно, что DrawingMode не работает на chrome и firefox, но отлично работает на Opera, IE10 и Safari под Windows 8.

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