Probleme mit Canvas

[Derbestetv]

Hallo ich habe ein Problem mit canvas 
hier ist der code da hab ich kommentiert welche zeilen der fehler macht
(ich weiß ich bin kein profi und das mit dem einrücken muss ich noch machen das ist je erstmal nur ein test)

Code:

function layout(ctx,x,y,typ,name,richtung,color_top,color_bottom,color_weiche){
console.log(x+" "+y+" "+color_top)
//ctx.fillStyle = '#8b8c7a'; // Roter Hintergrund
//    ctx.fillRect(x+ 1, y+ 1, 139, 71);
if (typ == "Signal"){
    if (richtung == "0"){

console.log("test")
}else{
    ctx.fillStyle = color_top;
            ctx.beginPath();
            ctx.fillRect(x + 1, y + 1, 139, 30);


            ctx.fillStyle = color_bottom;
            ctx.beginPath();
            ctx.fillRect(x + 1, y + 30, 139, 41);

            var xh = x + 120;
            var yh = y + 56;
            ctx.fillStyle = "#000000";
                    ctx.beginPath();
                    ctx.fillRect(xh - 85, yh - 11, 42, 22);

                    ctx.fillStyle = "#FFFFFF";
                    ctx.beginPath();
                    ctx.fillRect(xh - 84, yh - 10, 40, 20);


                    ctx.fillStyle = "#000000";
                    ctx.font = "bold 12px Arial";
                    var width = ctx.measureText(name).width;
                    ////("_______________________");
                    ////(width);
                    ////("_______________________");
                    ctx.fillText(name, xh - 57 - width, yh + 4);
                    var xd = xh + 1;

                    ctx.fillStyle = "#000000";
                    ctx.beginPath();
                    ctx.arc(xd - 30, yh - 40, 7, 300, Math.PI * 2 / 4, false);
                    ctx.fill();
                    ctx.beginPath();
                    ctx.fillRect(xd - 100, yh - 47, 70, 14);
                    ctx.fill();
                    ctx.beginPath();
                    ctx.arc(xd - 100, yh - 40, 7, 900, Math.PI * 2 / 1.3, false);
                    ctx.fill();
                    ctx.beginPath();
                    ctx.fillRect(xd - 25, yh - 42, 10, 4);
                    ctx.fill();
                    ctx.beginPath();
                    ctx.fillRect(xd - 15, yh - 47, 5, 14);
                    var xs = xd - 30;
                    var ys = yh + 4;
ctx.fillStyle = "#000000";
ctx.beginPath();
ctx.arc(xh, yh, 5, 1, Math.PI * 2 / 0.1, false);
ctx.arc(xd, yh - 40, 5, 1, Math.PI * 2 / 0.1, false);
ctx.fill();
ctx.beginPath();
ctx.fillStyle = "#000000";
ctx.fillRect(xd - 120, yh - 25, 139, 10);
ctx.fill();







    ctx.beginPath();
    //ctx.arc(xd, yh, 3.5, 1, Math.PI * 2 / 0.1, false);
    ctx.arc(xd - 78, yh - 40, 5, 1, Math.PI * 2 / 0.1, false);
    ctx.arc(xd - 98, yh - 40, 5, 1, Math.PI * 2 / 0.1, false);

    //ctx.arc(xh, yh, 3.5, 1, Math.PI * 2 / 0.1, false);

    //ctx.arc(xd, yh - 40, 3.5, 1, Math.PI * 2 / 0.1, false);
//ctx.moveTo(xs, ys - 40);
//ctx.lineTo(xs - 8, ys - 48);
//ctx.lineWidth = 3;


ctx.arc(xd, yh, 3.5, 1, Math.PI * 2 / 0.1, false);//diese Zeile und die darunter siend die die das problem verursachen
ctx.arc(xd, yh - 40, 3.5, 1, Math.PI * 2 / 0.1, false);

ctx.moveTo(xd - 30, yh + 4);
                    ctx.lineTo(xd - 40, yh - 0);
                    ctx.lineTo(xd - 30, yh - 4);

ctx.rect(xd - 70, yh - 22, 40, 4);

ctx.arc(xd - 70, yh - 20, 2, 900, Math.PI * 2 / 1.3, false);
ctx.arc(xd - 30, yh - 20, 2, 300, Math.PI * 2 / 4, false);

    ctx.closePath();
    ctx.clip();
}
}
}

Hier ist das Bild von dem Fehler

[Sempervivum]

Bei mir sieht das Signal vollkommen OK aus. Gibt es noch mehr Code, der diesen unerwünschten Effekt verursachen könnte?
   

[Derbestetv]

Code:

function tisch(ctx, x, y,loaded, typ, name,richtung,feld_1,feld_2,feld_3,feld_4,feld_5,feld_6,feld_7,feld_8,feld_9,feld_10,feld_11,feld_12,feld_13,feld_14,feld_15,farbe_oben,farbe_unten,farbe_weiche){
            feld1 = feld_1.split("-");
            feld2 = feld_2.split("-");
            feld3 = feld_3.split("-");
            feld4 = feld_4.split("-");
            feld5 = feld_5.split("-");
            feld6 = feld_6.split("-");
            feld7 = feld_7.split("-");
            feld8 = feld_8.split("-");
            feld9 = feld_9.split("-");
            feld10 = feld_10.split("-");
            feld11 = feld_11.split("-");
            feld12 = feld_12.split("-");
            feld13 = feld_13.split("-");
            feld14 = feld_14.split("-");
            feld15 = feld_15.split("-");
            posx = 28
            posy = 24

            layout(ctx,x,y,typ,name,richtung,farbe_oben,farbe_unten,farbe_weiche)

            if(feld_1 !== ""){


    if (feld1[3].includes(",")) {
        var feld1farbe = feld1[3].split(",");
    }
    var feld1pos = feld1[4].split(",");
    //console.log(feld1);
    if(feld1[0] == "L"){
        if(feld2[2] =="GF" && feld2[5] == "1"){
            console.log("GF")
        }else{
        if(feld1[5] == 1){
            if(feld1[3] == "Rt"){
                ctx.fillStyle = 'rgba(255, 0, 0,1)';
            }else if(feld1[3] == "Bl"){
                ctx.fillStyle = 'rgba(100, 100,255,1)';
            }else{
                ctx.fillStyle = 'rgba(228, 213, 88,1)';
            }
        }else{
            ctx.fillStyle = 'rgba(0, 0, 0,1)';
        }
        if (feld1pos[0].includes(".")) {
                    var feld1posx = feld1pos[0].replace(".","-");
                    }else{
                        var feld1posx = feld1pos[0]
                    }
                    if (feld1pos[1].includes(".")) {
                    var feld1posxa = feld1pos[1].replace(".","-");
                    }else{
                    var feld1posxa = feld1pos[1]
                    }
                    posxvon = x + parseInt(feld1posx)
                    posxbis = 28 + parseInt(feld1posxa)
                    //console.log(feld1pos)
                    //console.log(posxvon)
                    //console.log(posxbis)
        ctx.beginPath();
        ctx.fillRect(posxvon + 1, y + 1, posxbis, 24);
        ctx.fill();

        if(feld1[3] == "Rt" ){
            ctx.fillStyle = 'rgba(255, 0, 0,0.2)';
        }else if(feld1[3] == "Gr"){
            ctx.fillStyle = 'rgba(0,255,0,0.5)';
        }else if(feld1[3] == "W"){
            ctx.fillStyle = 'rgba(228, 213, 88,0.5)';
        }else if(feld1[3] == "Bl"){
            ctx.fillStyle = 'rgba(0, 0,255,0.5)';
        }
        ctx.beginPath();
        ctx.fillRect(posxvon + 1, y + 1, posxbis, 24);
        ctx.fill();
    }
    }

}

if(feld_2 !== ""){


if (feld2[3].includes(",")) {
    var feld2farbe = feld2[3].split(",");
}
var feld2pos = feld2[4].split(",");
//console.log(feld2);
if(feld2[0] == "L"){
    if(feld1[2] =="GF" && feld1[5] == "1" ||feld3[2] =="GF" && feld3[5] == "1"){
        console.log("GF")
    }else{
    if(feld2[5] == 1){
        if(feld2[3] == "Rt"){
            ctx.fillStyle = 'rgba(255, 0, 0,1)';
        }else if(feld2[3] == "Bl"){
            ctx.fillStyle = 'rgba(100, 100,255,1)';
        }else{
            ctx.fillStyle = 'rgba(228, 213, 88,1)';
        }
    }else{
        ctx.fillStyle = 'rgba(0, 0, 0,1)';
    }
    if (feld2pos[0].includes(".")) {
                var feld2posx = feld2pos[0].replace(".","-");
                }else{
                    var feld2posx = feld2pos[0]
                }
                if (feld2pos[1].includes(".")) {
                var feld2posxa = feld2pos[1].replace(".","-");
                }else{
                var feld2posxa = feld2pos[1]
                }
                posxvon = x + parseInt(feld2posx)
                posxbis = 28 + parseInt(feld2posxa)
                //console.log(feld1pos)
                //console.log(posxvon)
                //console.log(posxbis)
    ctx.beginPath();
    ctx.fillRect(posxvon + 29, y + 1, posxbis, 24);
    ctx.fill();

    if(feld2[3] == "Rt" ){
        ctx.fillStyle = 'rgba(255, 0, 0,0.2)';
    }else if(feld2[3] == "Gr"){
        ctx.fillStyle = 'rgba(0,255,0,0.5)';
    }else if(feld2[3] == "W"){
        ctx.fillStyle = 'rgba(228, 213, 88,0.5)';
    }else if(feld2[3] == "Bl"){
        ctx.fillStyle = 'rgba(0, 0,255,0.5)';
    }
    ctx.beginPath();
    ctx.fillRect(posxvon + 29, y + 1, posxbis, 24);
    ctx.fill();
}
}

}
if(feld_3 !== ""){


if (feld3[3].includes(",")) {
    var feld3farbe = feld3[3].split(",");
}
var feld3pos = feld3[4].split(",");
//console.log(feld3);
if(feld3[0] == "L"){
    if(feld2[2] =="GF" && feld2[5] == "1" ||feld4[2] =="GF" && feld4[5] == "1"){
        console.log("GF")
    }else{
    if(feld3[5] == 1){
        if(feld3[3] == "Rt"){
            ctx.fillStyle = 'rgba(255, 0, 0,1)';
        }else if(feld3[3] == "Bl"){
            ctx.fillStyle = 'rgba(100, 100,255,1)';
        }else{
            ctx.fillStyle = 'rgba(228, 213, 88,1)';
        }
    }else{
        ctx.fillStyle = 'rgba(0, 0, 0,1)';
    }
    if (feld3pos[0].includes(".")) {
                var feld3posx = feld3pos[0].replace(".","-");
                }else{
                    var feld3posx = feld3pos[0]
                }
                if (feld3pos[1].includes(".")) {
                var feld3posxa = feld3pos[1].replace(".","-");
                }else{
                var feld1posxa = feld1pos[1]
                }
                posxvon = x + parseInt(feld3posx)
                posxbis = 28 + parseInt(feld3posxa)
                //console.log(feld3pos)
                //console.log(posxvon)
                //console.log(posxbis)
    ctx.beginPath();
    ctx.fillRect(posxvon + 57, y + 1, posxbis, 24);
    ctx.fill();

    if(feld3[3] == "Rt" ){
        ctx.fillStyle = 'rgba(255, 0, 0,0.2)';
    }else if(feld3[3] == "Gr"){
        ctx.fillStyle = 'rgba(0,255,0,0.5)';
    }else if(feld3[3] == "W"){
        ctx.fillStyle = 'rgba(228, 213, 88,0.5)';
    }else if(feld3[3] == "Bl"){
        ctx.fillStyle = 'rgba(0, 0,255,0.5)';
    }
    ctx.beginPath();
    ctx.fillRect(posxvon + 57, y + 1, posxbis, 24);
    ctx.fill();
}
}

}
if(feld_4 !== ""){


if (feld4[3].includes(",")) {
    var feld4farbe = feld4[3].split(",");
}
var feld4pos = feld4[4].split(",");
//console.log(feld1);
if(feld4[0] == "L"){
    if(feld3[2] =="GF" && feld3[5] == "1" ||feld5[2] =="GF" && feld5[5] == "1"){
        console.log("GF")
    }else{
    if(feld4[5] == 1){
        if(feld4[3] == "Rt"){
            ctx.fillStyle = 'rgba(255, 0, 0,1)';
        }else if(feld4[3] == "Bl"){
            ctx.fillStyle = 'rgba(100, 100,255,1)';
        }else{
            ctx.fillStyle = 'rgba(228, 213, 88,1)';
        }
    }else{
        ctx.fillStyle = 'rgba(0, 0, 0,1)';
    }
    if (feld4pos[0].includes(".")) {
                var feld4posx = feld4pos[0].replace(".","-");
                }else{
                    var feld4posx = feld4pos[0]
                }
                if (feld4pos[1].includes(".")) {
                var feld4posxa = feld4pos[1].replace(".","-");
                }else{
                var feld4posxa = feld4pos[1]
                }
                posxvon = x + parseInt(feld4posx)
                posxbis = 28 + parseInt(feld4posxa)
                //console.log(feld4pos)
                //console.log(posxvon)
                //console.log(posxbis)
    ctx.beginPath();
    ctx.fillRect(posxvon + 85, y + 1, posxbis, 24);
    ctx.fill();

    if(feld4[3] == "Rt" ){
        ctx.fillStyle = 'rgba(255, 0, 0,0.2)';
    }else if(feld4[3] == "Gr"){
        ctx.fillStyle = 'rgba(0,255,0,0.5)';
    }else if(feld4[3] == "W"){
        ctx.fillStyle = 'rgba(228, 213, 88,0.5)';
    }else if(feld4[3] == "Bl"){
        ctx.fillStyle = 'rgba(0, 0,255,0.5)';
    }
    ctx.beginPath();
    ctx.fillRect(posxvon + 85, y + 1, posxbis, 24);
    ctx.fill();
}
}

}
if(feld_5 !== ""){


if (feld5[3].includes(",")) {
    var feld5farbe = feld5[3].split(",");
}
var feld5pos = feld5[4].split(",");
//console.log(feld5);
if(feld5[0] == "L"){
    if(feld4[2] =="GF" && feld4[5] == "1"){
        console.log("GF")
    }else{
    if(feld5[5] == 1){
        if(feld5[3] == "Rt"){
            ctx.fillStyle = 'rgba(255, 0, 0,1)';
        }else if(feld5[3] == "Bl"){
            ctx.fillStyle = 'rgba(100, 100,255,1)';
        }else{
            ctx.fillStyle = 'rgba(228, 213, 88,1)';
        }
    }else{
        ctx.fillStyle = 'rgba(0, 0, 0,1)';
    }
    if (feld5pos[0].includes(".")) {
                var feld5posx = feld5pos[0].replace(".","-");
                }else{
                    var feld5posx = feld5pos[0]
                }
                if (feld5pos[1].includes(".")) {
                var feld5posxa = feld5pos[1].replace(".","-");
                }else{
                var feld5posxa = feld5pos[1]
                }
                posxvon = x + parseInt(feld5posx)
                posxbis = 28 + parseInt(feld5posxa)
                //console.log(feld5pos)
                //console.log(posxvon)
                //console.log(posxbis)
    ctx.beginPath();
    ctx.fillRect(posxvon + 113, y + 1, posxbis, 24);
    ctx.fill();

    if(feld5[3] == "Rt" ){
        ctx.fillStyle = 'rgba(255, 0, 0,0.2)';
    }else if(feld5[3] == "Gr"){
        ctx.fillStyle = 'rgba(0,255,0,0.5)';
    }else if(feld5[3] == "W"){
        ctx.fillStyle = 'rgba(228, 213, 88,0.5)';
    }else if(feld5[3] == "Bl"){
        ctx.fillStyle = 'rgba(0, 0,255,0.5)';
    }
    ctx.beginPath();
    ctx.fillRect(posxvon + 113, y + 1, posxbis, 24);
    ctx.fill();
}
}

}
if(feld_6 !== ""){


if (feld6[3].includes(",")) {
    var feld6farbe = feld6[3].split(",");
}
var feld6pos = feld6[4].split(",");
//console.log(feld6);
if(feld6[0] == "L"){
    if(feld7[2] =="GF" && feld7[5] == "1"){
        console.log("GF")
    }else{
    if(feld6[5] == 1){
        if(feld6[3] == "Rt"){
            ctx.fillStyle = 'rgba(255, 0, 0,1)';
        }else if(feld6[3] == "Bl"){
            ctx.fillStyle = 'rgba(100, 100,255,1)';
        }else{
            ctx.fillStyle = 'rgba(228, 213, 88,1)';
        }
    }else{
        ctx.fillStyle = 'rgba(0, 0, 0,1)';
    }
    if (feld6pos[0].includes(".")) {
                var feld6posx = feld6pos[0].replace(".","-");
                }else{
                    var feld6posx = feld6pos[0]
                }
                if (feld6pos[1].includes(".")) {
                var feld6posxa = feld6pos[1].replace(".","-");
                }else{
                var feld6posxa = feld6pos[1]
                }
                posxvon = x + parseInt(feld6posx)
                posxbis = 28 + parseInt(feld6posxa)
                //console.log(feld6pos)
                //console.log(posxvon)
                //console.log(posxbis)
    ctx.beginPath();
    ctx.fillRect(posxvon + 1, y + 25, posxbis, 24);
    ctx.fill();

    if(feld6[3] == "Rt" ){
        ctx.fillStyle = 'rgba(255, 0, 0,0.2)';
    }else if(feld6[3] == "Gr"){
        ctx.fillStyle = 'rgba(0,255,0,0.5)';
    }else if(feld6[3] == "W"){
        ctx.fillStyle = 'rgba(228, 213, 88,0.5)';
    }else if(feld6[3] == "Bl"){
        ctx.fillStyle = 'rgba(0, 0,255,0.5)';
    }
    ctx.beginPath();
    ctx.fillRect(posxvon + 1, y + 25, posxbis, 24);
    ctx.fill();
}
}

}

            if(feld_7 !== ""){
               feld7 = feld_7.split("-");

                if (feld7[3].includes(",")) {
                       var feld7farbe = feld7[3].split(",");
                }
                 var feld7pos = feld7[4].split(",");
                   //console.log(feld7);
                if(feld7[0] == "L"){
                    if(feld6[2] =="GF" && feld6[5] == "1" || feld8[2] =="GF" && feld8[5] == "1"){
                    console.log("GF")
                    }else{
                    if(feld7[5] == 1){
                           if(feld7[3] == "Rt"){
                            ctx.fillStyle = 'rgba(255, 0, 0,1)';
                        }else if(feld7[3] == "Bl"){
                            ctx.fillStyle = 'rgba(100, 100,255,1)';
                        }else{
                            ctx.fillStyle = 'rgba(228, 213, 88,1)';
                            }
                    }else{
                        ctx.fillStyle = 'rgba(0, 0, 0,1)';
                    }
                    if (feld7pos[0].includes(".")) {
                    var feld7posx = feld7pos[0].replace(".","-");
                    }else{
                        var feld7posx = feld7pos[0]
                    }
                    if (feld7pos[1].includes(".")) {
                    var feld7posxa = feld7pos[1].replace(".","-");
                    }else{
                    var feld7posxa = feld7pos[1]
                    }
                    posxvon = x + parseInt(feld7posx)
                    posxbis = 28 + parseInt(feld7posxa)
                    //console.log(feld7pos)
                    //console.log(posxvon)
                    //console.log(posxbis)
                    ctx.beginPath();
                    ctx.fillRect(posxvon + 29, y + 25, posxbis, 24);
                    ctx.fill();

                    if(feld7[3] == "Rt" ){
                        ctx.fillStyle = 'rgba(255, 0, 0,0.2)';
                    }else if(feld7[3] == "Gr"){
                        ctx.fillStyle = 'rgba(0,255,0,0.5)';
                    }else if(feld7[3] == "W"){
                        ctx.fillStyle = 'rgba(228, 213, 88,0.5)';
                    }else if(feld7[3] == "Bl"){
                        ctx.fillStyle = 'rgba(0, 0,255,0.5)';
                    }
                    ctx.beginPath();
                    ctx.fillRect(posxvon + 29, y + 25, posxbis, 24);
                    ctx.fill();
                }
                }
            }
            if(feld_8 !== ""){
    feld8 = feld_8.split("-");

    if (feld8[3].includes(",")) {
        var feld8farbe = feld8[3].split(",");
    }
    var feld8pos = feld8[4].split(",");
    //console.log(feld8);
    if(feld8[0] == "L"){
        if(feld7[2] =="GF" && feld7[5] == "1" || feld9[2] =="GF" && feld9[5] == "1"){
            console.log("GF")
        }else{
        if(feld8[5] == 1){
            if(feld8[3] == "Rt"){
                ctx.fillStyle = 'rgba(255, 0, 0,1)';
            }else if(feld8[3] == "Bl"){
                ctx.fillStyle = 'rgba(100, 100,255,1)';
            }else{
                ctx.fillStyle = 'rgba(228, 213, 88,1)';
            }
        }else{
            ctx.fillStyle = 'rgba(0, 0, 0,1)';
        }
        if (feld8pos[0].includes(".")) {
                    var feld8posx = feld8pos[0].replace(".","-");
                    }else{
                        var feld8posx = feld8pos[0]
                    }
                    if (feld8pos[1].includes(".")) {
                    var feld8posxa = feld8pos[1].replace(".","-");
                    }else{
                    var feld8posxa = feld8pos[1]
                    }
                    posxvon = x + parseInt(feld8posx)
                    posxbis = 28 + parseInt(feld8posxa)
                    //console.log(feld8pos)
                    //console.log(posxvon)
                    //console.log(posxbis)
        ctx.beginPath();
        ctx.fillRect(posxvon + 57, y + 25, posxbis, 24);
        ctx.fill();

        if(feld8[3] == "Rt" ){
            ctx.fillStyle = 'rgba(255, 0, 0,0.2)';
        }else if(feld8[3] == "Gr"){
            ctx.fillStyle = 'rgba(0,255,0,0.5)';
        }else if(feld8[3] == "W"){
            ctx.fillStyle = 'rgba(228, 213, 88,0.5)';
        }else if(feld8[3] == "Bl"){
            ctx.fillStyle = 'rgba(0, 0,255,0.5)';
        }
        ctx.beginPath();
        ctx.fillRect(posxvon + 57, y + 25, posxbis, 24);
        ctx.fill();
    }
    }

}
if(feld_9 !== ""){


if (feld9[3].includes(",")) {
    var feld9farbe = feld9[3].split(",");
}
var feld9pos = feld9[4].split(",");
//console.log(feld9);
if(feld9[0] == "L"){
    if(feld8[2] =="GF" && feld8[5] == "1" || feld10[2] =="GF" && feld10[5] == "1"){
        console.log("GF")
    }else{
    if(feld9[5] == 1){
        if(feld9[3] == "Rt"){
            ctx.fillStyle = 'rgba(255, 0, 0,1)';
        }else if(feld9[3] == "Bl"){
            ctx.fillStyle = 'rgba(100, 100,255,1)';
        }else{
            ctx.fillStyle = 'rgba(228, 213, 88,1)';
        }
    }else{
        ctx.fillStyle = 'rgba(0, 0, 0,1)';
    }
    if (feld9pos[0].includes(".")) {
                var feld9posx = feld9pos[0].replace(".","-");
                }else{
                    var feld9posx = feld9pos[0]
                }
                if (feld9pos[1].includes(".")) {
                var feld9posxa = feld9pos[1].replace(".","-");
                }else{
                var feld9posxa = feld9pos[1]
                }
                posxvon = x + parseInt(feld9posx)
                posxbis = 28 + parseInt(feld9posxa)
                //console.log(feld9pos)
                //console.log(posxvon)
                //console.log(posxbis)
    ctx.beginPath();
    ctx.fillRect(posxvon + 85, y + 25, posxbis, 24);
    ctx.fill();

    if(feld9[3] == "Rt" ){
        ctx.fillStyle = 'rgba(255, 0, 0,0.2)';
    }else if(feld9[3] == "Gr"){
        ctx.fillStyle = 'rgba(0,255,0,0.5)';
    }else if(feld9[3] == "W"){
        ctx.fillStyle = 'rgba(228, 213, 88,0.5)';
    }else if(feld9[3] == "Bl"){
        ctx.fillStyle = 'rgba(0, 0,255,0.5)';
    }
    ctx.beginPath();
    ctx.fillRect(posxvon + 85, y + 25, posxbis, 24);
    ctx.fill();
}
}

}
if(feld_10 !== ""){


if (feld10[3].includes(",")) {
    var feld10farbe = feld10[3].split(",");
}
var feld10pos = feld10[4].split(",");
//console.log(feld10);
if(feld10[0] == "L"){
    if(feld9[2] =="GF" && feld9[5] == "1"){
        console.log("GF")
    }else{
    if(feld10[5] == 1){
        if(feld10[3] == "Rt"){
            ctx.fillStyle = 'rgba(255, 0, 0,1)';
        }else if(feld10[3] == "Bl"){
            ctx.fillStyle = 'rgba(100, 100,255,1)';
        }else{
            ctx.fillStyle = 'rgba(228, 213, 88,1)';
        }
    }else{
        ctx.fillStyle = 'rgba(0, 0, 0,1)';
    }
    if (feld10pos[0].includes(".")) {
                var feld10posx = feld10pos[0].replace(".","-");
                }else{
                    var feld10posx = feld10pos[0]
                }
                if (feld10pos[1].includes(".")) {
                var feld10posxa = feld10pos[1].replace(".","-");
                }else{
                var feld10posxa = feld10pos[1]
                }
                posxvon = x + parseInt(feld10posx)
                posxbis = 28 + parseInt(feld10posxa)
                //console.log(feld10pos)
                //console.log(posxvon)
                //console.log(posxbis)
    ctx.beginPath();
    ctx.fillRect(posxvon + 113, y + 25, posxbis, 24);
    ctx.fill();

    if(feld10[3] == "Rt" ){
        ctx.fillStyle = 'rgba(255, 0, 0,0.2)';
    }else if(feld10[3] == "Gr"){
        ctx.fillStyle = 'rgba(0,255,0,0.5)';
    }else if(feld10[3] == "W"){
        ctx.fillStyle = 'rgba(228, 213, 88,0.5)';
    }else if(feld10[3] == "Bl"){
        ctx.fillStyle = 'rgba(0, 0,255,0.5)';
    }
    ctx.beginPath();
    ctx.fillRect(posxvon + 113, y + 25, posxbis, 24);
    ctx.fill();
}
}

}
if(feld_11 !== ""){


if (feld11[3].includes(",")) {
    var feld11farbe = feld11[3].split(",");
}
var feld11pos = feld11[4].split(",");
//console.log(feld11);
if(feld11[0] == "L"){
    if(feld12[2] =="GF" && feld12[5] == "1"){
        console.log("GF")
    }else{
    if(feld11[5] == 1){
        if(feld11[3] == "Rt"){
            ctx.fillStyle = 'rgba(255, 0, 0,1)';
        }else if(feld11[3] == "Bl"){
            ctx.fillStyle = 'rgba(100, 100,255,1)';
        }else{
            ctx.fillStyle = 'rgba(228, 213, 88,1)';
        }
    }else{
        ctx.fillStyle = 'rgba(0, 0, 0,1)';
    }
    if (feld11pos[0].includes(".")) {
                var feld11posx = feld11pos[0].replace(".","-");
                }else{
                    var feld11posx = feld11pos[0]
                }
                if (feld11pos[1].includes(".")) {
                var feld11posxa = feld11pos[1].replace(".","-");
                }else{
                var feld11posxa = feld11pos[1]
                }
                posxvon = x + parseInt(feld11posx)
                posxbis = 28 + parseInt(feld11posxa)
                //console.log(feld11pos)
                //console.log(posxvon)
                //console.log(posxbis)
    ctx.beginPath();
    ctx.fillRect(posxvon + 1, y + 49, posxbis, 23);
    ctx.fill();

    if(feld11[3] == "Rt" ){
        ctx.fillStyle = 'rgba(255, 0, 0,0.2)';
    }else if(feld11[3] == "Gr"){
        ctx.fillStyle = 'rgba(0,255,0,0.5)';
    }else if(feld11[3] == "W"){
        ctx.fillStyle = 'rgba(228, 213, 88,0.5)';
    }else if(feld11[3] == "Bl"){
        ctx.fillStyle = 'rgba(0, 0,255,0.5)';
    }
    ctx.beginPath();
    ctx.fillRect(posxvon + 1, y + 49, posxbis, 23);
    ctx.fill();
}
}

}

            if(feld_12 !== ""){
               feld12 = feld_12.split("-");

                if (feld12[3].includes(",")) {
                       var feld12farbe = feld12[3].split(",");
                }
                 var feld12pos = feld12[4].split(",");
                   //console.log(feld12);
                if(feld12[0] == "L"){
                    if(feld11[2] =="GF" && feld11[5] == "1" || feld13[2] =="GF" && feld13[5] == "1"){
                    console.log("GF")
                    }else{
                    if(feld12[5] == 1){
                           if(feld12[3] == "Rt"){
                            ctx.fillStyle = 'rgba(255, 0, 0,1)';
                        }else if(feld12[3] == "Bl"){
                            ctx.fillStyle = 'rgba(100, 100,255,1)';
                        }else{
                            ctx.fillStyle = 'rgba(228, 213, 88,1)';
                            }
                    }else{
                        ctx.fillStyle = 'rgba(0, 0, 0,1)';
                    }
                    if (feld12pos[0].includes(".")) {
                    var feld12posx = feld12pos[0].replace(".","-");
                    }else{
                        var feld12posx = feld12pos[0]
                    }
                    if (feld12pos[1].includes(".")) {
                    var feld12posxa = feld12pos[1].replace(".","-");
                    }else{
                    var feld12posxa = feld12pos[1]
                    }
                    posxvon = x + parseInt(feld12posx)
                    posxbis = 28 + parseInt(feld12posxa)
                    //console.log(feld12pos)
                    //console.log(posxvon)
                    //console.log(posxbis)
                    ctx.beginPath();
                    ctx.fillRect(posxvon + 29, y + 49, posxbis, 23);
                    ctx.fill();

                    if(feld7[3] == "Rt" ){
                        ctx.fillStyle = 'rgba(255, 0, 0,0.2)';
                    }else if(feld12[3] == "Gr"){
                        ctx.fillStyle = 'rgba(0,255,0,0.5)';
                    }else if(feld12[3] == "W"){
                        ctx.fillStyle = 'rgba(228, 213, 88,0.5)';
                    }else if(feld12[3] == "Bl"){
                        ctx.fillStyle = 'rgba(0, 0,255,0.5)';
                    }
                    ctx.beginPath();
                    ctx.fillRect(posxvon + 29, y + 49, posxbis, 23);
                    ctx.fill();
                }
                }
            }
            if(feld_13 !== ""){
    feld13 = feld_13.split("-");

    if (feld13[3].includes(",")) {
        var feld13farbe = feld13[3].split(",");
    }
    var feld13pos = feld13[4].split(",");
    //console.log(feld13);
    if(feld13[0] == "L"){
        if(feld12[2] =="GF" && feld12[5] == "1" || feld14[2] =="GF" && feld14[5] == "1"){
            console.log("GF")
        }else{
        if(feld13[5] == 1){
            if(feld13[3] == "Rt"){
                ctx.fillStyle = 'rgba(255, 0, 0,1)';
            }else if(feld13[3] == "Bl"){
                ctx.fillStyle = 'rgba(100, 100,255,1)';
            }else{
                ctx.fillStyle = 'rgba(228, 213, 88,1)';
            }
        }else{
            ctx.fillStyle = 'rgba(0, 0, 0,1)';
        }
        if (feld13pos[0].includes(".")) {
                    var feld13posx = feld13pos[0].replace(".","-");
                    }else{
                        var feld13posx = feld13pos[0]
                    }
                    if (feld13pos[1].includes(".")) {
                    var feld13posxa = feld13pos[1].replace(".","-");
                    }else{
                    var feld13posxa = feld13pos[1]
                    }
                    posxvon = x + parseInt(feld13posx)
                    posxbis = 28 + parseInt(feld13posxa)
                    //console.log(feld8pos)
                    //console.log(posxvon)
                    //console.log(posxbis)
        ctx.beginPath();
        ctx.fillRect(posxvon + 57, y + 49, posxbis, 23);
        ctx.fill();

        if(feld13[3] == "Rt" ){
            ctx.fillStyle = 'rgba(255, 0, 0,0.2)';
        }else if(feld13[3] == "Gr"){
            ctx.fillStyle = 'rgba(0,255,0,0.5)';
        }else if(feld13[3] == "W"){
            ctx.fillStyle = 'rgba(228, 213, 88,0.5)';
        }else if(feld13[3] == "Bl"){
            ctx.fillStyle = 'rgba(0, 0,255,0.5)';
        }
        ctx.beginPath();
        ctx.fillRect(posxvon + 57, y + 49, posxbis, 23);
        ctx.fill();
    }
    }

}
if(feld_14 !== ""){


if (feld14[3].includes(",")) {
    var feld14farbe = feld14[3].split(",");
}
var feld14pos = feld14[4].split(",");
//console.log(feld14);
if(feld14[0] == "L"){
    if(feld13[2] =="GF" && feld13[5] == "1" || feld15[2] =="GF" && feld15[5] == "1"){
        console.log("GF")
    }else{
    if(feld14[5] == 1){
        if(feld14[3] == "Rt"){
            ctx.fillStyle = 'rgba(255, 0, 0,1)';
        }else if(feld14[3] == "Bl"){
            ctx.fillStyle = 'rgba(100, 100,255,1)';
        }else{
            ctx.fillStyle = 'rgba(228, 213, 88,1)';
        }
    }else{
        ctx.fillStyle = 'rgba(0, 0, 0,1)';
    }
    if (feld14pos[0].includes(".")) {
                var feld14posx = feld14pos[0].replace(".","-");
                }else{
                    var feld14posx = feld14pos[0]
                }
                if (feld14pos[1].includes(".")) {
                var feld14posxa = feld14pos[1].replace(".","-");
                }else{
                var feld14posxa = feld14pos[1]
                }
                posxvon = x + parseInt(feld14posx)
                posxbis = 28 + parseInt(feld14posxa)
                //console.log(feld9pos)
                //console.log(posxvon)
                //console.log(posxbis)
    ctx.beginPath();
    ctx.fillRect(posxvon + 85, y + 49, posxbis, 23);
    ctx.fill();

    if(feld14[3] == "Rt" ){
        ctx.fillStyle = 'rgba(255, 0, 0,0.2)';
    }else if(feld14[3] == "Gr"){
        ctx.fillStyle = 'rgba(0,255,0,0.5)';
    }else if(feld14[3] == "W"){
        ctx.fillStyle = 'rgba(228, 213, 88,0.5)';
    }else if(feld14[3] == "Bl"){
        ctx.fillStyle = 'rgba(0, 0,255,0.5)';
    }
    ctx.beginPath();
    ctx.fillRect(posxvon + 85, y + 49, posxbis, 23);
    ctx.fill();
}
}

}
if(feld_15 !== ""){


if (feld15[3].includes(",")) {
    var feld15farbe = feld15[3].split(",");
}
var feld15pos = feld15[4].split(",");
//console.log(feld15);
if(feld15[0] == "L"){
    if(feld14[2] =="GF" && feld14[5] == "1"){
        console.log("GF")
    }else{
    if(feld15[5] == 1){
        if(feld15[3] == "Rt"){
            ctx.fillStyle = 'rgba(255, 0, 0,1)';
        }else if(feld15[3] == "Bl"){
            ctx.fillStyle = 'rgba(100, 100,255,1)';
        }else{
            ctx.fillStyle = 'rgba(228, 213, 88,1)';
        }
    }else{
        ctx.fillStyle = 'rgba(0, 0, 0,1)';
    }
    if (feld15pos[0].includes(".")) {
                var feld15posx = feld15pos[0].replace(".","-");
                }else{
                    var feld15posx = feld15pos[0]
                }
                if (feld15pos[1].includes(".")) {
                var feld15posxa = feld15pos[1].replace(".","-");
                }else{
                var feld15posxa = feld15pos[1]
                }
                posxvon = x + parseInt(feld15posx)
                posxbis = 28 + parseInt(feld15posxa)
                //console.log(feld150pos)
                //console.log(posxvon)
                //console.log(posxbis)
    ctx.beginPath();
    ctx.fillRect(posxvon + 113, y + 49, posxbis, 23);
    ctx.fill();

    if(feld15[3] == "Rt" ){
        ctx.fillStyle = 'rgba(255, 0, 0,0.2)';
    }else if(feld15[3] == "Gr"){
        ctx.fillStyle = 'rgba(0,255,0,0.5)';
    }else if(feld15[3] == "W"){
        ctx.fillStyle = 'rgba(228, 213, 88,0.5)';
    }else if(feld15[3] == "Bl"){
        ctx.fillStyle = 'rgba(0, 0,255,0.5)';
    }
    ctx.beginPath();
    ctx.fillRect(posxvon + 113, y + 49, posxbis, 23);
    ctx.fill();
}
}

}




        }

vllt können wir ja irgent wie reden dann kann ich dir das live in aktion zeigen ist vllt einfacher

das ist der code die die felder im hintergrund macht(die die farben ebene und die licht ebene machen
mein problem ist die zeilen hier

Code:

ctx.arc(xd, yh, 3.5, 1, Math.PI * 2 / 0.1, false);//diese Zeile und die darunter siend die die das problem verursachen
ctx.arc(xd, yh - 40, 3.5, 1, Math.PI * 2 / 0.1, false);

die versusachen halt das die grütze raus kommt und ich weiß halt net warum 
ach ja und die felder(feld_1,etc werden so defieniert "L-N1-HP1-Gr-0,0-0"

[Sempervivum]

15 feld-Parameter, wie soll man da jetzt wissen, was da jeweils drin stehen muss. Poste bitte auch einen Aufruf der Funktion tisch mit den Parametern.

[Derbestetv]

Code:

<?php

session_start();
$_POST['db1'] = $_SESSION["db"];
require_once "dbconnect.php";
$sql = "SELECT `fdl_bf` FROM `lor_userlogin` WHERE `benutzername` = '" . $_SESSION["benutzer"] . "'";
$result = $con->query($sql);

$sql1 = "SELECT * FROM `spdrs60_stw` WHERE `ort` = '" . $result["fdl_bf"] . "'";

$antwort = $con->query($sql1);

if (!isset($antwort[0])) {
    $antwort = [$antwort];
}

foreach ($antwort as $zeichen) {
    echo "tisch(ctx, {$zeichen['x']}, {$zeichen['y']}, {$zeichen['loaded']}, \"{$zeichen['typ']}\", \"{$zeichen['name']}\", {$zeichen['richtung']}, \"{$zeichen['feld_1']}\", \"{$zeichen['feld_2']}\", \"{$zeichen['feld_3']}\", \"{$zeichen['feld_4']}\", \"{$zeichen['feld_5']}\", \"{$zeichen['feld_6']}\", \"{$zeichen['feld_7']}\", \"{$zeichen['feld_8']}\", \"{$zeichen['feld_9']}\", \"{$zeichen['feld_10']}\", \"{$zeichen['feld_11']}\", \"{$zeichen['feld_12']}\", \"{$zeichen['feld_13']}\", \"{$zeichen['feld_14']}\", \"{$zeichen['feld_15']}\", \"{$zeichen['farbe_oben']}\", \"{$zeichen['farbe_unten']}\", \"{$zeichen['farbe_weiche']}\");";

}

das ist die datenbank abfrage die die function tisch aufruft

Hier ist die Datenbank wie das signal definiert ist

PS. ich habe in der layout funktion noch die zeile mit
 //ctx.moveTo(xs, ys - 40);
//ctx.lineTo(xs - 8, ys - 48);
//ctx.lineWidth = 3;

wenn ich die nicht kommtentiert habe werden die nicht mit ausgeschnitten

[Sempervivum]

Aus einem Screenshot kann man keine Testdaten erzeugen. Lass besser die betr. Zeile als JSON-Text ausgeben und poste diesen. Dann kann man problemlos eine Testdatei erzeugen ohne umständlich eine Datenbanktabelle anlegen zu müssen.