Canvas's 2d context can't do the non-parallel transforming that is shown in your link.
To do perspective-like warping, you will need to use the canvas 3d context (webGL).
Alternatively, here is a post on how to interpolate pixels from an original triangle into a distorted triangle:
http://codeslashslashcomment.com/2012/12/12/dynamic-image-distortion-html5-canvas/
This will allow you to "manually" do perspective distortions in 2d context.