Javascript 将一个画布复制并粘贴到另一个画布中'；s角

我的HTML页面上有两个画布，我实际上想做的是将第一个画布中的所有内容粘贴到第二个画布的右下角。 这是我尝试的代码：

<canvas id="first"></canvas>
<canvas id="second"></canvas>
<script>
var first = document.getElementById('first').getContext('2d');
var sec = document.getElementById('second').getContext('2d');

//--code for drawing in first canvas--

var img = new Image();
img.src="imgName.jpg";
img.onload = function() {
    sec.drawImage(img,0,0,sec.canvas.width,sec.canvas.height);

//Actually i want first canvas to overlap image on second canvas

    var paste = new Image();
    paste.src = first.canvas;
    paste.onload = function() {

        sec.drawImage(paste,100,100,400,600);

    };
};
</script>

var first=document.getElementById（'first'）.getContext（'2d'）；
var sec=document.getElementById（'second'）.getContext（'2d'）；
//--在第一个画布中绘制的代码--
var img=新图像（）；
img.src=“imgName.jpg”；
img.onload=函数（）{
sec.drawImage（img，0,0，sec.canvas.width，sec.canvas.height）；
//实际上，我希望第一个画布与第二个画布上的图像重叠
var paste=新图像（）；
paste.src=first.canvas；
paste.onload=函数（）{
sec.drawImage（粘贴，100400600）；
};
};

问题是：第二个画布显示图像，但在其右下角不显示第一个画布

---

请尊敬的各位，我需要答案。这非常重要。首先感谢所有帮助人员。

在第二个画布上绘制第一个画布的方式不正确。您可以使用

drawImage（）

方法直接在另一个画布上绘制画布

var first=document.getElementById（'first'）.getContext（'2d'）；
var sec=document.getElementById（'second'）.getContext（'2d'）；
//在第一张画布上画画
first.fillStyle='#07C'；
first.fillRect（0，0，first.canvas.width，first.canvas.height）；
//在第二张画布上绘制图像
var img=新图像（）；
img.src=”http://lorempixel.com/300/300";
img.onload=函数（）{
sec.drawImage（img，0，0，sec.canvas.width，sec.canvas.height）；
sec.drawImage（first.canvas，100100100）；//在第二个画布的一部分上绘制第一个画布
};
body{display:flex}

console选项卡上显示“未能加载：first.canvas”{display:flex；}用于什么？仅用于样式设置，因此您可以在代码段上并排看到两个画布。你不必担心