Search code examples
google-chromeeventscanvasfabricjsjquery-events

Fabric.js canvas not catching mouse events on Google Chrome


Googled this a lot and didn't get any useful hint/solution. I have this simple html page including some CSS styles, jQuery, jQuery-ui and obviously Fabric.js; on document.ready I launch an ajax call and render something on the canvas. Until now everything seems fine but when a I need to catch some mouse events I get nothing. This behaviour is shown only on Chrome (current version 25.0.1364.97); everything works fine on Firefox or Internet Explorer (v. 9). Here's some of the js code:

$(document).ready(function() {
    //setup canvas etc.
    eCanvas = new fabric.Canvas('EViewport', {
          backgroundColor: 'rgba(255, 50, 50, .3)',
          selection: true,
          selectionColor: 'blue',
          selectionLineWidth: 2
        });
    EViewport = $("#CanvasContainer");
    viewW = EViewport.width();
    viewH = EViewport.height();
    eCanvas.setWidth(viewW);
    eCanvas.setHeight(viewH);

    eCanvas.observe('object:selected', function(options) {
          if (options.target) {
            console.log('an object was selected! ', options.target.type);
          }
        });
    eCanvas.observe('mouse:down', function() {
            console.log('mouse click! ');
        });
    eCanvas.on('mouse:down', function() {
            console.log('mouse click! ');
        });
    eCanvas.on('mousedown', function() {
            console.log('mouse click! ');
        });

    //... render some rectangles and stuff...
});

And here's the html structure (notice that Eviewport.js file contains previously pasted code):

<!DOCTYPE html>
<html>
<head>
        <link rel="stylesheet" href="baseCss/jquery-ui.css" type="text/css">

        <script type="text/javascript" src="baseJs/jquery.js"></script>
        <script type="text/javascript" src="baseJs/jquery-ui.js"></script>

        <script type="text/javascript" src="Eviewport.js"></script>
        <link type="text/css" rel="stylesheet" href="Eviewport.css">
        <script type="text/javascript" src="baseJs/Fabric.js"></script>
</head>

<body>

    <div id="MainContainer">
        <div id="CanvasContainer">
            <canvas id="EViewport">
                Canvas is not supported
            </canvas>
        </div>
    </div>
</body>
</html>

Selection features don't work with chrome either while they work on IE and Firefox. I tried many things (as you can see I tried changing canvas.observe with canvas.on), changed jQuery and jQueryui versions but nothing changed. Using developer tools on Google Chrome doesn't show much. There's no z-index on html elements given by CSS, and I tried disabling different js and CSS but that didn't solve the problem.

I noticed that the problem shows also shows on the demo page of Fabric.js (just tried http://fabricjs.com/stickman/); render works, effects also but no mouse events or selection working.

Is this a bug?


Solution

  • Ok, finally found what's not working. I have a Wacom device attached and looks like latest Chrome version sets a flag about "touch enabled device" and that's breaking my code.

    A simple solution can be changing chrome flags (chrome://flags/)

    Related posts: https://github.com/kangax/fabric.js/issues/450