Getting everything duplicated in KineticJS

Question

I'm using kineticJS in an application that allows the user to draw some lines in the screen, whose information is saved in localStorage, so when the user comes back they can be restored.

The problem is that it doesn't matter which method I use to store and restore them, each line is always draw two times, with one of the copies being some kind of "ghost line" (not being anywhere inside Kinetic). And this only happens in the default browser of Android, and in the webView when I generate an apk for this application...

As for the store/restore procedure, I have tried with two different approachs:

First one:

//Store
localStorage.setItem('stage', KineticStage.toJSON() );

//Restore
KineticStage = Kinetic.Node.create ( localStorage.getItem('stage'), 'container');

Second one:

//Store
var linesArray = [];
KineticStage.find('.line').each(function(line){ 
    linesArray.push({ 'points':line.points(), 'color':line.getAttr('stroke') });
});

//Restore
KineticStage = new Kinetic.Stage({container: 'container'});
KineticLayer = new Kinetic.Layer();
var savedStage = localStorage.getItem('stage');
for (var i=0; i<savedStage.length; i++){
    var newline = new Kinetic.Line({
        points: savedStage[i].points,
        stroke: savedStage[i].color,  
        opacity : 0.5,              
    });    
    newline.on('mousedown touchstart', function(){
        this.remove();
        KineticLayer.draw();
    });
    KineticLayer.add(newline);
}
KineticStage.add(KineticLayer);
KineticLayer.draw(); 

Before doing the 'Restore' part, I have tried everything to clear the Kinetic stage, like

 if (KineticLayer != null){
     KineticLayer.destroyChildren();
     KineticLayer.clearCache();
     KineticLayer.clear();
     KineticLayer.destroy(); 
}
if (KineticStage != null){
     KineticStage.destroyChildren();
     KineticStage.clearCache();
     KineticStage.clear();
     KineticStage.destroy();
}

With any of the methonds, I obtain the "duplicate" lines in screen. It is easy to spot them because they become much less transparents than when they are just draw originally, and because when I try to delete one line (see the .on(mousedown) method in them), there is deleted only one of them, the other one remaining, and being not possible to delete it by clicking it (when everyline should have attached that listener).

And if I try something like

console.log( KineticStage.find('.line') );

I only obtain the ones that there should be in screen, not the duplicated ones.

And KineticStage is the only stage I find if I do

console.log(Kinetic.stages);

I am really lost with this problem, I have tried a lot more of approaches, but I always obtain the same bug, and as I say, only in the Android default browser and in the apk webView.

I will appreciate a lot any help! Thanks.

Answer 1

This is just buggy canvas of android. You can use some hacks to avoid this behaviour. For example draw to canvas (layer) with small delay after inserting it to page. See more information there: http://slash-system.com/en/how-to-fix-android-html5-canvas-issues/