Slow kinetic.js drawing in Firefox

Question

i have some problems with Kinetic.js (5.0.1) in Debian with firefox (in Windows works well, in chromium works well). I'm trying to do a drawing board but is very slow. Any solution to improve performance?

Thank you.

PD: here is my code.

var initializeDrawings = function() {
    var myExistingLine;
    var currentLine = [];
    var mouseDrag = false;
    var stage;
    var background;
    var backgroundlayer = new Kinetic.Layer();
    var mylayer = new Kinetic.Layer();
    var lineColor = 'black';
    var lineWeight = 5;
    var allmoves = [];
    // Create an invisible shape that will act as an event listener
    stage = new Kinetic.Stage({
        container: 'container',
        width: 600,
        height: 600
    });
    var imageObj = new Image();
    imageObj.onload = function() {
        background = new Kinetic.Image({
            width: stage.getWidth(),
            height: stage.getHeight(),
            image: imageObj
        });
        // Attach handlers
        background.on('mousedown touchstart', function(e) {
            var position = getPosition("container", e);
            mouseDrag = true;
            myExistingLine = new Kinetic.Line({stroke: lineColor, strokeWidth: lineWeight});
            mylayer.add(myExistingLine);
            currentLine.push(position.x);
            currentLine.push(position.y);
        });
        background.on('mousemove touchmove', function(e) {
            if(mouseDrag === true) {
                var position = getPosition("container", e);
                currentLine.push(position.x);
                currentLine.push(position.y);
                myExistingLine.setPoints(currentLine);
                mylayer.batchDraw();
            }
        });
        background.on('mouseup touchstop', function(e) {
            allmoves.push ({ color: lineColor, grosor: lineWeight, points: currentLine });
            mouseDrag = false;
            currentLine = [];
        });
        stage.add(backgroundlayer.add(background));
        stage.add(mylayer);
    }
    imageObj.src = "summoners-map.png";
};

Answer 1

Use mylayer.batchDraw instead of mylayer.drawScene.

batchDraw redraws your line only once per refresh cycle instead of attempting many redraws.

...And, don't do console.log in an active event handler like mousemove.