Home/ Questions/Q 9055541
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-16T13:58:39+00:00

Trying to figure out why I can’t draw a pacman shape given my current

  • 0

Trying to figure out why I can’t draw a pacman shape given my current understanding of how the arc() function works.

When I try the following code in Chrome/Firefox, it draws a complete circle, which isn’t what I would expect. I suspect it might have something to do with the non-zero winding rule? My guess is that the -45 is being internally normalized, causing the resulting angle sweep to become CCW instead of CW. But when I tested that assumption by changing the final arg to be CCW, nothing changed in Chrome (However FF behavior was different in that nothing was drawn)

// draw pacman shape
ctx.arc(200,200,50, -45 * DEGREES, 45 * DEGREES, false);
ctx.stroke();

Full example:
http://pastebin.com/2ZkJXgJU

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    This is what your looking for:

    ctx.beginPath();
ctx.arc(100, 100, 50, 0.25 * Math.PI, 1.25 * Math.PI, false);
ctx.fillStyle = "rgb(255, 255, 0)";
ctx.fill();
ctx.beginPath();
ctx.arc(100, 100, 50, 0.75 * Math.PI, 1.75 * Math.PI, false);
ctx.fill();
ctx.beginPath();
ctx.arc(100, 75, 10, 0, 2 * Math.PI, false);
ctx.fillStyle = "rgb(0, 0, 0)";
ctx.fill();

    source: http://simeonvisser.hubpages.com/hub/HTML5-Tutorial-Drawing-Circles-and-Arcs

    • 0