My EaselJS bitmaps on the canvas render properly in Firefox but (sometimes) are not scaled and take up the entire canvas in Chrome?

Question

To demonstrate this (I'm working on a much more compressed Fiddle), open this in chrome, and move Jay-Z using your arrow keys and catch about 4 - 5 (sometimes more!) cakes.

You will notice that there is a massive cupcake on the left side of the screen now.

I update the cakes' positions in my handleTick function, and add new cakes on a time interval. Here are both of those:

/*This function must exist after the Stage is initialized so I can keep popping cakes onto the canvas*/
function make_cake(){
    var path = queue.getItem("cake").src;
    var cake = new createjs.Bitmap(path);
    var current_cakeWidth = cake.image.width;
    var current_cakeHeight = cake.image.height;
    var desired_cakeWidth = 20;
    var desired_cakeHeight = 20;
    cake.x = 0;
    cake.y = Math.floor((Math.random()*(stage.canvas.height-35))+1); //Random number between 1 and 10
    cake.scaleX = desired_cakeWidth/current_cakeWidth;
    cake.scaleY = desired_cakeHeight/current_cakeHeight;
cake.rotation = 0;
    cake_tray.push(cake);
    stage.addChild(cake);
}

And the setInterval part:

setInterval(function(){
    if (game_on == true){
        if (cake_tray.length < 5){
            make_cake();
        }
    }
    else{
        ;
    }
},500);

stage.update is also called from handleTick.

Here is the entire JS file

Thanks for looking into this. Note once again that this only happens in Chrome, I have not seen it happen on Firefox. Not concerned with other browsers at this time.

Answer 1

Instead of using the source of your item, it might make more sense to use the actual loaded image. By passing the source, the image may have a 0 width/height at first, resulting in scaling issues.

// This will give you an actual image reference
var path = queue.getResult("cake");