[HTML] 多個Canvas合併為一個Canvas

多個canvas合併為一個

要先建立一個新的canvas 來畫出要合併的三個canvas

//三張圖合併一張圖
var canvas1 = document.querySelectorAll('Canvas')[0];
var canvas2 = document.querySelectorAll('Canvas')[1];
var canvas3 = document.querySelectorAll('Canvas')[2];
var canvas = document.getElementById("finalCanvas");
canvas.height = canvas1.clientHeight + canvas2.height + canvas3.height;
canvas.width = canvas1.width;
var domContext = canvas.getContext('2d');

domContext.drawImage(canvas3, 0, canvas1.height + canvas2.height);
domContext.drawImage(canvas2, 0, canvas1.height );
domContext.drawImage(canvas1, 0, 0);
 
var dataURL = canvas.toDataURL();   //get base64 img