html5 canvas에서 image를 불러올 때 TypeError

 

 

 

Error Message :  Uncaught TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(CSSImageValue or HTMLImageElement or SVGImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap or OffscreenCanvas)'

 

cxt.drawImage()로 이미지 주소를 통해 이미지를 호출할 때 발생하는 에러입니다.

 

이미지가 로드되기전에 drawImage메서드를 호출할 수 없습니다.

 

img 태그에 이미지를 미리 불러온 후 img태그에 들어있는 이미지를 canvas에 입력면 해결됩니다.

 

window.onload = function() { 
  var canvas = document.getElementById("myCanvas"); 
  var ctx = c.getContext("2d"); 
  var img = document.getElementById("myImage"); 
  ctx.drawImage(img, 0, 0); 
}

이미지가로드되기 전에 drawImage () 메서드를 호출 할 수 없습니다. 이미지가로드되었는지 확인하려면 window.onload () 또는 document.getElementById ( "imageID"). onload에서 drawImage ()를 호출 할 수 있습니다.