Raphael Path gets crazy in Firefox

I'm developing a tool to make areas and tripwires and I'm working with Raphael JS. The thing is that I want to build a path dinamically and I think I got it, at least in Chrome, because in Firefox it gets crazy.

What I mean with crazy is that the position of the points do not correspond with the real position of the cursor (and I repeat, only in Firefox).

You have a fiddle I did here.

http://jsfiddle.net/6dd2870b/4/

Any thoughts on why can this be happening?

Thank you in advance.

The javascript code of the fiddle is:

var canvas = document.getElementById('canvas'),
    paper = new Raphael(canvas, canvas.height, canvas.width),
    mousedown = false,
    lastX, lastY, path, pathString, pathAux, pointsAux = [];    


$(canvas).mousedown(function (e) {
   var x = e.offsetX,
       y = e.offsetY;

    if (!mousedown) {
        pathString = 'M ' + x + ' ' + y + ' ';
        mousedown = true;
    } else {
        pathString += 'l ' + (x - lastX) + ' ' + (y - lastY) + ' ';
    }

    pointsAux.push({x: x, y: y});

    path = paper.circle(x,y,9);

    path = paper.path(pathString);   

    lastX = x;
    lastY = y;
});

$(canvas).mousemove(function (e) {

    if (!mousedown) {
       return;
    }

    var x = e.offsetX,
        y = e.offsetY;
    pathAux = pathString +  'l ' + (x - lastX) + ' ' + (y - lastY);
    path.attr('path', pathAux);
});

$('#finish').click(function (e) {

    if ($('#type').val() != 1) {
        pathAux = pathString +  ' z';
        path.attr('path', pathAux);
    } else {
        path.attr('path', pathString);
    }
    mousedown = false;

 });

 $('#cancel').click(function (e) {
     paper.clear();  
     mousedown = false;
  });

I happened to test it again in Firefox v.113.0.1 and somehow is currently working.