I'm currently working on an automated tool that reproduce hand-drawing previously recorded on a canvas. I'm using fabric.js to create a canvas and free draw on it.

In this part of the application, the user can't draw anything but is watching the canvas being drawn on. That's why the canvas is behind an invisible div that blocks all interactions.

So far, I managed to recreate the drawing process using an asynchronous function and by triggering well-timed mouse events at specific locations.

Let's start with some mouse coordinates to use for the path to draw :

var coord = [
    {x: 927, y: 115},
    {x: 925, y: 116},
    {x: 922, y: 116},
    {x: 910, y: 115},
    {x: 899, y: 114}
]

I use a custom function that simulates a mouse event at a specific location :

function simulateMouseEvent(e, eventName, x, y) {
    e.dispatchEvent(new MouseEvent(eventName, {
        view: window,
        bubbles: true,
        cancelable: true,
        clientX: x,
        clientY: y,
        button: 0
    }));
}

To start, I trigger a mousedown event as if the user was clicking on the canvas :

simulateMouseEvent(canvasElement, 'mousedown', coord[0].x, coord[0].y);

Then a for loop launches a bunch of consecutive mousemove events every 200 ms like so :

for (i = 1; i < coord.length; i++) {
     await movement(coord[i]);
}

function movement(coordinates) {
     return new Promise(function(resolve, reject) {
           simulateMouseEvent(canvasElement, 'mousemove', coordinates.x, coordinates.y);
           setTimeout(function() {
               resolve('');
           }, 200);
     })
}

Finally, I stop the drawing by triggering a mouseup event like so :

var last = coord[coord.length - 1];
simulateMouseEvent(canvasElement, 'mouseup' last.x, last.y);

So everything works fine if the user's cursor is not above the canvas (which is what happens most of the time) even though there is a mask theoretically blocking the user's interaction with the canvas.

I believe that triggering a mouse event on a div "activates" it even if that div can't be reached. I tried adding pointer-events: none on the css rule of the canvas wih no difference. Is there a way to block real mouse cursor events while triggering fake ones ?