Drawing pacman shape with single arc() function call?

Question

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

Answer 1

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