Сохранение многослойного холста angularjs javascript

Question

У меня есть многослойный холст, который я хочу сохранить локально с помощью кнопки (в конечном итоге его нужно будет сохранить в aws, но сейчас я пытаюсь выяснить, как это сделать локально).Я хочу один файл PNG всего холста, а не только один слой.Как бы я это сделал, я попробовал несколько учебных пособий, но они не работают.Я только начал использовать javascript и angularjs, так что терпите меня

AngularJS / HTML

<div style="position: relative; border: 1px solid black;">
<canvas id="layer1" width="200" height="200" style="position: absolute; left: 0; top: 0; z-index: 0;"></canvas>

<canvas id="layer2" width="200" height="200" style="position: absolute; left: 0; top: 0; z-index: 1;"></canvas>
</div> 

<p><button onclick="body()">Body</button></p>
<p><button onclick="hairstyle1()">Hair style 1</button></p>
<p><button onclick="hairstyle2()">Hair style 2</button></p>

Javascript

function body() {
var canvas = document.getElementById('layer1');
var ctx = canvas.getContext('2d');
var imageObj = new Image();

imageObj.onload = function() {
  ctx.drawImage(imageObj, 0, 0, imageObj.width, imageObj.height);
};
imageObj.src = 'body.png';
}

function hairstyle1() {
var canvas = document.getElementById('layer2');
var ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, canvas.width, canvas.height);
var imageObj = new Image();

imageObj.onload = function() {
  ctx.drawImage(imageObj, 50, 7, imageObj.width, imageObj.height);
};
imageObj.src = 'hair1.png';
}

function hairstyle2() {
 var canvas = document.getElementById('layer2');
 var ctx = canvas.getContext('2d');
 ctx.clearRect(0, 0, canvas.width, canvas.height);
 var imageObj = new Image();

 imageObj.onload = function() {
  ctx.drawImage(imageObj, 50, 7, imageObj.width, imageObj.height);
};
imageObj.src = 'hair2.png';
}

Answer 1

Если холсты имеют одинаковый размер, вы можете использовать drawImage для рисования каждого из них на другом холсте.

var newCanvas = document.createElement('canvas');
newCanvas.width = 200;
newCanvas.height = 200;
var newCtx = newCanvas.getContext('2d');
newCtx.drawImage(document.getElementById("layer1"), 0, 0);
newCtx.drawImage(document.getElementById("layer2"), 0, 0);
// convert to url
console.log(newCanvas.toDataURL());

По сути, холсты также можно рассматривать как объекты изображений.