Kopieren und Einfügen eines Canvas in eine andere Canvas-Ecke

Question

Ich habe zwei Leinwände auf meiner HTML-Seite und was ich eigentlich tun möchte, ist alles in die erste Leinwand in der rechten unteren Ecke des zweiten Canvas einfügen. Dieser ist der Code Ich habe versucht:

<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> 

Problem ist: eine zweite Leinwand zeigt Bild aber nicht zeigen erste Leinwand in seiner rechten unteren Ecke.

Bitte würdig Jungs, ich brauche die Antwort. Es ist sehr wichtig. Vielen Dank an alle Helfer.

Answer 1

Die Art und Weise, wie Sie die erste Leinwand auf der zweiten zeichnen, ist nicht korrekt. Sie können eine Leinwand auf einer anderen Leinwand mit der Methode drawImage() direkt zeichnen.

var first = document.getElementById('first').getContext('2d'); 
 
var sec = document.getElementById('second').getContext('2d'); 
 

 
// draw on first canvas 
 
first.fillStyle = '#07C'; 
 
first.fillRect(0, 0, first.canvas.width, first.canvas.height); 
 

 
// draw image on second canvas 
 
var img = new Image(); 
 
img.src = "http://lorempixel.com/300/300"; 
 
img.onload = function() { 
 
    sec.drawImage(img, 0, 0, sec.canvas.width, sec.canvas.height); 
 
    sec.drawImage(first.canvas, 100, 100, 100, 100); // draw first canvas on a portion of second canvas 
 
};

body {display: flex}

<canvas id="first" width="200" height="200"></canvas> 
 
<canvas id="second" width="200" height="200"></canvas>