How to bend/curve a image in html5 canvas

Question

i have this

i want to do this

Answer 1

It's not possible using any native Canvas transformations as your stretched output requires non-affine transformations. i.e. it cannot be achieved simply by combining rotations, translations, etc.

Ideally you need to define a formula mapping to the original cartesian coordinates from the distorted coordinate system and then iterate over the destination pixel space, using the above mapping to determine the required colour for that pixel.

You would also need to interpolate neighbouring pixels to avoid the output looking "blocky".

This is non-trivial...