2つのキャンバスをコピーするとぼやけが発生します

Question

2つのキャンバスがあります。あるキャンバスから別のキャンバスにコピーするのにdrawImage()を使用すると、画像がわずかにぼやけています。

どうしてですか？

これは、いくつかのサブピクセルが丸められるときに発生するようなものです。たぶん、これは45度の回転によるものでしょうか？ここで

は、それが起こるを示す例である：

var canvas = document.getElementById("canvas"); 
 
var ctx = canvas.getContext("2d"); 
 

 
var tempCanvas = document.getElementById("tmpCanvas"); 
 
var tempCtx = tempCanvas.getContext("2d"); 
 

 
canvas.width = canvas.height = 200; 
 
tempCanvas.width = canvas.width; 
 
tempCanvas.height = canvas.height; 
 

 
// translate origins 
 
ctx.translate(canvas.width/2, canvas.height/2); 
 
tempCtx.translate(canvas.width/2, canvas.height/2); 
 

 
// Create a red square 
 
ctx.fillStyle = "rgba(255,0,0, 0.1)"; 
 
ctx.fillRect(-50, -50, 100, 100); 
 

 
var angle = 0; 
 

 
// Each draw we copy the current canvas to the tmpCanvas. Then copy it back to the original canvas. 
 
function draw() { 
 
    angle += 45; 
 

 
    tempCtx.save(); 
 
    tempCtx.rotate(angle * Math.PI/180); 
 
    tempCtx.drawImage(
 
    canvas, 
 
    0, // sourceX 
 
    0, // sourceY - note that source ignores translation. It's not a canvas context, so we choose top left corner of the canvas to start copying pixels. 
 
    canvas.width, // sourceWidth 
 
    canvas.height, // sourceHeight 
 
    -0.5 * canvas.width, // destinationX 
 
    -0.5 * canvas.height, // destinationY 
 
    canvas.width, // destinationWidth 
 
    canvas.height // destinationHeight 
 
); 
 
    tempCtx.restore(); 
 

 
    ctx.drawImage(
 
    tempCanvas, 
 
    0, 
 
    0, 
 
    canvas.width, 
 
    canvas.height, 
 
    -0.5 * canvas.width, 
 
    -0.5 * canvas.height, 
 
    canvas.width, 
 
    canvas.height 
 
); 
 

 
    // requestAnimationFrame(draw); 
 
} 
 

 
document.addEventListener("click", draw);

canvas { 
 
     border: 1px solid blue; 
 
     }

<p> 
 
Click to trigger a "draw". 
 
<br/> 
 
A draw will do this:<br/> 
 
1. rotate the bottom canvas by 45 degrees.<br/> 
 
2. copy the top canvas to the bottom canvas<br/> 
 
3. copy the bottom canvas to the top canvas<br/> 
 
</p> 
 
<br/> 
 
<p> 
 
Clicking repeatedly will "blur" the squares. Why? 
 
</p> 
 
<br/> 
 
</p> 
 
<canvas id="canvas"></canvas> 
 
<canvas id="tmpCanvas"></canvas>

Answer 1

これは単なるアクションでアンチエイリアスされています。 45度に2度回転すると、アンチエイリア処理されたエッジが元の正方形の外側にわずかに落ち、これらは時間とともに増加します。

私の目標は、既存のコンテンツが原点を中心に回転するため、キャンバスを描画できる場所を作ることです。

元のキャンバスで描画操作を行い（マウスの位置に逆回転を適用）、出力キャンバスに回転された元のキャンバスを繰り返し描画できます。データはオリジナルから出力に向かう一方向にしか流れないため、劣化はありません。