javascript - 用点svg Canvas 添加图像

我有几点。我要在画布的图像中实现，请执行以下操作：

       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;

但是，当将图像添加到画布上时，它并没有出现，因为它应该是我发送给她的点，好像所有的点都来自中心点，有人可以告诉我如何使图片真正看到该点。就像我们将svg坐标放置到图像上一样，这几乎是我想要做的，但是在画布中。
来自anetemano，谢谢。

最佳答案

我唯一想到的第一件事就是{x:coordsFinals[i].x+50, y:coordsFinals[i].y+50}可能需要为{x:coordsFinals[i].x-50, y:coordsFinals[i].y-50}。我假设图像的宽度为100，而+50是试图对其进行校正。如果没有，您将不得不解释更多。