使用javascript将原始图像扭曲为另一种形状

Question

我正在学习网络应用技术，而且我遇到了一个小问题。我已经创建了一个带有背景图像的画布和另一个背景图像：

// 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。

但是我不能扭曲img_canvas的形状（图像在上面）。上传的图像像往常一样是一个矩形，我希望它具有圆形底边以便于实现。
这是它最终应该是什么样子的例子：

有没有解决方案？