2

I'm learning about web app technologies and I'm facing a little problem. I've created a canvas with background image and another image on top of this backgroung:

// first clear the canvas
main_ctx.clearRect(0,0,canvas.width, canvas.height);
// draw the background image
main_ctx.drawImage(bg_canvas, panoramaX,panoramaY, bg_canvas.width, bg_canvas.width);
// do the transforms
main_ctx.translate(imageX+img_canvas.width/2,imageY+img_canvas.height/2);
main_ctx.rotate(angle);
main_ctx.translate(-(imageX+img_canvas.width/2),-(imageY+img_canvas.height/2));
// draw the img with the transforms applied
main_ctx.drawImage(img_canvas, imageX, imageY);
// reset the transforms
main_ctx.setTransform(1,0,0,1,0,0);

FIDDLE with created canvas.

But I cannot distort the shape of img_canvas ( image on top ). Uploaded image is a rectangle as usual and I want it with rounded bottom edge for exaplme..
This is the example how it should look like in the end:

<a href="http://oi63.tinypic.com/29maskz.jpg">Here</a>

Is there any solution?

Petr Bečka
  • 774
  • 3
  • 16
  • 39
  • Once again, it's unclear what you really want : do you want to crop your image in the final shape, or do you want to distort the original image to this shape ? (the former is easy, the later is not) – Kaiido Feb 10 '16 at 12:06
  • I'm really sorry then, I want to distort the original image to this shape. – Petr Bečka Feb 10 '16 at 12:10
  • Then I won't be your guy, but if someone can achieve this... check http://stackoverflow.com/questions/10426887/how-to-skew-image-like-this and http://stackoverflow.com/questions/4097688/draw-distorted-image-on-html5s-canvas for more basic shapes distortion, and to understand why it'll be hard. – Kaiido Feb 10 '16 at 12:20
  • Still thank you, I hope this will help me to move on. – Petr Bečka Feb 10 '16 at 12:34
  • 1
    Just do it on the GPU using webgl as the tags on this(duplicate) question already suggest, create a vertexbuffer for your rounded rectangle and render it with the texture applied. @Kaiido it will take around 1ms to do so on the GPU without being CPU intensive at all. – LJᛃ Feb 10 '16 at 14:01
  • 1
    @LJᛃ And is it possible to dynamically change this vertexbuffer? User can drag and move this image and when its moving my edge should be more or less rounded.. Is it possible to achieve it? This question maybe sounds weird but I have no experience with webGL. – Petr Bečka Feb 10 '16 at 14:18
  • Sure it can be dynamic, just check out some beginner webgl tutorials and you'll see. – LJᛃ Feb 10 '16 at 15:52
  • @LJᛃ thank you very much, I'll check out some for sure. – Petr Bečka Feb 10 '16 at 19:07

0 Answers0