Why are these radar blips scaling up all wrong on resize?
function setupRadarDisplay(canvas, blips) {
const ctx = canvas.getContext('2d');
const dpr = window.devicePixelRatio || 1;
const rect = canvas.getBoundingClientRect();
canvas.width = Math.floor(rect.width * dpr);
canvas.height = Math.floor(rect.height * dpr);
ctx.scale(dpr, dpr);
function render() {
ctx.clearRect(0, 0, rect.width, rect.height);
ctx.lineWidth = 1.5;
ctx.strokeStyle = '#38bdf8';
for (const blip of blips) {
ctx.save();
ctx.translate(blip.x, blip.y);
ctx.beginPath();
ctx.arc(0, 0, blip.radius, 0, Math.PI * 2);
ctx.stroke();
ctx.restore();
}
}
return { render };
}
Reply with what is broken and how you would fix it.
