When using HTML canvas in Chrome, why do I get better image quality if I do:
ctx.scale(0.5, 0.5);
ctx.drawImage(image, 10,10);
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.scale(0.5, 0.5);
ctx.drawImage(image, 10,10);
instead of:
ctx.scale(0.25, 0.25);
ctx.drawImage(image, 10,10);
In other words, I get better quality if I scale down the image to 50% twice instead of scaling it down to 25% directly. In Chrome, the text gets much less blurry when I scale it in two steps (I'm rendering large PNG's which consists mostly of text).
The canvas is defined as:
<canvas id="canvas" width="2600" height="2400"></canvas>
The image is:
var image = new Image();
image.src = "myimage.png";
Isolation:
I've tried this in Chrome, Firefox, Edge and IE. The higher image quality can only be seen in Chrome. I have seen many other variants (described here on StackOverflow) on how to improve the image quality, but we have a fairly large code-base and introducing some other option would require more of a redesign to our renderer.
Background:
I'm working on a web app which renders large images (3000x3000 pixels). The application allows the user to zoom in/out, pan around and mark objects in the image.
I'm guessing scaling in 2 steps makes the code use some optimization in Chrome, but I'm not sure if this is a reliable way go get better image quality.
