How to bend/curve a image in html5 canvas

Question

i have this

i want to do this

Answer 1

For this, you'll need WebGL. You'll have to take the image you want to distort, use it as a texture and map it on a curved surface.

Answer 2

Yes, It's possible, but it doesn't seem practical for your project.

You can using a perspective slicing technique:

http://www.subshell.com/en/subshell/blog/image-manipulation-html5-canvas102.html

You can also "fake" non-affine transforms. This generally involves:

1. Dividing your image into rectangles,
2. Diagonally bisecting those rectangles into triangles.
3. Warping those triangles to form the desired distortion--a distortion wireframe.
4. For each triangle: pixel-interpolating the original image from the undistorted triangle into the distorted triangle to achieve warp distortion.

Answer 3

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...