参考 渲染矩形和椭圆

x = Inputs.range([50, 300], { label: 'x', value: 100, step: 1 });

y = Inputs.range([50, 300], { label: 'y', value: 100, step: 1 });

width = Inputs.range([50, 300], { label: 'width', value: 100, step: 1 });

height = Inputs.range([50, 300], { label: 'height', value: 100, step: 1 });

cornerRadius = Inputs.range([5, 30], {
    label: 'cornerRadius',
    value: 10,
    step: 1,
});

fill = Inputs.color({ label: 'fill', value: '#ff0000' });

rect = (() => {
    const { Rect } = Lesson9;
    const rect = new Rect({
        x: 100,
        y: 100,
        width: 100,
        height: 100,
        cornerRadius: 10,
        fill: 'red',
    });
    return rect;
})();

(() => {
    rect.x = x;
    rect.y = y;
    rect.width = width;
    rect.height = height;
    rect.fill = fill;
    rect.cornerRadius = cornerRadius;
})();

(async () => {
    const { Canvas } = Lesson9;

    const canvas = await Utils.createCanvas(Canvas, 200, 200);

    canvas.appendChild(rect);

    let id;
    const animate = () => {
        canvas.render();
        id = requestAnimationFrame(animate);
    };
    animate();

    unsubscribe(() => {
        cancelAnimationFrame(id);
        canvas.destroy();
    });
    return canvas.getDOM();
})();