drawImage not drawing

Question

이미지 자르기를 그려서 캔버스에 그려 넣으 려하지만 브라우저에서 실행하면 캔버스가 흰색으로 남아 있습니다. 오류가 나타나지 않습니다.

var imgSprite = new Image(); 
imgSprite.src = 'sprite.png'; 
imgSprite.addEventListener('load', init, false); 

function init(){ 
    drawBg(); 

} 
function drawBg() { 
    var sourceX =0; 
    var sourceY =0; 
    var sourceWidth =800; 
    var sourceHeight =500; 
    var destWidth =800; 
    var destHeight =500; 
    var destX =0; 
    var destY =0; 
    //ctxBg.clearRect(0, 0, gameWidth, gameHeight); 
    ctxBg.drawImage(imgSprite, sourceX,sourceY,sourceWidth,sourceHeight, 
     destWidth,destHeight,destX,destY); 
} 

Answer 1

마지막 네 개의 매개 변수가 잘못된 순서에 있습니다. 다음과 같아야합니다.

ctxBg.drawImage(imgSprite, sourceX,sourceY,sourceWidth,sourceHeight, 
     destX,destY,destWidth,destHeight); // x,y before width,height 

모든 오버로드 및 대화 형 예제는 을 참조하십시오.

Answer 2

귀하의 파라미터 세트는 drawImage()

ctxBg.drawImage(imgSprite, 0, 0, gameWidth, gameHeight); 

데모에 사용 가능한 매개 변수 세트 중 하나를 일치하지 않습니다 :의 drawImage에 Fiddle