Add a container inside the canvas fabric js using typescript

Question

I need to add a new container with a dynamic image inside the canvas. I checked the code and am new to learn Typescript. So I need a help here.

This is render part of the code

render() {
    const { style } = this.props;
    const { id } = this.state;
    return (
        <div
            ref={this.containerRef}
            id={id}
            className="rde-canvas"
            style={{ width: '100%', height: '100%', ...style }}
        >
            <canvas id={`canvas_${id}`} />
        </div>
    );
}

And the view is like this

I need to add a container outside of the area, where I can add a dynamic image. Thank you in advance.

This looks like React? If so, it would be worth either adding the appropriate tag or giving a library agnostic example. — DBS
– DBS, Commented May 16 at 11:01

Omprakash S · Accepted Answer · 2025-05-16 11:04:53Z

Make changes to your render() function to include an additional div based on where exactly you want the image container to appear and Use a prop or state variable to dynamically set the image URL.

render() {
    const { style, imageUrl } = this.props; 
    const { id } = this.state;

    return (
        <div style={{ width: '100%', height: '100%' }}>
            
            <div className="image-container" style={{ textAlign: 'center', padding: '10px' }}>
                {imageUrl && <img src={imageUrl} alt="Dynamic" style={{ maxWidth: '100%', height: 'auto' }} />}
            </div>

            <div
                ref={this.containerRef}
                id={id}
                className="rde-canvas"
                style={{ width: '100%', height: 'calc(100% - 60px)', ...style }} 
            >
                <canvas id={`canvas_${id}`} />
            </div>
        </div>
    );
}

Collectives™ on Stack Overflow

Add a container inside the canvas fabric js using typescript

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related