import { fabric } from 'fabric';
const Canvas = () => {
const [canvas, setCanvas] = useState('');
useEffect(() => {
setCanvas(initCanvas());
}, []);
const initCanvas = () => (
new fabric.Canvas('canvas', {
height: 800,
width: 800,
})
);
const addRect = canvi => {
const rect = new fabric.Rect({
height: 280,
width: 200,
fill: 'yellow'
});
canvi.add(rect);
canvi.renderAll();
}
return(
<div>
<button onClick={() => addRect(canvas)}></button>
<br/><br/>
<canvas id="canvas" />
</div>
);
}
export default Canvas;
I want to display the rectangle without using the button and also to display its state on the browser the onload event is also not working in the react I also tried to use the other alternative of onload but it's of no help
I'm also working on this if you want to add rect without button click you can add it into the useEffect.
const fuctionName = ()=>{
useEffect(() => {
return () => {
const canvas = new fabric.Canvas('canvas-main');
const rect = new fabric.Rect({
height: 280,
width: 200,
fill: 'yellow',
});
canvas.add(rect);
}
}, [])
return (
<>
<canvas
style={{ border: 'solid 1px #555' }}
id="canvas-main"
width="600px"
height="600px"
/>
</>
);
};