1

I have this problem while drawing a square in canvas, made out of two triangles. There is a whitespace between the two fills of the triangles:

http://cl.ly/71AB/Schermafbeelding_2011-05-24_om_16.52.53.png

Watch closely!

How do I solve this without placing the two triangles closer together?

seymar
  • 3,993
  • 6
  • 25
  • 30

1 Answers1

3

Its an anti-aliasing issue with some browsers. For instance this persepctive demo will draw without such white lines in Chrome but will have the ugly white lines in Firefox, because the two browsers decided to do anti-aliasing differently.

Because of this, some things look nice in Chrome and not FireFox, and vice versa.

There are a few hackish ways to attempt to solve your problem. In this very specific instance, you could draw a black line between the two triangles.

edit: For semi-alpha'd shapes, you will have to change the globalCompositeOperation of the drawn line. Here is an example: jsfiddle.net/rqd8f

A blurring algorithm would help, but per-pixel operations on canvas are slow.

If you are using clipping regions, expand them.

Simon Sarris
  • 62,212
  • 13
  • 141
  • 171
  • Can't I disable the anti-aliasing or something? I already tried drawing a line in diagonal and giving it the same color. But how you do that if you have a semi-alpha color like `rgba(0, 0, 0, 0.5)`, then you see where the line is... – seymar May 24 '11 at 17:00
  • Unfortunately there is no way to turn on or off anti-aliasing in the different browsers. Some people have submitted this as a bug to the canvas spec, but it doesn't look like its going to happen. More on that here: http://www.mail-archive.com/whatwg@lists.whatwg.org/msg10074.html – Simon Sarris May 24 '11 at 17:32
  • 1
    and to fix your semi-alpha problem, you will have to change the globalCompositeOperation. Here is an example: http://jsfiddle.net/rqd8f/ – Simon Sarris May 24 '11 at 17:37
  • I'd rather not make a second answer if it is unnecessary, I just edited this one to contain the updated information – Simon Sarris May 24 '11 at 20:47
  • Ow yeah I didn't see this answer was yours ;P – seymar May 25 '11 at 15:08
  • Now I have the problem, that there are two lines drawn diagonally. So again that stupid semi-alpha :P So I would have to add the globalCompositeOperation to both the polygons... But how do I relate them. This is so complicated :P I think back-face cutting is what I need. – seymar May 25 '11 at 16:06
  • back-face culling, you mean? I'd have to know more about your project to be able to help there, sorry. – Simon Sarris May 25 '11 at 16:14
  • I mean, if there are two lines on the same place (after-eachother) the one on the back should not be drawn. – seymar May 25 '11 at 16:17
  • Ohh, there's a few ways to get around that, maybe. It depends where you're doing it. If it is truly one after the other and you want to check, you could just see if secondLinePointA is approximately equal to firstLinePointA, etc. But there's probably a better and more general way. – Simon Sarris May 25 '11 at 16:29
  • Jeah if I would check that. For each polygon ;o Bye performance. I could also divide the alpha by 2. The sum of them is then the right alpha. – seymar May 25 '11 at 16:34