fabric.js如何在画布上创建出血边缘？

Question

我正在尝试在用fabric.js制成的画布周围创建“出血边缘”。 我的意思是，我想在画布周围添加黑色的半透明边框。

使用SVG蓝色矩形并使用遮罩功能（参见下面的小提琴中的第82行）并将其用作画布的覆盖层时，我获得了很好的效果。 http://jsfiddle.net/fmgXt/817/

// ADD overlay
var svg = 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"   width="' + canvas.width/canvas.getZoom() + 
  '" height="' + canvas.height/canvas.getZoom() + 
  '">   <defs>    <mask id="hole">      <rect width="100%" height="100%" fill="white"/>      <rect x="'+ 
  x_overlay +'" y="'+ 
  y_overlay +'" width="'+
  overlay_Width+'" height="'+
  overlay_Height+'" fill="black"/>    </mask>  </defs>  <rect width="100%" height="100%" fill="blue" mask="url(#hole)" /></svg>';

但是此示例仅适用于Chrome，不适用于Firefox：（

除了在所有浏览器上工作之外，有人对如何获得相同的结果有想法吗？

谢谢。