Рисование пропало внутри create тут и конструктор и рисование

Ничего не пропало, фабричные функции (в терминах ООП) создают объекты (сущности) с требуемой от них функциональностью. Посколько требовалось пока только делать "render", то из одной этой функции сущности и состоят.

Значит, при добавлении или модификации нового метода будет всё сломано.

Да с чего бы сломано? Как там вообще что-то сделать, чтобы сломать?

Сделай рисование красным.

По хорошему, покраска уже после отрисовки формы должна быть. Типа такого:

type Color = "Black" | "Red" | "Green" | "Blue" | "Magenta" | "Salmon" | "Gold";
const getCanvas = () => {
    const shapes: Shape[] = [];
    return {
        add: (shape: Shape) => shapes.push(shape),
        render: (color?: Color) => shapes.map(shape => shape() + (color ? ` ${color}` : "")),
    }
}

Сделай вычисление площадей

Тоже работы на 3 минуты.

Скрытый текст

type Shape = {
    render: () => string,
    getArea: () => number,
}

type Color = "Black" | "Red" | "Green" | "Blue" | "Magenta" | "Salmon" | "Gold";

const create = {
    point: (x: number, y: number): Shape => ({
        render: () => `Drawing a Point at (${x},${y})`,
        getArea: () => 0,
    }),
    circle: (x: number, y: number, r: number): Shape => ({
        render: () => `Drawing a Circle R=${r} at (${x},${y})`,
        getArea: () => r * r * Math.PI,
    }),
    rectangle: (x1: number, y1: number, x2: number, y2: number, width: number): Shape => ({
        render: () => `Drawing a Rectangle (${x1}, ${y1}) to (${x2},${y2}) width=${width}`,
        getArea: () => Math.sqrt(Math.pow(x1 - x2, 2) + Math.pow(y1 - y2, 2)) * width,
    })
};

const getCanvas = () => {
    const shapes: Shape[] = [];
    return {
        add: (shape: Shape) => shapes.push(shape),
        render: (color?: Color) => shapes.map(shape => shape.render() + (color ? ` ${color}` : "")),
        getTotalArea: () => shapes.reduce((sum, cur) => cur.getArea() + sum, 0),
    }
}

const main = () => {
    const canvas = getCanvas();
    canvas.add(create.circle(1, 2, 3));
    canvas.add(create.point(1, 2));
    canvas.add(create.rectangle(1, 2, 3, 4, 5));

    canvas.render();

    canvas.render("Gold");
}

Хотя, можно, конечно, и поупарываться

Скрытый текст

type ShapeType = "circle" | "point" | "rectangle";

type Shape = [ShapeType, ...number[]];

type Color = "Black" | "Red" | "Green" | "Blue" | "Magenta" | "Salmon" | "Gold";

const create = {
    circle: (x: number, y: number, r: number): Shape => ["circle", x, y, r],
    point: (x: number, y: number): Shape => ["point", x, y],
    rectangle: (x1: number, y1: number, x2: number, y2: number, width: number): Shape => ["rectangle", x1, y1, x2, y2, width],
};

const renderers: Record<ShapeType, (shape: Shape) => string> = {
    circle: ([_, x, y, r]) => `Drawing a Circle R=${r} at (${x},${y})`,
    point: ([_, x, y]) => `Drawing a Point at (${x},${y})`,
    rectangle: ([_, x1, y1, x2, y2, width]) => `Drawing a Rectangle (${x1}, ${y1}) to (${x2},${y2}) width=${width}`,
}

const render = (shape: Shape, color: Color = "Black") =>
    (renderers[shape[0]] || (() => ""))(shape) + (color ? ` ${color}` : "");

const areaCalculators: Record<ShapeType, (shape: Shape) => number> = {
    circle: ([_, x, y, r]) => r * r * Math.PI,
    point: () => 0,
    rectangle: ([_, x1, y1, x2, y2, width]) => Math.sqrt(Math.pow(x1 - x2, 2) + Math.pow(y1 - y2, 2)) * width,
}

const getArea = (shape: Shape) =>
    (areaCalculators[shape[0]] || (() => NaN))(shape);

const getCanvas = () => {
    const shapes: Shape[] = [];
    return {
        add: (shape: Shape) => shapes.push(shape),
        render: (color?: Color) => shapes.map(shape => render(shape, color)),
        getTotalArea: () => shapes.reduce((sum, cur) => getArea(cur) + sum, 0),
    }
}

const main = () => {
    const canvas = getCanvas();
    canvas.add(create.circle(1, 2, 3));
    canvas.add(create.point(1, 2));
    canvas.add(create.rectangle(1, 2, 3, 4, 5));

    canvas.render();

    canvas.render("Gold");

    canvas.getTotalArea();
}