customDraw() {
        var subcircuitScope = scopeList[this.id];

        var ctx = simulationArea.context;

        ctx.lineWidth = globalScope.scale * 3;
        ctx.strokeStyle = colors["stroke"]; // ("rgba(0,0,0,1)");
        ctx.fillStyle = colors["fill"];
        var xx = this.x;
        var yy = this.y;

        ctx.strokeStyle = colors['stroke'];
        ctx.fillStyle = colors['fill'];
        ctx.lineWidth = correctWidth(3);
        ctx.beginPath();
        rect2(ctx, -this.leftDimensionX, -this.upDimensionY, this.leftDimensionX + this.rightDimensionX, this.upDimensionY + this.downDimensionY, this.x, this.y, [this.direction, 'RIGHT'][+this.directionFixed]);
        if(!this.elementHover) {
            if ((this.hover && !simulationArea.shiftDown) || simulationArea.lastSelected === this || simulationArea.multipleObjectSelections.contains(this))
                ctx.fillStyle = colors["hover_select"];
        }
        ctx.fill();
        ctx.stroke();

        ctx.beginPath();

        ctx.textAlign = "center";
        ctx.fillStyle = "black";
        if (this.version == "1.0") {
            fillText(
                ctx,
                subcircuitScope.name,
                xx,
                yy - subcircuitScope.layout.height / 2 + 13,
                11
            );
        } else if (this.version == "2.0") {
            if (subcircuitScope.layout.titleEnabled) {
                fillText(
                    ctx,
                    subcircuitScope.name,
                    subcircuitScope.layout.title_x + xx,
                    yy + subcircuitScope.layout.title_y,
                    11
                );
            }
        } else {
            console.log("Unknown Version: ", this.version);
        }

        for (var i = 0; i < subcircuitScope.Input.length; i++) {
            if (!subcircuitScope.Input[i].label) continue;
            var info = this.determine_label(
                this.inputNodes[i].x,
                this.inputNodes[i].y
            );
            ctx.textAlign = info[0];
            fillText(
                ctx,
                subcircuitScope.Input[i].label,
                this.inputNodes[i].x + info[1] + xx,
                yy + this.inputNodes[i].y + info[2],
                12
            );
        }

        for (var i = 0; i < subcircuitScope.Output.length; i++) {
            if (!subcircuitScope.Output[i].label) continue;
            var info = this.determine_label(
                this.outputNodes[i].x,
                this.outputNodes[i].y
            );
            ctx.textAlign = info[0];
            fillText(
                ctx,
                subcircuitScope.Output[i].label,
                this.outputNodes[i].x + info[1] + xx,
                yy + this.outputNodes[i].y + info[2],
                12
            );
        }
        ctx.fill();
        for (let i = 0; i < this.outputNodes.length; i++) {
            this.outputNodes[i].draw();
        }
        for (let i = 0; i < this.inputNodes.length; i++) {
            this.inputNodes[i].draw();
        }

         // draw subcircuitElements
        for(let el of circuitElementList){
            if(this.localScope[el].length === 0) continue;
            if(!this.localScope[el][0].canShowInSubcircuit) continue;
            for(let i = 0; i < this.localScope[el].length; i++){
                if (this.localScope[el][i].subcircuitMetadata.showInSubcircuit) {
                    this.localScope[el][i].drawLayoutMode(this.x, this.y);
                }
            }
        }
    }
Draws the subcircuit (and contained elements) on the screen when the subcircuit is included
       in another circuit