I am giving the user the ability to click from point to point however they want. My goal is to calculate the area of whatever they created. The problem is that it isn't always going to be a perfect square or triangle, etc.. It seems like all I have to work with is logging the changes in the coordinates each time they click and doing a manual calculation. Is there an easy way to get the filled in area of a Path2D() or is it very complicated?

Here is my current code:

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// ctx.moveTo(0, 0);
// ctx.lineTo(200, 100);
// ctx.stroke();

const path = new Path2D();

c.addEventListener('mousedown', function(e) {
    const x = event.clientX - rect.left;
    const y = event.clientY - rect.top;


    ctx.strokeStyle = "black";
    ctx.lineWidth = 5;

    path.lineTo(x, y);
    ctx.stroke(path);
    ctx.fill(path);

    console.log(path);

    // console.log(x);
    // console.log(y);

    // ctx.lineTo(x, y);
    // ctx.stroke();
    // ctx.fillStyle = "red";
    // ctx.fill();
});