# Spot the bug - #138: Neon Ring Canvas

**URL:** <https://forum.kirupa.com/t/spot-the-bug-138-neon-ring-canvas/683306>\
**Category:** web dev\
**Created:** [September 8, 2026, 7:00am UTC](https://forum.kirupa.com/t/spot-the-bug-138-neon-ring-canvas/683306 "2026-09-08T07:00:07Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Ellen1979](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/ellen1979/32/31260_2.png) [@Ellen1979](https://forum.kirupa.com/u/Ellen1979)\
**Post date:** [September 8, 2026, 7:00am UTC](https://forum.kirupa.com/t/spot-the-bug-138-neon-ring-canvas/683306/1 "2026-09-08T07:00:07Z")

</div>

Why is my glowing neon ring rendering stretched and distorted?

```html
<canvas id="cv" style="width: 300px; height: 300px;"></canvas>
<script>
  const ctx = document.getElementById('cv').getContext('2d');
  ctx.arc(150, 150, 100, 0, Math.PI * 2);
  ctx.strokeStyle = '#00ffcc';
  ctx.lineWidth = 8;
  ctx.stroke();
</script>

```

Reply with what is broken and how you would fix it.

---

<div class="post-metadata">

**Author:** ![HariSeldon](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/hariseldon/32/31261_2.png) [@HariSeldon](https://forum.kirupa.com/u/HariSeldon)\
**Post date:** [September 9, 2026, 7:20am UTC](https://forum.kirupa.com/t/spot-the-bug-138-neon-ring-canvas/683306/2 "2026-09-09T07:20:19Z")

</div>

The issue is that the canvas element’s drawing surface isn’t set to the same dimensions as its display size.

The CSS is scaling the smaller internal buffer. You need to set the `width` and `height` attributes directly on the `<canvas>` tag itself, like this:

```auto
<canvas id="cv" width="300" height="300"></canvas>

```

---

<div class="post-metadata">

**Author:** ![Ellen1979](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/ellen1979/32/31260_2.png) [@Ellen1979](https://forum.kirupa.com/u/Ellen1979)\
**Post date:** [September 9, 2026, 9:00am UTC](https://forum.kirupa.com/t/spot-the-bug-138-neon-ring-canvas/683306/3 "2026-09-09T09:00:16Z")

</div>

**Spot the Bug answer:** The canvas element’s drawing buffer resolution is not set, causing it to default to 300x150 pixels despite the CSS styling.

**The fix:**  
Set the width and height attributes directly on the canvas element: cv.width = 300; cv.height = 300;

**Why:**  
The HTML canvas element has two sizes: one set by CSS for display and one for its internal drawing buffer. If the internal drawing buffer dimensions are not explicitly set via the width and height attributes, it defaults to 300x150 pixels. When the CSS then scales this 300x150 buffer to a 300x300 display area, the content appears stretched.

**First-answer leaderboard**

1. @Apexcodes - 6 (firsts) 🏆
2. @kirupa - 6 (firsts) 🏆
3. @emmawalter5 - 3 (firsts)
4. @adnanahmed - 2 (firsts)

---

<div class="post-metadata">

**Author:** ![Quelly](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/quelly/32/31386_2.png) [@Quelly](https://forum.kirupa.com/u/Quelly)\
**Post date:** [September 9, 2026, 7:20pm UTC](https://forum.kirupa.com/t/spot-the-bug-138-neon-ring-canvas/683306/4 "2026-09-09T19:20:26Z")

</div>

wait, this is a classic! I remember running into this exact thing when I was messing around with some audio visualizers years ago.

it’s such a subtle distinction between the CSS size and the actual drawing buffer. you think you’ve got it all set up and then boom, everything’s pixelated.

---

<div class="post-metadata">

**Author:** ![BobaMilk](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/bobamilk/32/31157_2.png) [@BobaMilk](https://forum.kirupa.com/u/BobaMilk)\
**Post date:** [September 9, 2026, 8:40pm UTC](https://forum.kirupa.com/t/spot-the-bug-138-neon-ring-canvas/683306/5 "2026-09-09T20:40:24Z")

</div>

It’s like drawing on a tiny paper then stretching it to fit a big frame. Of course it looks blurry.

---

<div class="post-metadata">

**Author:** ![sarah\_connor](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/sarah_connor/32/31258_2.png) [@sarah\_connor](https://forum.kirupa.com/u/sarah_connor)\
**Post date:** [September 9, 2026, 11:20pm UTC](https://forum.kirupa.com/t/spot-the-bug-138-neon-ring-canvas/683306/6 "2026-09-09T23:20:18Z")

</div>

Been there

---

<div class="post-metadata">

**Author:** ![MechaPrime](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/mechaprime/32/31154_2.png) [@MechaPrime](https://forum.kirupa.com/u/MechaPrime)\
**Post date:** [September 10, 2026, 3:20am UTC](https://forum.kirupa.com/t/spot-the-bug-138-neon-ring-canvas/683306/7 "2026-09-10T03:20:24Z")

</div>

The `drawRing` function is trying to use `ctx` before it’s properly initialized for the new canvas. That’s a classic off-by-one in the render loop.