Canvas 剪裁到绘制的路径

我试图画一条路径，他们用它作为我画布的遮罩

'use strict';

var canvas = new fabric.Canvas('c', {
    hoverCursor: 'pointer',
    isDrawingMode: true
});

canvas.freeDrawingBrush = new fabric.PencilBrush(canvas);
canvas.freeDrawingBrush.color = '#000';
canvas.freeDrawingBrush.width = 100;

fabric.Image.fromURL('http://fabricjs.com/assets/pug_small.jpg', function(img) {

    canvas.add(img);
    canvas.setWidth(img.getWidth());
    canvas.setHeight(img.getHeight());
    canvas.centerObject(img);
    img.selectable = false;
});

canvas.on('path:created', function(data) {

    var path = data.path;

    canvas.remove(path);
    canvas.clipTo = function(context) {
        path.render(context);
    };

    canvas.isDrawingMode = false;
    canvas.renderAll();
});

如何使整个路径成为图像的可见区域

编辑

这就是我试图实现的，但是使用FabricJS

---

我没有使用fabricjs的经验，因此可能有更好的方法来处理这个问题，但我会：
在隐藏的画布上重新绘制路径，
然后从这个隐藏的画布创建一个新的fabric.Image（），
将其

globalCompositeOperation

参数设置为“destination Top”，
在原始画布上绘制它

var canvas=newfabric.canvas（'c'{
光标悬停：“指针”，
isDrawingMode:true
});
canvas.freeDrawingBrush=新织物.PencilBrush（画布）；
canvas.freedrawingprush.color='#000'；
canvas.freeDrawingBrush.width=100；
fabric.Image.fromURL（'http://fabricjs.com/assets/pug_small.jpg，函数（img）{
canvas.add（img）；
setWidth（img.getWidth（））；
canvas.setHeight（img.getHeight（））；
canvas.centerObject（img）；
img.selective=false；
});
canvas.on（'path:created'，函数（数据）{
var clipper=document.createElement（'canvas'）；
clipper.width=canvas.width；
clipper.height=canvas.height；
var ctx=clipper.getContext（'2d'）；
var path=data.path；
data.path.render（ctx）；
canvas.remove（路径）；
canvas.isDrawingMode=false；
var oImg=新织物。图像（裁剪器）
oImg.globalCompositeOperation='destination-top'；
canvas.add（oImg）；
canvas.renderAll（）；
});

是否仅使用路径而不是路径内部区域作为遮罩？完全正确。例如，用喷雾刷，我只想把红色部分用作口罩