キャンバスでは、drawImageとpngとの違いとストロークを使用して描画を作成しますか？

Question

キャンバスでの処理方法が異なるのはなぜですか？例：キャンバスにpngを配置すると、キャンバスに線を描画します。そのキャンバスのコンテンツを別のキャンバスにコピーすると、その行だけがコピーされます。

var thecanvas = document.getElementById('mycanvas'); 
var context = thecanvas.getContext('2d'); 

// put a png on the canvas 
var img = new Image(); 
img.onload = function(){ context.drawImage(img,0,0); }; 
img.src = 'images/test.png';   

// draw a line on the canvas 
context.moveTo(100, 150); context.lineTo(450, 50); context.stroke(); 

final_image = thecanvas.toDataURL("image/png"); 
copyimg = new Image(); 
copyimg.src = final_image;   
var newcanvas = document.getElementById('newCanvas'); 
var newcanvascontext = newcanvas.getContext('2d'); 

// why is only the line I drew copied over and not the png image??? 
newcanvascontext.drawImage(copyimg,0,0,397,397); 

Answer 1

イメージのロードイベントに注意してください。画像が読み込まれる前にキャンバスがコピーされます。 http://jsfiddle.net/diode/3NHXy/5/

：あなたはこの

var thecanvas = document.getElementById('mycanvas'); 
var context = thecanvas.getContext('2d'); 

// put a png on the canvas 
var img = new Image(); 
img.onload = function(){ 

     context.drawImage(img,0,0); 

     var newcanvas = document.getElementById('newCanvas'); 
     var newcanvascontext = newcanvas.getContext('2d'); 
     newcanvascontext.drawImage(thecanvas,0 ,0); 

}; 
img.src = 'http://www.mygreatiphone.com/wp-content/uploads/2011/11/google.png';   

// draw a line on the canvas 
context.moveTo(100, 150); context.lineTo(450, 50); context.stroke(); 

はデモを参照してくださいようにしなければなりません