왜 캔버스에 아무것도 표시되지 않습니까?

Question

이 내 코드입니다 : 어떤 이유

var canvas = document.createElement("canvas"); 
var ctx = canvas.getContext("2d"); 
canvas.width = 990; 
canvas.height = 409; 
canvas.style.display='block'; 
var style=canvas.style; 
style.marginLeft="auto"; 
style.marginRight="auto"; 
var position=1; 
var background = new Image(); 
background.src="backdrop3.jpg"; 
var currentImage= new Image(); 

document.body.appendChild(canvas); 
ctx.drawImage(background, 0, 0); 

, 아무것도 내 HTML 캔버스에 나타납니다. 필자는 이미 배경 파일이 같은 위치에 있는지 확인했다. 무엇이 문제 일 수 있습니까?

Answer 1

당신은 다음과 같이,이로드 후 캔버스 에 이미지를 그릴 필요 :

canvas.getContext`전`width`과`height`를 추가

var canvas = document.createElement("canvas"); 
var ctx = canvas.getContext("2d"); 
canvas.width = 990; 
canvas.height = 409; 
canvas.style.display='block'; 
var style=canvas.style; 
style.marginLeft="auto"; 
style.marginRight="auto"; 
var position=1; 
var background = new Image(); 
background.src="backdrop3.jpg"; 

// the important bit 
background.onload = function() { 
    ctx.drawImage(background, 0, 0); 
} 

document.body.appendChild(canvas);