织物Js画布的裁剪部分中的多个对象

Question

I have added a clipping section in my canvas. and I am adding multiple object on this. The problem is as soon as i add the second object, the first object get invisible.

explained in this

var pug = new fabric.Text("Hi ", {
        angle: 0,
        width: 500,
        height: 500,
        left: 245,
        top: 35,
        scaleX: 0.3,
        scaleY: 0.3,
        clipName: 'pug',
        clipTo: function(ctx) { 
            ctx.save();
              ctx.setTransform(1, 0, 0, 1, 0, 0);
              ctx.rect(
                100, 100,
                200, 200
              );
            clipRect1.render(ctx);
            ctx.strokeStyle = "red";
            ctx.stroke();
              ctx.restore();
        }
    });
    canvas.add(pug);

    var pug1 = new fabric.Text("Hello", {
        angle: 0,
        width: 500,
        height: 500,
        left: 300,
        top: 35,
        scaleX: 0.3,
        scaleY: 0.3,
        clipName: 'pug',
        clipTo: function(ctx) { 
            ctx.save();
              ctx.setTransform(1, 0, 0, 1, 0, 0);
              ctx.rect(
                100, 100,
                200, 200
              );
            clipRect1.render(ctx);
            ctx.strokeStyle = "red";
            ctx.stroke();
              ctx.restore();
        }
    });
    canvas.add(pug1);

http://jsfiddle.net/ZxYCP/202/

Answer 1

Change clipping area background to transparent (line 17). When FabricJS renders second object it overlaps first one.