SO - how to embed an image on top of another

http://stackoverflow.com/q/8395613/1011582

HTML

<div id="result">
</div>

<img id="main" class="hide" src="../img/logo.png"/>
<img class="small hide" src="../img/logo.png" data-posx="25" data-posy="30" />
<img class="small hide" src="../img/logo.png" data-posx="55" data-posy="55"  />

CSS

body {
    background-color: #3D668F;
}

.hide {
    visibility: hidden;
}

JavaScript

function process(main, rest, width, height) {
    var canvas = document.createElement("canvas");
    canvas.width = width || main.width;
    canvas.height = height  || main.height;

    var ctx = canvas.getContext("2d");
    ctx.drawImage(main, 0, 0);

    for(var i = 0, l = rest.length; i < l; i++) {
        var img = rest[i];
        ctx.drawImage(img, img.getAttribute("data-posx"), img.getAttribute("data-posy"));
    }
    
   return canvas.toDataURL("image/png");
}

var img = document.createElement("img");
img.src = process(document.getElementById("main"), document.getElementsByClassName("small"), 400, 400);
document.getElementById("result").appendChild(img);