fabric.js中的文本掩码（目标输出）

Question

What is the correct way to add text with fabric.js with a destination-out fill mode? I am trying to apply a text mask over a background image.

This is my simple approach so far. I haven't added the BG yet, but would still expect the red mask to be knocked out:

<canvas id="logo" width="600" height="250"></canvas>

$(document).ready(function(){
    var canvas = new fabric.Canvas('logo');
    canvas.backgroundColor="green";
    var mask = new fabric.Rect({
        left: 0,
        top: 0,
        width: 600,
        height: 200,
        fill :'red',
    });
    canvas.add(mask);

    var text = new fabric.Text("TEST TEXT", {
        fontSize: 120,
        fontFamily: 'Arial',
        fill: 'white',
        stroke: "black",
        fillRule: 'destination-out'
    });
    canvas.add(text);

});

fiddle here .

Answer 1

Is this what you are looking for?

    $(document).ready(function(){
    var canvas = new fabric.Canvas('logo');
    canvas.backgroundColor="green";
    var mask = new fabric.Rect({
        left: 0,
        top: 0,
        width: 600,
        height: 200,
        fill: 'blue'
    });
    canvas.add(mask);

    var text = new fabric.Text("TEST TEXT", {
        fontSize: 120,
        fontFamily: 'Arial',
        stroke: "black",
        fill: 'none',
        fillRule: 'destination-out'
    });
    canvas.add(text);

});

http://jsfiddle.net/disinfor/3x8bs/3/