1

I have an issue, I have a draggable canvas image in my background image,
thats all good:

// first clear the canvas
main_ctx.clearRect(0,0,canvas.width, canvas.height);
// draw the background image
main_ctx.drawImage(bg_canvas, panoramaX,panoramaY, 600, 200);
// draw the img without the transforms applied :-(
main_ctx.drawImage(img_canvas, imageX, imageY);

But now I would love to transform edges of my image.
This should be the result of transformation:
<a href="http://oi63.tinypic.com/29maskz.jpg">Here</a>

Is it possible to transform image like this?
Thank for your time and help in advice.

Petr Bečka
  • 774
  • 3
  • 16
  • 39
  • 1
    What do you mean by "transform" -- your image doesn't make it clear. – markE Jan 31 '16 at 23:17
  • I mean like when I place original image its like rectangle, but my image should have rounded bottom edge and image should be a little widespread. – Petr Bečka Feb 01 '16 at 10:32
  • I see now. **In its native 2d mode, html canvas cannot do what you want**. Native canvas will only stretch/squish rectangular images into parallelograms -- not something like your rounded trapezoid. You might look at 3d canvas mode (webGL). – markE Feb 01 '16 at 17:11
  • Ok so do you think that webGL is the only way to solve my problem? Hope it's not such hard to learn this technology. – Petr Bečka Feb 01 '16 at 23:51
  • 1
    WebGL has a large learning curve. If you just want to warp a few images you might do it in Photoshop. – markE Feb 02 '16 at 00:05
  • @markE I cannot use Photoshop because I never now how the image will look like. So far I found that I can change shapes of triangles etc. but is it possible to change shape of an image in WebGL? – Petr Bečka Feb 10 '16 at 12:03
  • This looks like some kind of mask to me, maybe you can mask an area of your canvas - http://stackoverflow.com/questions/18379818/canvas-image-masking-overlapping – Neil Feb 10 '16 at 14:44
  • @Neil No, thats not what I'm looking for, i need to keep all content of my image. I need to distort original image into my shape. Thank you for reply! – Petr Bečka Feb 10 '16 at 15:23
  • @PetrBečka - But your example is showing a mask of an area, are you sure this is what the distorted image would look like? – Neil Feb 10 '16 at 15:29

0 Answers0