distort the original image to another shape with javascript
<p>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:</p>

<pre><code>// 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);
</code></pre>

<p><a href="https://jsfiddle.net/bimbochobot/jjgkq38x/3/" rel="nofollow noreferrer">FIDDLE</a> with created canvas.</p>

<p>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..<br>
This is the example how it should look like in the end:</p>

<p><a href="https://i.stack.imgur.com/jl8Xs.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/jl8Xs.jpg" alt="&lt;a href=&quot;http://oi63.tinypic.com/29maskz.jpg&quot;&gt;Here&lt;/a&gt;"></a></p>

<p>Is there any solution?</p>