形状未绘制到 canvas javascript

Question

I am making a game engine called Forge.js. I have a Polygon method in a Entity class and it is not drawing the shapes. It loops through points and draws a line to each of the points. The lines however aren't being drawn. help plz

polygon method:

_polygon(points){
        const local_ctx = new Path2D()

        this.ctx.beginPath()

        var j = 3

        local_ctx.moveTo(points[0], points[1])
        
        for (var i=0; i<=points.length; i++){
            local_ctx.lineTo(points[i+2], points[i+j])

            j += 2

        }

        this.ctx.fillStyle = constants.COLORS.black
        this.ctx.fill()

    }

Answer 1

As has been said in the comments, you need to pass the Path2D object to fill() in order for the context to draw it.
But this isn't the only issue with your code.

Your for loop probably doesn't do what you expected:

 // Rewrote in order to log the indexes that are beign used in the loop var j = 3 console.log(0, 1) for (var i=0; i<=10; i++){ console.log(i+2, i+j) j += 2 }

You can actually simplify this loop a lot by taking advantage of the fact that an empty subpath doesn't require an initial moveTo call. lineTo(x, y) gets automatically converted to moveTo(x, y) if your path is empty.
So we can treat all our points the same, all in a single for loop that only increments our index by 2.

 const constants = { COLORS: { BLACK: "#000" } }; const obj = { ctx: document.createElement("canvas").getContext("2d"), _polygon(points){ const local_ctx = new Path2D() // Since we're using a Path2D object we don't need to do anything // on the context's subpath // this.ctx.beginPath() for (var i=0; i<=points.length; i+=2){ local_ctx.lineTo(points[i], points[i+1]) } this.ctx.fillStyle = constants.COLORS.black this.ctx.fill(local_ctx) // fill the context using the Path2D object } }; document.body.append(obj.ctx.canvas); obj._polygon([13, 13, 13, 50, 50, 50]);