Spot the bug - #103: Canvas Loop

programming web dev
1

My canvas circle refuses to actually show up, why

<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.

2

Do you need to close the path?

3

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.

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.

1 Like