HTML5/JavaScript Canvas：點擊圖片上的文字

Question

StackOverflow社區，我對JavaScript編程還很陌生，我在HTML5/JavaScript Canvas組合中遇到了一些問題。

想法是，在點擊一個按鈕後，驗證一些行，然後在屏幕上顯示圖像（預定義），並在特定座標中顯示一些文本，文本取決於輸入值，因爲它們存儲在一個數組中。

事情是，我無法在圖像上繪製文本，只有圖像出現。代碼去如下：

全局定義：

... 
canvas = document.getElementById("cvs"), 
ctx = canvas.getContext('2d'), 
... 

的Draw（）函數：

function draw() { 
if (img_is_loaded) { 

img = document.getElementById("background-A"); 

    var maxh = 600, 
    maxw = 900, 
    height = img.height, 
    width = img.width, 
    name_input = name[0], 
    note_input = note[0], 
    date_input = date[0], 
    sur_input = sur[0]; 

    while (height > maxh || width > maxw) { 
     --height; 
     --width; 
    } 

    canvas.height = height; 
    canvas.width = width; 
    ctx.save(); 
    ctx.clearRect(0, 0, width, height); 

    ctx.drawImage(img, 0, 0, width, height); 

    ctx.font = "54px Times Roman"; 
    ctx.fillStyle = "#000000"; 
    ctx.fillText = (name_input, 35, 320); 

    ctx.font = "21px Times Roman"; 
    ctx.fillStyle = "#000000"; 
    ctx.fillText = (note_input, 61, 432); 
    ctx.fillText = (date_input, 254, 501); 
    ctx.fillText = (sur_input, 254, 528); 


    } 


} else { 
    setTimeout(draw, 100); 
} 
} 

我得到的圖片，但沒有文字。我知道這個問題，通常情況下，我需要吸引他們「在同一時間」，所以我嘗試：

function draw() { 
if (img_is_loaded) { 


var imageObj = new Image(); 
imageObj.onload = function(){ 
    var maxh = 600, 
    maxw = 900, 
     height = imageObj.height, 
     width = imageObj.width, 
     name_input = name[0], 
    note_input = note[0], 
    date_input = date[0], 
    sur_input = sur[0]; 

    while (height > maxh || width > maxw) { 
     --height; 
     --width; 
    } 

    canvas.height = height; 
    canvas.width = width; 
    ctx.save(); 
    ctx.clearRect(0, 0, width, height); 
    $('#spinner-generate').hide(); 

    ctx.drawImage(imageObj, 0, 0, width, height); 

    ctx.font = "54px Times Roman"; 
    ctx.fillStyle = "#000000"; 
    ctx.fillText = (name_input, 35, 320); 

    ctx.font = "21px Times Roman"; 
    ctx.fillStyle = "#000000"; 
    ctx.fillText = (note_input, 61, 432); 
    ctx.fillText = (date_input, 254, 501); 
    ctx.fillText = (sur_input, 254, 528); 


    ctx.restore(); 
     } 
imageObj.src = "IMAGEPATH"; 


} else { 
    setTimeout(draw, 100); 
} 
} 

但是，在這種情況下，「imageObj.onload」功能不會被跳過由代碼自動跳轉到「其他」。

在這一點上，我感到非常困惑，因爲我諮詢過的每個源代碼都表示它很「簡單」，並且使用了imageObj.onload示例，但使用了「window.onload」組合。

有什麼我失蹤的關於帆布的「秩序的事情」？

我很感謝，並提前感謝任何答覆或輸入。

Answer 1

您使用fillText作爲一個屬性，而它應該被用來作爲一種方法 - 簡單地改變行格式爲：

ctx.fillText(name_input, 35, 320); 

我沒有檢查代碼的其餘部分。