Javascript 如何在特定坐标系的图像上绘制svg或画布

我在图像上选择了坐标（x1，y1）（x2，y2）（x3，y3）（x4，y4）。我想使用cordinates绘制画布（rect）。如何操作？ 我尝试过使用这个函数，但它并没有在图像上绘制特定的坐标

                  for(var i=0;i<_self.coordinatesxy.length;i++){
                        fnc( _self.coordinatesxy[i][0],_self.coordinatesxy[i][1],ci)                
                    }
                    function fnc(x,y, ci){
                            console.log(x,y)                    
                    ci.lineTo(x,y);
                    }
                    ci.strokeStyle = 'red';
                    ci.lineWidth = 2; ci.stroke();

---

for（var i=0；i我不知道你说的“不在特定坐标上绘制”是什么意思，它在哪里绘制？一般来说，你的代码看起来不错

ci.strokeStyle = 'red';
ci.lineWidth = 2;
ci.moveTo(_self.coordinatesxy[0][0],_self.coordinatesxy[0][1]);    
for (var i = 1; i < _self.coordinatesxy.length; i++) {
    ci.lineTo(_self.coordinatesxy[i][0],_self.coordinatesxy[i][1]);
}
ci.stroke();

ci.strokeStyle='red'；
ci.线宽=2；
ci.moveTo（_self.coordinaresxy[0][0]，_self.coordinaresxy[0][1]）；
对于（变量i=1；i<_self.coordinates xy.length；i++）{
ci.lineTo（_self.coordinates xy[i][0]，_self.coordinates xy[i][1]）；
}
ci.stroke（）；
它在图像下方绘制。放置画布标签可能有问题。将画布和图像包装在一个容器中，并将画布放置在绝对位置，以便将其放置在图像顶部。确保它们具有相同的宽度/高度。请提供一个示例。我们将能够提供更好的工作示例帮助。