add image with points svg canvas

Question

I have a number of points. I want to implement in the image of my canvas , I do the following :

       for(var i = 0; i< coordsFinals.length; i++){
            xPoints[i] = {x:coordsFinals[i].x+50, y:coordsFinals[i].y+50};
        }
        var cFinals = xPoints;
        //console.log(cFinals);
        var clipShape = new fabric.Polygon(cFinals,{
            left: 15,
            right: 15,
            top: 0,
            fill:'#FFF',
            opacity: '0',
        });
        var pugImg = new Image();

        pugImg.onload = function (img) {
            var pug = new fabric.Image(pugImg, {
                width: imgWidth,
                height: imgHeight,
                top: imgTop,
                left: imgLeft,
                clipTo: function(ctx) {
                    clipShape.render(ctx, true);
                }
            });
            canvas.add(pug);
        };
        pugImg.src = imgI.src;

but when the image is added to the canvas , this does not appear as it should be taking the dot I send her, as if it were all from the central point , someone could tell me how I can make the picture really see the point . as if we put svg coordinates to an image , it's pretty much what I want to do , but in the canvas . From anetemano thanks .

Answer 1

The only thing I can think of first glance, is that the {x:coordsFinals[i].x+50, y:coordsFinals[i].y+50} might need to be {x:coordsFinals[i].x-50, y:coordsFinals[i].y-50} . I'm assuming that the image is 100 wide, and that the +50 was an attempt to correct that. If not, your going to have to explain more.