@ font-face를 통해 자신의 글꼴 가져 오기가 HTML 캔버스에서 작동하지 않습니다.

Question

글꼴이 링크되어 있지 않은 것으로 보입니다. 내가 생각할 수있는 모든 것을 시도했습니다. 그것이 작동하지 않는 이유.

//CSS 
@font-face { 
font-family: 'fontOne'; 
src: url(../assets/fonts/fontOne.otf); 
} 

//JS 

var canvas = document.getElementById("myCanvas"); 
var ctx = canvas.getContext("2d"); 


ctx.font = fontSize + 'pt fontOne'; 
ctx.fillStyle = colour; 
ctx.fillText(dataVal, posX, posY); 

Answer 1

캔버스에 그리기 전에 브라우저가 글꼴을로드 할 때까지 기다려야합니다. 내가 가장 좋아하는 자바 스크립트 라이브러리는 아마도 Font Face Observer입니다.