How can I draw a ine between the first and last point dynamically

I'm making a program where a user can draw a room roughly, than he/she needs to put in the lengths from the walls and then my program makes a detailed drawing of it in a new canvas. I get all the lines working but only the last line between the first and last point doesnt seem to work due to the slanted line.

I have tried some code that will make a new end point so it will exactly under the begin point but it won't draw a line.

Here is the result of the following code:

    if(CheckInput())
    {
        if(confirm("U staat op het punt om de tekening te genereren, de waardes en de tekening zullen hierna niet meer aanpasbaar zijn."))
        {

            document.getElementById("BtnClearCAll").style.visibility = "hidden";

            PointAX = PuntArrayScetch[0].X;
            PointAY = PuntArrayScetch[0].Y;


            for(var i=0;i<PointCount;i++)
            {
                if(PuntArrayScetch[i].Y == PuntArrayScetch[(i+1)].Y)
                {
                    //alert("Y is gelijk");
                    PointBY = PointAY;
                    if((PuntArrayScetch[i].X - PuntArrayScetch[(i+1)].X) < 0)
                    {
                        //alert("Lijn -> rechts");
                        PointBX = (PointAX + parseInt(document.getElementById("LineBox"+i).value));
                    }
                    else if((PuntArrayScetch[i].X - PuntArrayScetch[(i+1)].X) > 0)
                    {
                        //alert("Lijn -> Links");
                        PointBX = (PointAX - parseInt(document.getElementById("LineBox"+i).value));
                    }
                    DrawNewLine(i);
                }
                else if(PuntArrayScetch[i].X == PuntArrayScetch[(i+1)].X)
                {
                    //alert("X is gelijk");
                    PointBX = PointAX;
                    if((PuntArrayScetch[i].Y - PuntArrayScetch[(i+1)].Y) < 0)
                    {
                        PointBY = (PointBY + parseInt(document.getElementById("LineBox"+i).value));
                        //alert("Lijn -> Benee");
                    }
                    else if((PuntArrayScetch[i].Y - PuntArrayScetch[(i+1)].Y) > 0)
                    {
                        PointBY = (PointBY - parseInt(document.getElementById("LineBox"+i).value));
                        //alert("Lijn -> Bove");
                    }
                    DrawNewLine(i);
                }           

            }
        }
    }


function DrawNewLine(i)
{
    var axn = PointAX;
    var ayn = PointAY;
    var bxn = PointBX;
    var byn = PointBY;


if((PuntArrayScetch[0].X == PuntArrayScetch[i].X) && (PuntArrayScetch[0].Y == PuntArrayScetch[i].Y) && i > 0)
{
    alert("Beep Boop I'm a Robot");
    bxn = PuntArrayScetch[0].X;
    byn = ayn;

}   
    ktx.lineWidth = 3;
    //ktx.lineJoin='miter';

    ktx.moveTo(axn,ayn); //beweeg vanaf punt A
    ktx.lineTo(bxn, byn); //beweeg naar het punt B
    ktx.stroke(); 

    PointAX = bxn;
    PointAY = byn;

}

I expected a line between the first point and the end point but the line just won't draw. How could i fix this? Do I need to make another PointArray for the new points and draw it from these new points or does that give the same problem?

That's exactly what closePath does.

Call it before you call stroke().

ktx.moveTo(axn,ayn);
ktx.lineTo(bxn, byn);
ktx.closePath(); // lineTo first point
ktx.stroke();

However in your DrawNewLine function, don't forget to call ktx.beginPath() to instantiate a new sub path, or call ktx.stroke() only once after all the calls to DrawNewLine. Currently, you are drawing the first shape over itself many times.