Text is not appending on the canvas after crop by SVG - html

Question

In the canvas i am using clipTo function to crop it.It works for circle,rectangle,....i could add whatever like text and images after that.I added the code below which works.
$(function(){
var canvas = new fabric.Canvas('Canvas',{backgroundColor: '#ffffff',preserveObjectStacking: true});
canvas.clipTo = function (ctx) {
ctx.arc(250, 300, 200, 0, Math.PI*2, true);
};
canvas.add(new fabric.IText('Welcome ', {
left : fabric.util.getRandomInt(120,120),
top:fabric.util.getRandomInt(400, 400)
}));
canvas.renderAll();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.18/fabric.js"></script>
<div class="container">
<div id='canvascontain' width='1140' height='600' style='left:0px;background-color:rgb(240,240,240)'>
<canvas id="Canvas" width='1140' height='600'></canvas>
</div>
After that i am trying to crop the canvas by SVG file.This also works.But problem is i could not add texts or images after clipTo by canvas.The below code is not adding the text to canvas.
fabric.loadSVGFromURL('https://s3-us-west-2.amazonaws.com/fabric-canvas/test.svg', function (objects, options) {
var shape = fabric.util.groupSVGElements(objects, options);
canvas.clipTo = function (ctx) {
shape.render(ctx);
};
canvas.renderAll();
});
canvastext = new fabric.IText('Hi to all',{
left : fabric.util.getRandomInt(120, 120),
top:fabric.util.getRandomInt(400, 400)
});
canvas.add(canvastext);
canvas.renderAll();
The canvas image is:
Thanks in advance.

Answer 1

I have found the solution.Instead of using loadSVGFromURL i am fetching the path from svg file and cropped the canvas like below.
HTML:
<div id='svgpath'>
<object data="test.svg" type="image/svg+xml"
id="svgpathd" width="100%" height="100%"></object>
</div>
Script:
canvas.clipTo = function (ctx) {
var a = document.getElementById("svgpathd");
a.addEventListener("load",function(){
var svgDoc = a.contentDocument;
var clippath = svgDoc.getElementsByTagName("clipPath")[0].getAttribute('id');
var path = svgDoc.getElementsByTagName("path");
for(i=0;i<path.length;i++){
if(svgDoc.getElementsByTagName("path")[i].getAttribute('clip-path')=="url(#"+clippath+")"){
pathd = svgDoc.getElementsByTagName("path")[i].getAttribute('d');
paths = pathd.replace(" L"," L");
localStorage.setItem('svgpathd', paths);
}
}
});
}
document.getElementById('svgpath').style.display='none';
svgpathd = localStorage.getItem('svgpathd');
//Path has been taken and clipping the canvas with the path values
ctx.beginPath();
var path = svgpathd.split("L");
var arr = [];
m = path[0].slice(1).split(" ");
ctx.moveTo(m[0],m[1]);
for(i=0;i<path.length;i++){
arr[i]=path[i].slice(0,-1).slice(1);
}
for(i=0;i<arr.length;i++){
p = arr[i].split(" ");
ctx.lineTo(p[0],p[1]);
}
ctx.fill();
ctx.closePath();
}