I was using canvas when I saw an image painted on canvas showing blur.
I found the cause and solution to this.
However, there is something I don’t understand. It’s context.scale().
I don’t know in detail what function scale(dpr, dpr) is, but I think maybe this will adjust css pixel to physical pixel to fit dpr value.
If my guess is correct, I have a question.
I’m using an environment(display) with a dpr value of 2.
I’m using an environment(display) where the dpr value is 2. I think that even without the context.scale(), the CSS pixels of the canvas will be automatically adjusted to physical pixels.
Because my display has a dpr value of 2..
So, why do i use the context.scale(dpr, dpr)?
Isn’t it unnecessary?
Most of the codes I looked for for blur troubleshooting were using the scale().
html
<body>
<canvas id="screen"></canvas>
<script src="index.js"></script>
</body>
Javascript
const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
const dpr = window.devicePixelRatio
canvas.style.width = "300px";
canvas.style.height = "400px";
canvas.width = dpr * 300;
canvas.height = dpr * 400;
// ctx.scale(dpr, dpr); // Isn't it unnecessary?
ctx.strokeRect(100, 100, 150, 150);