使用JavaScript将两幅图像合并为水印

我已经能够使用以下Javascript代码在另一个图像上添加图像:

function watermarkLogo(elemImage) {
    var canvas = document.getElementById("canvas");
    canvas.width = elemImage.naturalWidth;
    canvas.height = elemImage.naturalHeight;
    var myVar = canvas.getContext("2d");

    var img1 = loadImage(elemImage.src, myFunction);
    var img2 = loadImage('icon.png', myFunction);

    var numberOfImages = 0;
    function myFunction() {
        numberOfImages += 1;

        if(numberOfImages == 2) {
            myVar.drawImage(img1, 0, 0);
            myVar.globalAlpha = 0.5;

            var widthOffset = (canvas.width/3)*2;
            var heightOffset = (canvas.height/3)*2;

            myVar.drawImage(img2, widthOffset-50, heightOffset-50, 100, 100);
        }
    }

    function loadImage(src, onload) {
        var img = new Image();
        img.onload = onload;
        img.src = src;
        return img;
    }
}