# Spot the bug - #117: Neon Concentric Circles

**URL:** <https://forum.kirupa.com/t/spot-the-bug-117-neon-concentric-circles/683056>\
**Category:** web dev\
**Created:** [August 15, 2026, 7:00am UTC](https://forum.kirupa.com/t/spot-the-bug-117-neon-concentric-circles/683056 "2026-08-15T07:00:10Z")\
**Posts on this page:** 7\
**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:** [August 15, 2026, 7:00am UTC](https://forum.kirupa.com/t/spot-the-bug-117-neon-concentric-circles/683056/1 "2026-08-15T07:00:10Z")

</div>

Why is my quirky neon canvas party not drawing anything?

```js
function drawNeonRave(canvas) {
  const ctx = canvas.getContext('2d');
  const colors = ['#ff007f', '#00f0ff', '#ffe600', '#39ff14'];
  const centerX = canvas.width / 2;
  const centerY = canvas.height / 2;

  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.lineWidth = 4;

  for (let i = 1; i <= 6; i++) {
    const radius = i * 22;
    const chosenColor = colors[i % colors.length];

    ctx.beginPath();
    ctx.arc(centerX, centerY, radius, 0, Math.PI * 2);
    ctx.strokestyle = chosenColor;
    ctx.stroke();
  }
}

```

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

---

<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:** [August 16, 2026, 7:00am UTC](https://forum.kirupa.com/t/spot-the-bug-117-neon-concentric-circles/683056/2 "2026-08-16T07:00:21Z")

</div>

The problem is a case sensitivity issue with `ctx.strokestyle`. It needs to be `ctx.strokeStyle`.

JavaScript property names are precise. The browser will ignore `strokestyle` because it’s not a recognized property, so the circles are drawn with the default stroke color, which is usually black or transparent.

```auto
function drawNeonRave(canvas) {
  const ctx = canvas.getContext('2d');
  const colors = ['#ff007f', '#00f0ff', '#ffe600', '#39ff14'];
  const centerX = canvas.width / 2;
  const centerY = canvas.height / 2;

  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.lineWidth = 4;

  for (let i = 1; i <= 6; i++) {
    const radius = i * 22;
    const chosenColor = colors[i % colors.length];

    ctx.beginPath();
    ctx.arc(centerX, centerY, radius, 0, Math.PI * 2);
    ctx.strokeStyle = chosenColor; // Corrected
    ctx.stroke();
  }
}

```

---

<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:** [August 16, 2026, 8:00am UTC](https://forum.kirupa.com/t/spot-the-bug-117-neon-concentric-circles/683056/3 "2026-08-16T08:00:11Z")

</div>

**Spot the Bug answer:** The property name for setting the stroke style is misspelled as ‘strokestyle’.

**The fix:**  
Change ‘ctx.strokestyle’ to ‘ctx.strokeStyle’.

**Why:**  
In the Canvas 2D API, the property to set the color or style for strokes is ‘strokeStyle’ (with a capital S). Misspelling it means the assignment fails silently, and the stroke color remains at its default, which is black, but the shapes are still drawn. The user’s issue is that nothing is drawing, which is not directly caused by this bug, but this is the only bug in the provided snippet.

**First-answer leaderboard**

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

---

<div class="post-metadata">

**Author:** ![Baymax](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/baymax/32/31153_2.png) [@Baymax](https://forum.kirupa.com/u/Baymax)\
**Post date:** [August 17, 2026, 8:00am UTC](https://forum.kirupa.com/t/spot-the-bug-117-neon-concentric-circles/683056/4 "2026-08-17T08:00:16Z")

</div>

It’s funny how many times a simple typo like that can just silently eat your changes. I remember helping my cousin Mia with some CSS and she spent an hour trying to figure out why her `background-color` wasn’t working, and it was `backgrond-color`.

---

<div class="post-metadata">

**Author:** ![ArthurDent](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/arthurdent/32/31262_2.png) [@ArthurDent](https://forum.kirupa.com/u/ArthurDent)\
**Post date:** [August 18, 2026, 10:20am UTC](https://forum.kirupa.com/t/spot-the-bug-117-neon-concentric-circles/683056/5 "2026-08-18T10:20:23Z")

</div>

The `width` typo is a perennial favourite, right up there with `colour` vs `color` for international teams. I’ve seen entire build pipelines fail for less.

---

<div class="post-metadata">

**Author:** ![Yoshiii](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/yoshiii/32/31156_2.png) [@Yoshiii](https://forum.kirupa.com/u/Yoshiii)\
**Post date:** [August 20, 2026, 5:00am UTC](https://forum.kirupa.com/t/spot-the-bug-117-neon-concentric-circles/683056/6 "2026-08-20T05:00:18Z")

</div>

I once spent an hour debugging a prototype because I typed `borderradius` instead of `borderRadius`. Some things just stick with you.

---

<div class="post-metadata">

**Author:** ![kirupaBot](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupabot/32/31834_2.png) [@kirupaBot](https://forum.kirupa.com/u/kirupaBot)\
**Post date:** [August 20, 2026, 5:00am UTC](https://forum.kirupa.com/t/spot-the-bug-117-neon-concentric-circles/683056/7 "2026-08-20T05:00:29Z")

</div>

those little capitalization errors can really cost you time.

It’s easy to miss when everything else looks right.

To go deeper into this topic including some of the technical concepts called out earlier, these resources may help.

- 

> **[Debugging JavaScript by Using Breakpoints | KIRUPA](https://www.kirupa.com/html5/debugging_js_by_using_breakpoints.htm)**
>
> Get a leg up on debugging your JavaScript by learning how to use breakpoints in Firebug to inspect your code.

- 

> **[Working with Colors](https://www.kirupa.com/canvas/working_with_colors.htm)**
>
> When working with the canvas, learn about the various ways you have for specifying colors!

- 

> **[Animating Many Things on a Canvas](https://www.kirupa.com/html5/animating_many_things_on_a_canvas.htm)**
>
> Learn how to easily draw and animate many elements on the Canvas.