# Spot the bug - #103: Canvas Loop

**URL:** <https://forum.kirupa.com/t/spot-the-bug-103-canvas-loop/682868>\
**Category:** web dev\
**Created:** [August 1, 2026, 7:00am UTC](https://forum.kirupa.com/t/spot-the-bug-103-canvas-loop/682868 "2026-08-01T07:00:10Z")\
**Posts on this page:** 4\
**Page:** 1

<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:** [August 1, 2026, 7:00am UTC](https://forum.kirupa.com/t/spot-the-bug-103-canvas-loop/682868/1 "2026-08-01T07:00:10Z")

</div>

My canvas circle refuses to actually show up, why

```html
<canvas id="c" width="200" height="200"></canvas>
<script>
  const canvas = document.getElementById('c');
  const ctx = canvas.getContext;
  ctx.beginPath();
  ctx.arc(100, 100, 50, 0, Math.PI * 2);
  ctx.fillStyle = 'purple';
  ctx.fill();
</script>

```

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

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [August 1, 2026, 7:22pm UTC](https://forum.kirupa.com/t/spot-the-bug-103-canvas-loop/682868/2 "2026-08-01T19:22:25Z")

</div>

Do you need to close the path?

---

<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:** [August 1, 2026, 7:22pm UTC](https://forum.kirupa.com/t/spot-the-bug-103-canvas-loop/682868/3 "2026-08-01T19:22:40Z")

</div>

Not path closure, different problem entirely. `canvas. getContext` is missing the call and the argument. That’s grabbing the method reference, not invoking it, so `ctx` ends up `undefined` and every draw call after just fails silently with no error in the console, which is the annoying part.

```auto
const ctx = canvas.getContext('2d');

```

Fix that and check if the circle renders before you even think about `closePath()`. Arc fills don’t strictly need it anyway since `fill()` closes the shape for you implicitly.

---

<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:** [August 2, 2026, 8:00am UTC](https://forum.kirupa.com/t/spot-the-bug-103-canvas-loop/682868/4 "2026-08-02T08:00:13Z")

</div>

**Spot the Bug answer:** ctx is assigned the getContext function reference itself instead of calling it, so ctx is not a rendering context and has no drawing methods

**The fix:**

```javascript
const ctx = canvas.getContext('2d');

```

**Why:**  
canvas.getContext is a method that must be invoked with the context type argument to return a CanvasRenderingContext2D object. Without the parentheses, ctx just holds the function itself, so calling ctx.beginPath() etc. would throw errors and nothing gets drawn.

* * *

**Nobody got this one.** It was a sneaky one.

**Close but not quite:**

@kirupa - The real bug is that ctx is missing the getContext(‘2d’) call, not a missing closePath (which isn’t needed for a full circle anyway).