How to transform a square to a trapezoid in HTML Canvas?

How can I transform a HTML Canvas from a square to a trapezoid?

For exam开发者_运维技巧ple

 ___ 
|   |
|___|

to
 ___
/___\

---

Take a look at the raphael framework. http://raphaeljs.com/

This should help ... although it's not an complete answer. Seems like there's going to be a lot of math going on through a stack of canvas items.