Combined result of images exported from canvas
by Thomas B.
HTML
<p>Source images</p>
<div id="sources">
<img id="front" src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/window.png" width=150 height=105>
<img id="middle" src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/person.png" width=48 height=133>
<img id="back" src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/SPback.png" width=150 height=105><br>
</div>
<p>Combined result exported from canvas</p>
<p>To Save: Right-click and Save picture as...</p>
<img id="composition">
CSS
body {
background-color: ivory;
padding:15px;
}
canvas {
border:1px solid red;
}
#sources {
border:5px solid blue;
padding:15px;
width:380px;
}
p {
margin:15px 0;
}
JavaScript
var back = new Image();
back.onload = function () {
draw();
}
back.crossOrigin = "Anonymous";
back.src = "https://dl.dropboxusercontent.com/u/139992952/stackoverflow/SPback.png";
var person = new Image();
person.onload = function () {
draw();
}
person.crossOrigin = "Anonymous";
person.src = "https://dl.dropboxusercontent.com/u/139992952/stackoverflow/person.png";
var awindow = new Image();
awindow.onload = function () {
draw();
}
awindow.crossOrigin = "Anonymous";
awindow.src = "https://dl.dropboxusercontent.com/u/139992952/stackoverflow/window.png";
var count = 0;
function draw() {
count++;
if (count < 3) {
return;
}
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
canvas.width = awindow.width;
canvas.height = awindow.height;
ctx.drawImage(back, 0, 65);
ctx.drawImage(person, 0, 0, person.width, person.height, 200, 125, 71, 200);
ctx.drawImage(awindow, 0, 0);
var result = document.getElementById("composition");
result.src = canvas.toDataURL();
}