Canvas blurry vs sharp using window.devicePixelRatio
by keithphw
HTML
<canvas id="canvas"></canvas>
<canvas id="canvas2"></canvas>JavaScript
// from
// https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio
{let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');
// Set display size (css pixels).
let size = 200;
canvas.style.width = size + "px";
canvas.style.height = size + "px";
// Set actual size in memory (scaled to account for extra pixel density).
let scale = window.devicePixelRatio; // Change to 1 on retina screens to see blurry canvas.
canvas.width = size * scale;
canvas.height = size * scale;
// Normalize coordinate system to use css pixels.
ctx.scale(scale, scale);
ctx.fillStyle = "#bada55";
ctx.fillRect(10, 10, 300, 300);
ctx.fillStyle = "#ffffff";
ctx.font = '18px Arial';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
let x = size / 2;
let y = size / 2;
let textString = "ratio:"+scale;
ctx.fillText(textString, x, y);
}
{let canvas = document.getElementById('canvas2');
let ctx = canvas.getContext('2d');
// Set display size (css pixels).
let size = 200;
canvas.style.width = size + "px";
canvas.style.height = size + "px";
// Set actual size in memory (scaled to account for extra pixel density).
let scale = 1;//window.devicePixelRatio; // Change to 1 on retina screens to see blurry canvas.
canvas.width = size * scale;
canvas.height = size * scale;
// Normalize coordinate system to use css pixels.
ctx.scale(scale, scale);
ctx.fillStyle = "#bada55";
ctx.fillRect(10, 10, 300, 300);
ctx.fillStyle = "#ffffff";
ctx.font = '18px Arial';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
let x = size / 2;
let y = size / 2;
let textString = "ratio:"+scale;
ctx.fillText(textString, x, y);
}