Home/ Questions/Q 8009833
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-04T18:33:44+00:00

I’m trying to animate a circle being drawn – here’s a simplified version of

  • 0

I’m trying to animate a circle being drawn – here’s a simplified version of what I’m doing:

http://jsfiddle.net/DQz37/1/

Problem is: I get slight lines / distortion between each line segment. Like this:

gaps between segments

The constraints I’m dealing with are:

  • I need to render more than one circle on the same canvas, sometimes circles overlap
  • I need to render the circles using transparency / rgba coloring
  • I need to animate the rendering of the circles (so they look like they are being drawn)

Is this a common issue? How do you handle this kind of thing?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    One easy way to fix this is to always be drawing one path, that way you guarantee that they will be connected well.

    So instead of arcing from A to B and then B to C and then C to D, you arc from A to B, clear the canvas, arc from A to C, clear the canvas, arc from A to D, etc.

    Here’s a modified code bit as an example:

    http://jsfiddle.net/ZV7rv/

    Edit: In response to the comment, this is how to achieve the same thing while using a canvas buffer to keep the same state that was the canvas previously:

    http://jsfiddle.net/7vVBC/

    • 0