Clip per tracciato disegnato

Question

Sto provando a disegnare un percorso e loro lo usano come una maschera della mia tela.

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

Come posso rendere l'intero percorso l'area visibile della mia immagine?

http://jsfiddle.net/db45yhpo/

EDIT

Questo è quello che sto cercando di realizzare, ma utilizzando FabricJS.

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

Answer 1

non ho alcuna esperienza con fabricjs, quindi ci può essere un modo migliore di gestire questo, ma vorrei:
Ridisegna il vostro percorso su una tela nascosto,
Quindi creare un nuovo fabric.Image () da questa tela nascosta,
Impostare il parametro globalCompositeOperation su `" destination-atop ",
Disegnarlo sulla tela originale.

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>