canvasで画像の合成

デモ：http://mo49.tokyo/qiita/20160504/

canvas.width, canvas.heightでcanvasのサイズ、
drawImage()で画像のサイズを決める。

デモでは風景、フレーム、文字の3枚を合成。

javascript

// 読み込みたい画像のパスの配列 後ろが上にくる
var fileAry = ['img/test1.png', 'img/test2.png', 'img/test3.png'];

var numFiles = fileAry.length;
var loadedCounter = 0;
var imgAry = [];

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

canvas.width = canvas.height = 500;

window.onload = function() {
    loadImgs();
};

function loadImgs(){

    var img = new Image();

    img.addEventListener('load', function(){
        loadedCounter++;
        imgAry.push(img);
        if(numFiles == loadedCounter){
            display(); // 画像をすべて読み込んだら描画
        } else {
            loadImgs();
        }
    }, false);

    img.src = fileAry[imgAry.length];
}

// 参照が残っているとガベージコレクトされないため、
// 明示的にImageオブジェクトを解放
function display(){
    for (var i in imgAry){
        ctx.drawImage(imgAry[i], 0, 0, canvas.width, canvas.height);
        imgAry[i] = null;
    }
}

参考
Canvasに画像を複数枚重ねて描画するには