Mask for putImageData with HTML5 canvas?

我想从现有图像中获取一个形状不规则的部分，并使用HTML5画布在Javascript中将其渲染为新图像。因此，将仅复制面边界内的数据。我想出的方法涉及：

1. 在新画布中绘制多边形。
2. 使用clip创建蒙版
3. 使用 getImageData（矩形）从原始画布复制数据
4. 使用putImageData将数据应用于新画布

它不起作用，整个矩形（例如，来自边界外源的内容）仍然出现。这个问题解释了为什么："规范说putImageData不会受到剪切区域的影响。"当！

我还尝试绘制形状，设置context.globalCompositeOperation = "source-in"，然后使用putImageData。相同的结果：未应用遮罩。我怀疑出于类似的原因。

关于如何实现这一目标的任何建议？这是我正在进行的工作的基本代码，以防不清楚我正在尝试做什么。 （不要太努力地调试它，它是从使用许多函数的代码中清理/提取的，这些函数不在这里，只是试图显示逻辑）。

 // coords is the polygon data for the area I want
   context = $('canvas')[0].getContext("2d");
   context.save();
   context.beginPath();
   context.moveTo(coords[0], coords[1]);
   for (i = 2; i < coords.length; i += 2) {
     context.lineTo(coords[i], coords[i + 1]);
   }
   //context.closePath();
   context.clip();
   $img = $('#main_image');
   copy_canvas = new_canvas($img); // just creates a new canvas matching dimensions of image
   copy_ctx = copy.getContext("2d");
   tempImage = new Image();
   tempImage.src = $img.attr("src");
   copy_ctx.drawImage(tempImage,0,0,tempImage.width,tempImage.height);
  // returns array x,y,x,y with t/l and b/r corners for a polygon
  corners = get_corners(coords)
  var data = copy_ctx.getImageData(corners[0],corners[1],corners[2],corners[3]);
  //context.globalCompositeOperation = "source-in";
  context.putImageData(data,0,0);
  context.restore();