im struggling to find how you have done that when looking at drawing an object i seem to have to draw point by point and fill like my above code, however it looks like you have managed to do that using a draw shape command with an array?
My code is very similar to yours. For example, to draw the exact same triangle you have, I would use:
drawShape(ctx, 50, 50, [100, 70, 100, 30], false);
// This is the same as:
drawShape(ctx, 50, 50, [50, 20, 50, -20]);
I am not sure where the confusion is, because our code really is quite similar. All I have done is as I mentioned in my first reply:
Create a function (I named it drawShape) which accepts 4 or 5 arguments:
The context for where to draw
The starting x location on the canvas
The starting y location on the canvas
An array of (x, y) coordinates (that is why there is always an even number of points in the array.
A boolean telling the function to either draw the points relative to the starting values, or to draw them relative to the canvas.
The main feature of the drawShape function is instead of having to rewrite ctx.lineTo(x, y) many many times (some shapes would require hundreds - see the circle), the function has a for loop to take values from the array, and populate ctx.lineTo(x, y) as many times as needed.