サイズの異なる 2 つのキャンバスがあります。私の目標は、ユーザーの描画をメイン キャンバスから 2 番目のキャンバスに縮小版としてコピーすることです。これまでのところ、drawImage() とスケールは機能しているように見えますが、2 番目のキャンバスには新しいコピーと共にメインの図面の古いバージョンが保持されています。drawImage() を呼び出す前に毎回クリアしようとしましたが、何もしていないようです。関数が実行されるたびに現在の画像だけをセカンダリ キャンバスにコピーするにはどうすればよいですか?
$('#hand').dblclick(function(){
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
//var imageData = context.getImageData(0, 0, 100, 100);
var newCanvas = document.getElementById('scaledCanvas');
var destCtx = newCanvas.getContext('2d');
destCtx.clearRect(0, 0, newCanvas.width, newCanvas.height);
destCtx.scale(.5,.5);
destCtx.drawImage(canvas, 0, 0);
});
必要に応じて、さらにコードを含めることができます。また、スケールが呼び出され続けていることにも気付きました。これは、新しくコピーされたイメージが毎回小さくなる理由を説明しているため、別の問題である可能性があります。