캔버스의 My EaselJS 비트 맵이 Firefox에서 제대로 렌더링되지만 (somtimes) 크기가 조정되지 않고 Chrome에서 전체 캔버스를 차지합니까?

Question

그래서 (더 압축 된 피들 (Fiddle)을 더 압축하고 있습니다.) open this in chrome을 살펴보고 화살표 키를 사용하여 Jay-Z를 움직여 4 ~ 5 개 정도의 케이크를 잡습니다.

당신은 화면의 왼쪽에 대규모 먹고 지금이 있음을 알 수 있습니다.

내 handleTick 함수에서 케이크 위치를 업데이트하고 시간 간격으로 새 케이크를 추가합니다.

/*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); 
} 

그리고 setInterval을 부분 : 여기의 모두

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

stage.update은 handleTick에서 호출됩니다. 이것으로 찾고에 대한

Here is the entire JS file

감사합니다. 다시 한번이 문제는 Chrome에서만 발생하며 Firefox에서 발생하지는 않습니다. 현재 다른 브라우저와 관련이 없습니다.

Answer 1

항목의 출처를 사용하는 대신 실제로로드 된 이미지를 사용하는 것이 더 적합 할 수 있습니다. 소스를 전달하면 이미지의 너비/높이가 처음으로 0이되어 스케일링 문제가 발생할 수 있습니다.

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