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

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.

• DBS: This looks like React? If so, it would be worth either adding the appropriate tag or giving a library agnostic example.
• Omprakash S: @ranjit I would add a react tag to the quesiton.
• Ranjit: added @OmprakashS

Answer 1

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