Klip do narysowanej ścieżki

Question

Próbuję narysować ścieżkę, a oni używają jej jako maski mojego płótna.

'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(); 
}); 

Jak mogę uczynić całą ścieżkę być widocznym obszarem mojego obrazu?

http://jsfiddle.net/db45yhpo/

EDIT

To co staram się osiągnąć, ale przy użyciu FabricJS.

http://www.createjs.com/demos/easeljs/alphamaskreveal

Answer 1

mam żadnego doświadczenia z fabricjs, więc nie może być lepszym sposobem obsługi to, ale chciałbym:
Odśwież swoją ścieżkę na ukrytym płótnie,
Następnie utwórz nowy fabric.Image () z tego ukrytego płótna,
Ustaw parametr globalCompositeOperation na "" destination-atop ",
Narysuj go na oryginalnym płótnie.

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 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(path); 
 
    canvas.isDrawingMode = false; 
 
    var oImg = new fabric.Image(clipper) 
 
    oImg.globalCompositeOperation = 'destination-atop'; 
 
    canvas.add(oImg); 
 
    canvas.renderAll(); 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script> 
 
<canvas id="c"></canvas>