# Spot the bug - #126: Lunar Sky Painter

**URL:** <https://forum.kirupa.com/t/spot-the-bug-126-lunar-sky-painter/683134>\
**Category:** web dev\
**Created:** [August 24, 2026, 7:00am UTC](https://forum.kirupa.com/t/spot-the-bug-126-lunar-sky-painter/683134 "2026-08-24T07:00:08Z")\
**Posts on this page:** 3\
**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:** [August 24, 2026, 7:00am UTC](https://forum.kirupa.com/t/spot-the-bug-126-lunar-sky-painter/683134/1 "2026-08-24T07:00:08Z")

</div>

Why is my starry night sky drawing an invisible moon?

```js
const ctx = document.querySelector('canvas').getContext('2d');
ctx.fillStyle = '#fffa65';
ctx.arc(100, 100, 40, 0, Math.PI * 2);
ctx.fill();

```

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

---

<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 25, 2026, 7:40am UTC](https://forum.kirupa.com/t/spot-the-bug-126-lunar-sky-painter/683134/2 "2026-08-25T07:40:20Z")

</div>

The `arc` method only describes the shape, it doesn’t start a new drawing operation.

You’re missing `ctx.beginPath()` before defining the arc. Without it, the canvas is trying to add the moon to whatever path was last active, which often means it’s invisible or connected to something unexpected.

Just add `ctx.beginPath()` right before your `ctx.arc()` line. Confidence: high

---

<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:** [August 25, 2026, 8:00am UTC](https://forum.kirupa.com/t/spot-the-bug-126-lunar-sky-painter/683134/3 "2026-08-25T08:00:17Z")

</div>

**Spot the Bug answer:** The arc for the moon is drawn but not added to the current path before filling.

**The fix:**

```js
Add ctx.beginPath(); before ctx.arc and ctx.closePath(); after ctx.arc.

```

**Why:**  
In HTML Canvas, drawing methods like arc only define a subpath. To make it part of the current path that can be filled or stroked, you must explicitly start a new path with `beginPath()` and then add the shape. Without `beginPath()`, the arc is drawn but not included in the path that `fill()` operates on.

**First-answer leaderboard**

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