reactjstypescriptfabricjs

Add a container inside the canvas fabric js using typescript


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

enter image description here

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


Solution

  • 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>
        );
    }