CODEWITHSUNDEEP
javascripthtmlcanvas
Don P
Don P

Reputation: 63567

Copying between two canvas causes blur

I have two canvases. When I use drawImage() to copy from one canvas to the other, it is blurring the image slightly.

Why is this happening?

This seems like the kind of thing that occurs when theres some sub-pixel rounding. Maybe this is caused by the 45 degree 'rotation'?

Here is an example showing it occur: 

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>

Upvotes: 0

Views: 73

Answers (1)

Thomas
Thomas

Reputation: 181735

This is just antialiasing in action. When rotating twice by 45 degrees, the antialised edges fall slightly outside the original square, and these add up over time.

My goal is to make a canvas where you can draw on it, as the existing contents rotate about the origin.

You can make the drawing actions happen on the original canvas (apply the inverse rotation to the position of the mouse), and then repeatedly draw the original canvas rotated to the output canvas. Data flows in just one direction, from the original to the output, so there's no degradation.

Upvotes: 1

Related Questions