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