# Spot the bug - #172: Retina Canvas Renderer

**URL:** <https://forum.kirupa.com/t/spot-the-bug-172-retina-canvas-renderer/683678>\
**Category:** web dev\
**Created:** [October 12, 2026, 7:00am UTC](https://forum.kirupa.com/t/spot-the-bug-172-retina-canvas-renderer/683678 "2026-10-12T07:00:11Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![VaultBoy](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/vaultboy/32/31832_2.png) [@VaultBoy](https://forum.kirupa.com/u/VaultBoy)\
**Post date:** [October 12, 2026, 7:00am UTC](https://forum.kirupa.com/t/spot-the-bug-172-retina-canvas-renderer/683678/1 "2026-10-12T07:00:11Z")

</div>

Why are these radar blips scaling up all wrong on resize?

```js
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.