'CanvasRenderingContext2D'에서 'createPattern'을 실행하지 못했습니다.

Question

HTML5 Canvas에서 오디오 비주얼 라이저로 사용되는 일련의 직사각형에 배경 패턴으로 PNG를 사용하고 있지만 Uncaught TypeError with my 번호 :

HTML :

<canvas id="analyser_render"></canvas> 

JS :

이것은 내 실제 코드의 일부분이다

canvas = document.getElementById('analyser_render'); 
ctx = canvas.getContext('2d'); 

ctx.clearRect(0, 0, canvas.width, canvas.height); 
pattern = ctx.createPattern("images/analyser.png", "repeat-x"); 
ctx.fillStyle = pattern; 

bars = 30; 
for (var i = 0; i < bars; i++) { 
    bar_x = i * 10; 
    bar_width = 9; 
    bar_height = -(dataArray[i]/2); 
    ctx.fillRect(bar_x, canvas.height, bar_width, bar_height); 
} 

, 직사각형의 생성을 포함하는 부분. dataArray 변수는 Web Audio API의 일부이며 문제의 일부가 아닙니다.

Answer 1

이미지를 제대로로드하려면 이미지 객체를 만든 다음 소스를 설정해야합니다.

img = new Image(); 
img.src = 'images/analyser.png'; 

다음 createPattern에 제대로 당신은 또한 이미지로드가 비동기로`onload` 콜백을 사용해야합니다 이미지를로드 할 이미지 오브젝트

pattern = ctx.createPattern(img, "repeat-x");