customDraw() {
        const ctx = simulationArea.context;
        const xx = this.x;
        const yy = this.y;
        const r = this.inp1.value;
        const g = this.inp2.value;
        const b = this.inp3.value;

        const colors = ['rgb(174,20,20)', 'rgb(40,174,40)', 'rgb(0,100,255)'];
        for (let i = 0; i < 3; i++) {
            const x = -10 - 10 * this.pinLength;
            const y = i * 10 - 10;
            ctx.lineWidth = correctWidth(3);

            // A gray line, which makes it easy on the eyes when the pin length is large
            ctx.beginPath();
            ctx.lineCap = 'butt';
            ctx.strokeStyle = 'rgb(227, 228, 229)';
            moveTo(ctx, -15, y, xx, yy, this.direction);
            lineTo(ctx, x + 10, y, xx, yy, this.direction);
            ctx.stroke();

            // A colored line, so people know which pin does what.
            ctx.lineCap = 'round';
            ctx.beginPath();
            ctx.strokeStyle = colors[i];
            moveTo(ctx, x + 10, y, xx, yy, this.direction);
            lineTo(ctx, x, y, xx, yy, this.direction);
            ctx.stroke();
        }

        ctx.strokeStyle = '#d3d4d5';
        ctx.fillStyle = (r === undefined && g === undefined && b === undefined) ? 'rgb(227, 228, 229)' : `rgb(${r || 0}, ${g || 0}, ${b || 0})`;
        ctx.lineWidth = correctWidth(1);
        ctx.beginPath();
        rect2(ctx, -15, -15, 30, 30, xx, yy, this.direction);
        ctx.stroke();

        if ((this.hover && !simulationArea.shiftDown)
            || simulationArea.lastSelected === this
            || simulationArea.multipleObjectSelections.contains(this)) {
            ctx.fillStyle = 'rgba(255, 255, 32)';
        }

        ctx.fill();
    }
@memberof SquareRGBLed
function to draw element