Sign Up to our social questions and Answers Engine to ask questions, answer people’s questions, and connect with other people.
Login to our social questions & Answers Engine to ask questions answer people’s questions & connect with other people.
Lost your password? Please enter your email address. You will receive a link and will create a new password via email.
Please briefly explain why you feel this question should be reported.
Please briefly explain why you feel this answer should be reported.
Please briefly explain why you feel this user should be reported.
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?
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.