<canvasid="canvas"width="300"height="300"></canvas><scriptsrc="https://cdn.jsdelivr.net/npm/fabric@6.4.3/dist/index.js"></script><script>constcanvas=newfabric.Canvas('canvas');constrect=newfabric.Rect({top:100,left:100,width:60,height:70,fill:'red',});canvas.add(rect);</script>

importReact,{useEffect,useRef}from'react';import*asfabricfrom'fabric';// v6import{fabric}from'fabric';// v5exportconstFabricJSCanvas=()=>{constcanvasEl=useRef<HTMLCanvasElement>(null);useEffect(()=>{constoptions={ ...};constcanvas=newfabric.Canvas(canvasEl.current,options);// make the fabric.Canvas instance available to your appupdateCanvasContext(canvas);return()=>{updateCanvasContext(null);canvas.dispose();}},[]);return<canvaswidth="300"height="300"ref={canvasEl}/>;};

importhttpfrom'http';import*asfabricfrom'fabric/node';// v6import{fabric}from'fabric';// v5constport=8080;http.createServer((req,res)=>{constcanvas=newfabric.Canvas(null,{width:100,height:100});constrect=newfabric.Rect({width:20,height:50,fill:'#ff0000'});consttext=newfabric.Text('fabric.js',{fill:'blue',fontSize:24});canvas.add(rect,text);canvas.renderAll();if(req.url==='/download'){res.setHeader('Content-Type','image/png');res.setHeader('Content-Disposition','attachment; filename="fabric.png"');canvas.createPNGStream().pipe(res);}elseif(req.url==='/view'){canvas.createPNGStream().pipe(res);}else{constimageData=canvas.toDataURL();res.writeHead(200,'',{'Content-Type':'text/html'});res.write(`<img src="${imageData}" />`);res.end();}}).listen(port,(err)=>{if(err)throwerr;console.log(`> Ready on http://localhost:${port}, http://localhost:${port}/view, http://localhost:${port}/download`,);});