Javascript HTML5画布图像覆盖可重复

我试图采取一种模式，并适用于一个png图像，但只涵盖图像的非透明部分类似于这一个

}))

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

---

提前谢谢

没关系，我知道了

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

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