How to bend / cut image in html5 canvas

Question

I have it

I want to do it

to

HTML

<canvas id="mycanvas"></canvas> 

Js

 var temp_can1, temp_can1_ctx; $(document).ready(function () { temp_can1 = document.getElementById('mycanvas'); temp_can1_ctx = temp_can1.getContext('2d'); var imageObj_rotator3 = new Image(); imageObj_rotator3.onload = function () { temp_can1_ctx.drawImage(imageObj_rotator3, 0, 0); temp_can1_ctx.globalCompositeOperation = "source-atop"; var pattern = temp_can1_ctx.createPattern(imageObj_rotator3, 'no-repeat'); temp_can1_ctx.rect(0, 0, temp_can1.width, temp_can1.height); temp_can1_ctx.fillStyle = pattern; temp_can1_ctx.fill(); temp_can1_ctx.globalAlpha = 0.10; temp_can1_ctx.drawImage(imageObj_rotator3, 0, 0); temp_can1_ctx.drawImage(imageObj_rotator3, 0, 0); temp_can1_ctx.drawImage(imageObj_rotator3, 0, 0); }; imageObj_rotator3.src = 'http://i.stack.imgur.com/o8EJp.png'; }); 

Here is my JSFiddler Updated by JSFiddler

this can be done in html5 canvas. if possible, show me some direction / example.

thanks

Answer 1

You cannot use any built-in Canvas transforms, since your stretched output requires non-affine transforms. that is, it cannot be achieved simply by combining turns, translations, etc.

Ideally, you need to determine whether the formula is converted to the original Cartesian coordinates from the distorted coordinate system, and then iterate over the recipient’s pixel space using the above mapping to determine the desired color for that pixel.

You will also need to interpolate adjacent pixels to avoid an output that looks “blocky”.

This is nontrivial ...

Answer 2

Yes, it is possible, but it does not seem practical for your project.

You can use advanced cutting technology:

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

You can also fake non-affine transformations. This usually includes:

• Splitting an image into rectangles,
• The diagonal dividing these rectangles into triangles.
• Deforming these triangles to form the desired distortion is a distortion framework.
• For each triangle: pixel interpolation of the original image from an undistorted triangle to a distorted triangle to achieve distortion distortion.

Answer 3

To do this, you will need WebGL. You will have to take the image you want to distort, use it as a texture and apply a curved surface to it.