이미지가 발견되었지만 뚜렷하지 않음 Nodejs 및 Express

Question

캔버스가 있고 캔버스에 이미지를로드하려고합니다. 캔버스에 vissible하지만 이미지가 drawed되지 않습니다

client.js

game.viewport = document.getElementById('viewport'); 
    game.card1 = document.getElementById('card1'); 

     //Adjust their size 
    game.viewport.width = game.world.width; 
    game.viewport.height = game.world.height; 

    game.card1.width = game.cards.width; 
    game.card1.height = game.cards.height; 

     //Fetch the rendering contexts 
    game.ctx = game.viewport.getContext('2d'); 
    game.ctx2 = game.card1.getContext('2d'); 

는 텍스트 Summnor2이

game_core.prototype.client_cards = function(game_instance) { 
this.instance = game_instance; 
var img = new Image(); 
img.src = '/images/Chainlinks/AddBurn.png'; 
this.ctx2.drawImage(img,10,20); 
this.ctx2.fillStyle = 'rgba(255,255,255,0.7)'; 
this.ctx2.fillText('Summoner: '+player1, 10 , 20); 

을 game_core.js. node.js의 cmd를 보면 그는 이미지 경로를 찾습니다. 그래서 나는 그것이 어디에 잘못되는지 정말로 모른다.

도와주세요.

Answer 1

다음과 같이 시도해보십시오. 이미지 경로가 올바른지 확인하십시오.

var self = this; 
var img = new Image(); 
img.src = './images/Chainlinks/AddBurn.png'; 
img.onload = function() { 
    self.ctx2.drawImage(img,10,20); 
    self.ctx2.fillStyle = 'rgba(255,255,255,0.7)'; 
    self.ctx2.fillText('Summoner: '+player1, 10 , 20); 
};