如何将图像叠加在画布上，然后在画布上绘制？

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";