Why is my starry night sky drawing an invisible moon?
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.
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
Spot the Bug answer: The arc for the moon is drawn but not added to the current path before filling.
The fix:
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
- @kirupa - 5 (firsts)
- @adnanahmed - 2 (firsts)
- @Apexcodes - 2 (firsts)
- @emmawalter5 - 1 (first)
