How to bend/curve a image in html5 canvas

Question

i have this enter image description here

i want to do this

enter image description here

to

enter image description here

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 = 'https://i.stack.imgur.com/o8EJp.png';

});

Here is my JSFiddler Updated JSFiddler

is this possible to do in html5 canvas. if possible then show me some direction/example.

Thank you

-1 : is posting several times the same question, and even worse without having any clue of the answer, a good behaviour ? http://stackoverflow.com/questions/18427293/how-to-paint-a-continuous-circular-pattern-with-html5-canvas — GameAlchemist, Aug 25 '13 at 14:58
Check this. It is using a parabola equation to find y position. http://stackoverflow.com/questions/7251177/curving-an-image-that-starts-as-a-rectangle-uploaded-by-user-preferably-using/29118400#29118400 — Sajith, Mar 18 '15 at 09:36

score 7 · Accepted Answer · answered Aug 25 '13 at 11:15

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

score 3 · Answer 2 · answered Aug 25 '13 at 17:02

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:

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

score 2 · Answer 3 · answered Aug 25 '13 at 14:16

2

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.

answered Aug 25 '13 at 14:16

kumarharsh

18,961
8
72
100

How to bend/curve a image in html5 canvas

3 Answers3

Linked