填充文本方法不改變在畫布

Question

各方面，我嘗試使用ctx.fillText方法來改變每個畫布上的文字給定文本，但所有的畫布都顯示給畫布的最後文本。

var ctx = document.getElementById('myCanvas-' + i).getContext('2d'); 
image = new Image(); 
candidatePerformance = $('#performance'+i).val(); 
skillSet = $('#skillSet'+i).val(); 
verificationId = $('#verificationId'+i).val(); 
(function(ctx, image) { 
    image.onload = function() { 
     ctx.drawImage(image, 0, 0); 
     ctx.font = '15pt Arial '; ctx.fillStyle = "#fff"; ctx.textAlign = 'left'; ctx.fillText(skillSet,10,125); 
     ctx.font = '15pt Arial'; ctx.fillStyle = "#fff"; ctx.textAlign = 'left'; ctx.fillText(performance,160,155); 
     ctx.font = '15pt Arial'; ctx.fillStyle = "#fff"; ctx.textAlign = 'left'; ctx.fillText(verificationId,49,185); 
    }; 
    image.src = $('#img'+i).val(); 
})(ctx, image); 

Answer 1

這裏是一個的jsfiddle：https://jsfiddle.net/CanvasCode/z7xa757w/

image = new Image(); 
image.src = "https://upload.wikimedia.org/wikipedia/commons/1/1e/Large_Siamese_cat_tosses_a_mouse.jpg"; 

image.onload = function() { 
    for (i = 1; i < 4; i++) { 
     var ctx = document.getElementById('myCanvas-' + i).getContext('2d'); 

     var candidatePerformance = $('#performance' + i).val(); 
     var skillSet = $('#skillSet' + i).val(); 
     var verificationId = $('#verificationId' + i).val(); 

      ctx.drawImage(image, 0, 0); 
      ctx.font = '15pt Arial '; 
      ctx.fillStyle = "#000"; 
      ctx.textAlign = 'left'; 
      ctx.fillText(skillSet, 10, 125); 
      ctx.font = '15pt Arial'; 
      ctx.fillStyle = "#000"; 
      ctx.textAlign = 'left'; 
      ctx.fillText(performance, 160, 155); 
      ctx.font = '15pt Arial'; 
      ctx.fillStyle = "#000"; 
      ctx.textAlign = 'left'; 
      ctx.fillText(verificationId, 49, 185); 

    } 
}