在HTML5图像画布中裁剪图像区域

我有两个图像，第一个是大图像，首先放置，然后另一个图像放置在它上面。现在我想在第一张图像上剪切出第二张图像的区域。

var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var first_img = new Image(),
      second_img = new Image();

   first_img.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';
   second_img.src = 'http://tux.crystalxp.net/png/mimipunk-tux-cartoon-1820.png';
      var draw = function(){

          second_img.onload = function() {
            context.drawImage(second_img, 50, 50);
          };
          first_img.onload = function() {
            context.drawImage(first_img, 50, 50);
          };

      };
      draw();

小提琴来了。

编辑第二张图片是png，形状不规则，我希望第一张图片的面积具有透明度