0

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:

enter image description here

    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?

Seblor
  • 6,947
  • 1
  • 25
  • 46
UveGotToFailToSucceed
  • 53
  • 1
  • 6
  • It would be helpful if you could update your question with a [mcve] which will include the HTML and actual working code. Use the code snippet button. – Jamiec Sep 16 '19 at 07:39

1 Answers1

0

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.

Kaiido
  • 123,334
  • 13
  • 219
  • 285