AS3 graphics.drawCircle() glitch

Not sure if I’d go so far as to call this a bug, but it’s one of those little things that usually never bothers you, but every once in a while, comes up and bites you. Take the following code:

[as]graphics.lineStyle(0);
graphics.moveTo(100, 100);
graphics.lineTo(200, 200);

graphics.beginFill(0);
graphics.drawCircle(300, 100, 50);[/as]

You set a line style and draw a line, then set a fill color and draw a circle. Seems simple, but if you run it, you wind up with a big mess. It’s like drawCircle first executes a lineTo() to the center of the circle, so the previously drawn line becomes part of the fill.

The handling is pretty simple, just add a moveTo() before the beginFill():

[as]graphics.lineStyle(0);
graphics.moveTo(100, 100);
graphics.lineTo(200, 200);

graphics.moveTo(300, 100);
graphics.beginFill(0);
graphics.drawCircle(300, 100, 50);[/as]

I know some of you are going to come back and say, “yeah, duh! that’s obvious.” But I don’t think it really is so obvious. First of all, If you look what it draws, I don’t see what would explain that:

Why would it go way off the stage to the right?

Furthermore, you can draw filled circles all day without any moveTo’s:

[as]graphics.lineStyle(0);

graphics.beginFill(0);
graphics.drawCircle(100, 100, 50);

graphics.beginFill(0);
graphics.drawCircle(300, 100, 50);[/as]

I’m not even doing an endFill in there, and comes out fine. I don’t see why this last code wouldn’t have the exact same problem. But it doesn’t. I guess I could analyze what’s going on here and force it to make sense in my brain, but I’m running out the door and wife and daughter are staring me down as I type, waiting for me to go.

Anyway, when I blog things I tend to remember them better, or at least can find my own answer later.

This entry was posted in Flash. Bookmark the permalink.

5 Responses to AS3 graphics.drawCircle() glitch

  1. Eduardo says:

    Yo!
    I found this glitch too.. not sure if the “moveTo” screwed it.. But the worst part is that actually erased a PNG!!! The image was a background img for an asset and the circle bug erased it’s pixels… To bizarrre! =)

  2. Collin says:

    Another solution is to always use a beginFill(…) for every shape (even lines). it seems that (and your multiple circles in a graphics object supports) beginFill(…) implicitly uses endFIll() if there is a drawing on the graphics object. I suppose that using another moveTo(…) should be more efficient though.

  3. Ray Greenwell says:

    Good stuff, we’ve found this bug too and had worked around it differently, but this is better.

  4. Danny says:

    Yup, happened to me a while back too. Did the same fix. Gave me a headache though…

  5. Philipp says:

    Ah! Thank you, this cost me ages! The glitch occurs for drawRect and other as well.

Leave a Reply