Perspective rendering in HTML5 Canvas

Question

I want to draw a perspective grid on canvas, something like this: http://www.shutterstock.com/pic-9039343/stock-photo-abstract-horizon-grid-perspective.html My best so far looks like this: http://modwebsolutions.com/test/ I don't exactly like it, I want it to look more realistic. So my question is: is there some library or something else that could render my grid in perspective if I only drew it flat. I have fair understanding of Javascript, so it doesn't have to be a complete spoon-feeding, just need to be pointed to the right direction at least.

Answer 1

Yes, you can draw things flat and have them rendered in perspective. There's a bit of math to the ordeal but nothing insane.

This should get you going:

http://tulrich.com/geekstuff/canvas/perspective.html