2

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?

busticated
  • 2,147
  • 1
  • 20
  • 20
  • It looks like you're off by one pixel in each segment. Maybe change your algorithm so each segment overlaps? – Brendan Lesniak May 28 '12 at 02:33
  • tried this as well... if you are using an opaque stroke style, you'll get basically the inverse effect - a darker band where the segments overlap. – busticated May 28 '12 at 04:40

2 Answers2

6

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/

Simon Sarris
  • 62,212
  • 13
  • 141
  • 171
  • yup. tried this route. problem is: i can't clear the canvas as i'm drawing additional objects. i suppose i could capture the state of the canvas and restore is upon drawing my next circle... but that seems... mildly insane? @_@ – busticated May 28 '12 at 04:38
  • 1
    That's actually pretty normal. I can show you some simple and efficient ways to do this later tonight. – Simon Sarris May 28 '12 at 16:57
  • 1
    Okay its later tonight! :D I added a canvas buffer example to my answer, see the edit. – Simon Sarris May 28 '12 at 23:49
0

Basically, you want to compose two paths and join them perfectly without any seams, but that won't work, or if you are really lucky and it works in one browser, probably it's not going to work in another one. This is because the antialiasing algorithms are not implemented exactly the same, or might even be hardware accelerated and passed down to the videocard.

Hint: it's not possible to disable antialiasing.

As a programmer you keep stumbling into all kinds of issues that are not easy to do or convenient, and at that moment you need to step back a bit and reevaluate your choices. This is one of them.

Your only option in your specified constrains will be to redraw everything on each frame, or don't use alpha, and overlap segments a bit to make sure you don't have spaces because of antialiasing.

Community
  • 1
  • 1
Cristi Mihai
  • 2,505
  • 1
  • 19
  • 20