Javascript 在图像画布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，形状不规则，我希望第一个图像具有第一个图像区域的透明度

drawImage函数为此提供参数

---

第二个图像是png，drawImage函数不接受任何这样的参数。我认为这行不通。我想这就是你想要的，我希望这对你有所帮助