customDraw() {
        var ctx = simulationArea.context;
        ctx.beginPath();
        ctx.strokeStyle = colors["stroke"];
        ctx.fillStyle = colors["fill"];
        ctx.lineWidth = correctWidth(1);
        const xx = this.x;
        const yy = this.y;

        let xRotate = 0;
        let yRotate = 0;
        if (this.direction === "LEFT") {
            xRotate = 0;
            yRotate = 0;
        } else if (this.direction === "RIGHT") {
            xRotate = 120 - this.xSize;
            yRotate = 0;
        } else if (this.direction === "UP") {
            xRotate = 60 - this.xSize / 2;
            yRotate = -20;
        } else {
            xRotate = 60 - this.xSize / 2;
            yRotate = 20;
        }

        rect2(
            ctx,
            -120 + xRotate + this.xSize,
            -20 + yRotate,
            120 - this.xSize,
            40,
            xx,
            yy,
            "RIGHT"
        );
        if (
            (this.hover && !simulationArea.shiftDown) ||
            simulationArea.lastSelected === this ||
            simulationArea.multipleObjectSelections.contains(this)
        ) {
            ctx.fillStyle = colors["hover_select"];
        }
        ctx.fill();
        ctx.stroke();

        ctx.font = "14px Raleway";
        this.xOff = ctx.measureText(this.identifier).width;
        ctx.beginPath();
        rect2(
            ctx,
            -105 + xRotate + this.xSize,
            -11 + yRotate,
            this.xOff + 10,
            23,
            xx,
            yy,
            "RIGHT"
        );
        ctx.fillStyle = "#eee";
        ctx.strokeStyle = "#ccc";
        ctx.fill();
        ctx.stroke();

        ctx.beginPath();
        ctx.textAlign = "center";
        ctx.fillStyle = "black";
        fillText(
            ctx,
            this.identifier,
            xx - 100 + this.xOff / 2 + xRotate + this.xSize,
            yy + 6 + yRotate,
            14
        );
        ctx.fill();

        ctx.beginPath();
        ctx.font = "30px Raleway";
        ctx.textAlign = "center";
        ctx.fillStyle = ["blue", "red"][+(this.inp1.value === undefined)];
        if (this.inp1.value !== undefined) {
            fillText(
                ctx,
                this.inp1.value.toString(16),
                xx - 23 + xRotate,
                yy + 8 + yRotate,
                25
            );
        } else {
            fillText(ctx, "x", xx - 23 + xRotate, yy + 8 + yRotate, 25);
        }
        ctx.fill();
    }
@memberof Tunnel
function to draw element