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

Question

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

For example

 ___ 
|   |
|___|

to
 ___
/___\

Answer 1

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.