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