如何將圖像疊加在畫布上，然後在畫布上繪製？

Question

我已將所有代碼編制在單獨的.js文件的畫布上，所以現在我只需要放置圖像。

雖然普通方法無法正常工作，但無法使圖像正常工作。我已經試過這樣：

var canvasvar; 
var contextvar; 
canvasvar = document.getElementById("canvas"); 
contextvar = canvas.getContext("2d"); 
var imageObj = new Image(); 
imageObj.src = "http://wannabevc.files.wordpress.com/2010/09/im-cool.jpg"; 
contextvar.drawImage(imageObj,10,10); 

一兩件事，我應該把這個html文件中，一個<script></script>內底，或者我應該把它放在js文件中有「畫的東西」代碼？我無法上班，它沒有錯誤地運行，但在畫布上看不到任何圖像。所以我仍然可以繪製，但沒有圖像出現。我猜圖像是在畫布之下。

我猜這是因爲我沒有製作一個畫布 - 我在其中的另一個js文件中編寫了所有這些編程。

我也試過在.js代碼中將這段代碼放在initCanvas函數中。這實際上是創建畫布。這裏是initCanvas函數的代碼：

// Retrieve canvas reference 
canvas = document.getElementById("canvas"); 

// Size canvas 
canvas.width = 600; 
canvas.height = 400; 

// Retrieve context reference, used to execute canvas drawing commands 
context = canvas.getContext('2d'); 
context.lineCap = "round"; 

// Set control panel defaults 
document.getElementById("thickness").selectedIndex = 0; 
document.getElementById("color").selectedIndex = 1; 

// Overlay image over the canvas. THIS PART IS WHAT I'M ASKING ABOUT. This is usually 
// not in the code 

var canvasvar; 
var contextvar; 
canvasvar = document.getElementById("canvas"); 
contextvar = canvas.getContext("2d"); 
var imageObj = new Image(); 
imageObj.src = "http://wannabevc.files.wordpress.com/2010/09/im-cool.jpg"; 
contextvar.drawImage(imageObj,10,10); 

所以在這個代碼的最後部分是什麼，我說什麼。雖然它不工作。

Answer 1

給你的圖像的時間來加載使用imageObj.onload

var canvasvar = document.getElementById("canvas"); 
var contextvar = canvas.getContext("2d"); 
var imageObj = new Image(); 
imageObj.onload=function(){ 
    contextvar.drawImage(imageObj,10,10); 
} 
imageObj.src = "http://wannabevc.files.wordpress.com/2010/09/im-cool.jpg";