Как сохранить несколько элементов холста в одно изображение (javascript)

Question

Как я могу объединить (добавить, если это имеет смысл, а не составлять) элементы холста в одно изображение? Идея в том, чтобы иметь что-то вроде флага в вертикальном положении.

В настоящее время у меня есть:

var cHeader = document.getElementById("headerImg");
var ctx = cHeader.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(20, 20, 150, 100);

var cBody = document.getElementById("bodyImg");
var ctx = cBody.getContext("2d");
ctx.fillStyle = "#000000";
ctx.fillRect(20, 20, 150, 100);

var cFooter = document.getElementById("footerImg");
var ctx = cFooter.getContext("2d");
ctx.fillStyle = "#FFFF00";
ctx.fillRect(20, 20, 150, 100);

<canvas id="headerImg"></canvas><br />
<canvas id="bodyImg"></canvas><br />
<canvas id="footerImg"></canvas><br />

Спасибо