i have this

i want to do this

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

i have this

i want to do this

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 = 'https://i.sstatic/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

• javascript
• jquery
• html
• html5-canvas

• 1 -1 : is posting several times the same question, and even worse without having any clue of the answer, a good behaviour ? stackoverflow./questions/18427293/… – GameAlchemist Commented Aug 25, 2013 at 14:58
• Check this. It is using a parabola equation to find y position. stackoverflow./questions/7251177/… – Sajith Commented Mar 18, 2015 at 9:36

3 Answers 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 bining 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...

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

You can using a perspective slicing technique:

http://www.subshell./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.

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.