HTML5キャンバスをコピー/ペーストする

Question

私はいくつかのキャンバスをオーバーレイするグラフアプリケーションを持っています。私は、ユーザーが画像を右クリックして保存できるようにしたいと思います。ユーザーがこれを今実行すると、（上手く）最上層のキャンバスだけが保存されますが、下位の層は欠落します。右クリックが発生したときに複数のキャンバスを合成する戦略は何でしょうか？

は、ユーザーが右の画像を保存するために、トップキャンバス上でクリックしたときに、トップキャンバス上のすべての下のキャンバスを描くために、

PT

Answer 1

戦略は次のようになり、ありがとうございます。

別のキャンバスに特定のキャンバスを描画するには、drawImage()メソッドを使用できます。ここで

が...これが行うことができるかを示す、

var lowerCTX = document.querySelector('#lowerCanvas').getContext('2d'); 
 
var upperCTX = document.querySelector('#upperCanvas').getContext('2d'); 
 

 
//draw rect on lower canvas 
 
lowerCTX.fillStyle = 'green'; 
 
lowerCTX.fillRect(20, 20, 50, 50); 
 

 
//draw rect on upper canvas 
 
upperCTX.fillStyle = 'red'; 
 
upperCTX.fillRect(130, 130, 50, 50); 
 

 
//add right click event to upper canvas 
 
upperCTX.canvas.onmousedown = function(e) { 
 
    if (e.which === 3) { 
 
     //draw lower canvas on upper canvas 
 
     upperCTX.drawImage(lowerCTX.canvas, 0, 0); 
 
    } 
 
};

body{margin:10px 0 0 0;overflow:hidden}#canvas_wrapper{display: inline-flex}canvas{border: 1px solid #ccc}#upperCanvas{margin-left: -202px}

<div id="canvas_wrapper"> 
 
    <canvas id="lowerCanvas" width="200" height="200"></canvas> 
 
    <canvas id="upperCanvas" width="200" height="200"></canvas> 
 
</div>