4 ms·
Cool project. Is there any way to scale the UI for high dpi displays? On a 2:1 display, the fonts look aliased, if I set the browser zoom to 50%, the UI looks
by WatchDog 3y ago
Cool project.
Is there any way to scale the UI for high dpi displays?
On a 2:1 display, the fonts look aliased, if I set the browser zoom to 50%, the UI looks crisp, but everything is a bit small to be useful.
- iddan 3y agoI fail to understand why not use the native browser rendering engine, or at least SVG for the UI. It must be cheaper in resources (memory, network, cpu), easier to make accessible and easier to render
- jjcm 3y agoAnecdotally, in the very early days Figma rendered its UI entirely in canvas, but we eventually switched over to React for the UI. It ended up being far easier for development cycles and for accessibility/integration with existing browser features.
- solardev 3y agoI thought you guys recently rewrote everything to be in WebGL instead?
- rileyphone 3y agoGo inspect the source and see for yourself, the UI is normal HTML.
- pests 3y agoI think their UI is react but the actual drawing canvas is WebGL.
- TrevorSundberg 3y agoI always thought it was so cool Figma just rendered to a canvas! Oddly enough I ran into this at my previous job doing browser isolation when we got a bug report that Figma wasn’t displaying properly in our browser. Makes sense to switch the rest of the UI to react though, just for how many people know it.
- TrevorSundberg 3y agoThe main reason was just because this engine was entirely built for native platforms originally in C++ (not for the Web). This is a port, hence why the UI is running in WASM/WebGL.
- Matheus28 3y agoTo OP: The fix is setting canvas width to window.innerWidth * window.devicePixelRatio, and height to window.innerHeight * window.devicePixelRatio. Then use CSS to maximize the canvas on the screen.
- TrevorSundberg 3y agoThanks, I’ll make the fix!
- deleted 3y ago[deleted]
- TrevorSundberg 3y agoFixed: https://github.com/raverie-us/raverie-engine/commit/aa7e1b6c7fef9a409755a2050fee8d283765de52 https://github.com/raverie-us/raverie-engine/commit/aa7e1b6c... Had to take into account the mouse coordinates too since they were not scaled.