Javascript/HTML5 使用图像填充画布

我正在尝试获取图像来填充我的画布。这是我正在尝试的代码：

var blueprint_background = new Image();
blueprint_background.src = 'images/blueprint_background.png'; 
var pattern = context.createPattern(blueprint_background, "repeat");

context.fillStyle = pattern;
context.fill();

问题是什么也没有显示出来。我能够执行基本的 context.fillRect(..) 示例，但这给我带来了麻烦。

Thanks.

您必须等到图像加载，使用图像的 onload 属性才能知道它何时加载。

var blueprint_background = new Image();
blueprint_background.src = 'images/blueprint_background.png'; 
blueprint_background.onload = function(){
    var pattern = context.createPattern(this, "repeat");
    context.fillStyle = pattern;
    context.fill();
};