Spot the bug - #117: Neon Concentric Circles

programming web dev
1

Why is my quirky neon canvas party not drawing anything?

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.

2

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.

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();
  }
}
3

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) :trophy:
  2. @adnanahmed - 2 (firsts)
  3. @emmawalter5 - 1 (first)
4

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.

5

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.

6

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

7

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.