Reputation: 121
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/
Upvotes: 1
Views: 1267
Reputation: 1545
Change clipping area background to transparent (line 17). When FabricJS renders second object it overlaps first one.
Upvotes: 1