From 2975da0f69750eeccb68b800ee9bd4383172a62e Mon Sep 17 00:00:00 2001 From: Muhammad Ibrahim Date: Tue, 28 Oct 2025 18:35:52 +0000 Subject: [PATCH] fix: use SVG-based rendering for Trianglify in browser instead of Node.js canvas --- frontend/src/components/Layout.jsx | 19 +++++++++++++++++-- frontend/src/pages/Login.jsx | 19 +++++++++++++++++-- 2 files changed, 34 insertions(+), 4 deletions(-) diff --git a/frontend/src/components/Layout.jsx b/frontend/src/components/Layout.jsx index 5032ec1..1e800e8 100644 --- a/frontend/src/components/Layout.jsx +++ b/frontend/src/components/Layout.jsx @@ -261,8 +261,23 @@ const Layout = ({ children }) => { yColors: themeConfig.login.yColors, }); - // Render to canvas - pattern.toCanvas(bgCanvasRef.current); + // Render to canvas using SVG (browser-compatible) + const svg = pattern.toSVG(); + const ctx = bgCanvasRef.current.getContext("2d"); + const img = new Image(); + const blob = new Blob([svg], { type: "image/svg+xml" }); + const url = URL.createObjectURL(blob); + img.onload = () => { + ctx.drawImage( + img, + 0, + 0, + bgCanvasRef.current.width, + bgCanvasRef.current.height, + ); + URL.revokeObjectURL(url); + }; + img.src = url; } } catch (error) { // Canvas/trianglify not available, skip background generation diff --git a/frontend/src/pages/Login.jsx b/frontend/src/pages/Login.jsx index 9979476..00705a1 100644 --- a/frontend/src/pages/Login.jsx +++ b/frontend/src/pages/Login.jsx @@ -77,8 +77,23 @@ const Login = () => { yColors: themeConfig.login.yColors, }); - // Render to canvas - pattern.toCanvas(canvasRef.current); + // Render to canvas using SVG (browser-compatible) + const svg = pattern.toSVG(); + const ctx = canvasRef.current.getContext("2d"); + const img = new Image(); + const blob = new Blob([svg], { type: "image/svg+xml" }); + const url = URL.createObjectURL(blob); + img.onload = () => { + ctx.drawImage( + img, + 0, + 0, + canvasRef.current.width, + canvasRef.current.height, + ); + URL.revokeObjectURL(url); + }; + img.src = url; } } catch (error) { // Canvas/trianglify not available, skip background generation