FabricJS ClipTo with image or SVG as canvas border
How can I use clipTo with an image or SVG? I want to constrain any objects to go beyond the outline / image of the SVG shape.
I'm trying to accomplish something similar to this OP , however the answers haven't seemed to me yet how to do it.
I can use clipTo with a regular shape like:
var circle = new fabric.Circle({
radius: 150,
stroke: '#f55',
fill: "transparent",
top: 50,
left: 50
});
circle.selectable = false;
canvas.add(circle);
canvas.clipTo = function (ctx) {
circle.render(ctx);
};
See this fiddle for a working example: http://jsfiddle.net/o9f4dqjn/1/
However, I cannot get this to work with the image. Is it possible?
source to share
Although this solution doesn't use clipTo, it works.
From: https://github.com/kangax/fabric.js/issues/2313
And my modified working fiddle: http://jsfiddle.net/w396uhnv/
Basically you need to set a background image and then set yourobject.globalCompositeOperation = 'source-atop';
to an object.
Note that the background image must have a transparent background, but an opaque fill.
I could get the clipTo method to only work with SVG (not image):
fabric.loadSVGFromURL('http://fabricjs.com/assets/23.svg', function (objects, options) {
var shape = fabric.util.groupSVGElements(objects, options);
canvas.clipTo = function (ctx) {
shape.render(ctx);
};
canvas.renderAll();
});
source to share