유형의 오류 HTML5 캔버스에 이미지를 그릴 할 때

Question

단순히 다음 코드를 사용하여 이미지를 그릴려고 :

(function() { 
     var canvas = document.getElementById('canvas'), 
      context = canvas.getContext('2d'); 

     // resize the canvas to fill browser window dynamically 
     window.addEventListener('resize', resizeCanvas, false); 

     function resizeCanvas() { 
       canvas.width = window.innerWidth; 
       canvas.height = window.innerHeight; 
       drawStuff(); 
     } 
     resizeCanvas(); 

     var imageObj = new Image(); 

     imageObj.onload = function() { 
     drawStuff(); 
     }; 
     imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg'; 

     function drawStuff() { 
      context.drawImage(imageObj, 69, 50); 
     } 
})(); 

을하지만

Uncaught TypeError: Type error

오전 오류를 받고 있어요 내가 잘못 가고있어?

Answer 1

imageObj.onload 전에 크기 조정 핸들러가 트리거되고 있습니다.

그런 다음 resizeCanvas()가 존재하지 않는 이미지 객체를 페인트하고 충돌하려고하는 drawStuff를 호출합니다!

function resizeCanvas() { 
    console.log("resize"); 
     canvas.width = window.innerWidth; 
     canvas.height = window.innerHeight; 
     if(imageObj){ 
      drawStuff(); 
     } 
    } 
    resizeCanvas();