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;Quiero mostrar el rectángulo sin usar el botón y también mostrar su estado en el navegador. El evento de carga tampoco funciona en la reacción. También intenté usar la otra alternativa de carga pero no sirve de nada.
También estoy trabajando en esto si desea agregar rect sin hacer clic en el botón, puede agregarlo en 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" /> </> ); };