HTML 5 画布图像叠加可重复

Question

我正在尝试采用一种模式并将其应用于png图像，但仅覆盖与此类似的图像的非透明部分。

http://jsfiddle.net/eLmmA/1/

$(function() {
var canvas = document.createElement('canvas');
canvas.width = 250;
canvas.height = 250;
var canvas_context = canvas.getContext("2d");
var img = new Image();
img.onload = function(){
var msk = new Image();
msk.onload = function(){
canvas_context.drawImage(img, 0, 0);
canvas_context.globalCompositeOperation = "destination-in";
canvas_context.drawImage(msk, 0, 0);
canvas_context.globalCompositeOperation = "source-over";
};
msk.src = 'https://i.stack.imgur.com/QtQrZ.png';
}
img.src = 'https://i.stack.imgur.com/MDGFY.jpg';
document.body.appendChild(canvas);

}(;

上面的例子非常接近我想要的，但我需要能够使用较小的纹理图像并在无图案图像上重复它。我不熟悉如何正确使用画布，但试图了解更多信息。

提前感谢！

Answer 1

没关系，我想通了。

var canvas = document.createElement('canvas');
canvas.width = 250;
canvas.height = 250;
var canvas_context = canvas.getContext("2d");
var img = new Image();
img.onload = function(){
var msk = new Image();
msk.onload = function(){
var ptrn = canvas_context.createPattern(img, 'repeat');
canvas_context.fillStyle = ptrn;
canvas_context.fillRect(0, 0, canvas.width, canvas.height);
canvas_context.drawImage(img, 0, 0);
canvas_context.globalCompositeOperation = "destination-in";
canvas_context.drawImage(msk, 0, 0);
canvas_context.globalCompositeOperation = "source-over";

};
msk.src = $('#base_url').data('base')+'assets/themes/img/download.png';
}
img.src = $('#base_url').data('base')+'assets/uploads/thumbs/1381413411Purple-Night-Owls-thumb.jpg';

$('#itemPreview').html(canvas);