KineticJS - original image displayed on mobile

Question

From the example here: http://www.html5canvastutorials.com/labs/html5-canvas-drag-and-drop-multiple-images-with-kineticjs/

I wanted to use this for some testing purposes on a PhoneGap project. The problem is that once the images are moved, there are identical images stuck in the original starting position. It's like the images have been created twice. This does not happen when viewing from desktop, does any one know how or why this is happening?

function loadImages(sources, callback){
    var images = {};
    var loadedImages = 0;
    var numImages = 0;
    for (var src in sources) {
        numImages++;
    }
    for (var src in sources) {
        images[src] = new Image();
        images[src].onload = function(){
            if (++loadedImages >= numImages) {
                callback(images);
            }
        };
        images[src].src = sources[src];
    }
}

function initStage(images){

    var stage = new Kinetic.Stage("container", wW, wH);

    var layer = new Kinetic.Layer();

    var darthVaderImg = new Kinetic.Image({
        image: images.darthVader,
        x: 100,
        y: 40
    });

    darthVaderImg.draggable(true);

    darthVaderImg.on("dragstart", function(){
        this.moveToTop();
        stage.draw();
    });

    layer.add(darthVaderImg);

    // yoda
    var yodaImg = new Kinetic.Image({
        image: images.yoda,
        x: 350,
        y: 55,
    });

    yodaImg.draggable(true);

    yodaImg.on("dragstart", function(){
        this.moveToTop();
        stage.draw();
    });

    layer.add(yodaImg);

    stage.add(layer);

}

var wH = window.innerHeight,
    wW = window.innerWidth,
    mCanvas = document.getElementById('container'),
    app = {

    initialize: function() {
        this.bindEvents();
    },

    bindEvents: function() {
        document.addEventListener('deviceready', this.onDeviceReady, false);
    },

    onDeviceReady: function() {     
        app.receivedEvent('deviceready');
        var sources = {
            darthVader: "img/darth-vader.jpg",
            yoda: "img/yoda.jpg"
        };
        mCanvas.style.width = wW;
        mCanvas.style.height = wH;
        loadImages(sources, initStage);
    },

    receivedEvent: function(id) {

    }

};

if( typeof PhoneGap !== 'undefined' ) {
    app.initialize();
}else{
    window.onload = function(){
        app.onDeviceReady();
    }
}

Rodrigo Villani Rodrigo Villani · Accepted Answer · 2012-12-01T22:11:37

I've seen this testing my page with Adobe Edge Inspect. But it only happens on it's browser. With Google Chrome for Android it works normally.

KineticJS - original image displayed on mobile

1 Answers