Drawing square of two triangles in canvas, there's whitespace behind the triangles

Question

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?

Answer 1

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.