Check part of SVG image to fill them with color with fabric.js

I used to fabric.js and freedrawing. Most of the code is included here http://fabricjs.com/freedrawing. I want to rewrite it to and add some new options. One of then is coloring book. I think i should do this with SVG. So I load SVG images and then I let for user to fill image parts. I have some code:

fabric.loadSVGFromURL('../scripts/svg/arrow.svg',function(objects, options){// here I load SVG imagevar shape = fabric.util.groupSVGElements(objects, options);


for(var i =0; i < shape.paths.length; i++){
shape.paths.setFill(colorSet);}//here i loop all of parts of image, shape.paths is the coordinate path of image so there is litle shapes from my image which i can filled with color for example:"<path xmlns="http://www.w3.org/2000/svg" d="M424.597,77.953c3.946-12.739,9.222-41.029-5.26-77.244c0,0-25.547-8.113-83.338,30.565 /> "

canvas.add(shape);
canvas.renderAll();});

Code (markup):

I want to write some if statement which check if this coordinate is the same point here user clicked on canvas. So I tried to write some if which check where user clicked and then fill this part of image:

for(var i =0; i < shape.paths.length; i++){if(shape.containsPoint(canvas.getPointer())){// I tried to find where user clicked on canvas and check if this point is in the coordinate of image
shape.paths.setFill(colorSet);}}

Code (markup):

But there i have error that getPointer is not function. Here is console log of this points http://fiddle.jshell.net/qhfvpj4z/8/. (check console.log I think there is coordinates of image parts) Anyone know how can I get the part of my image and fill with color?