[burntcaramel]

I’ve found canvas + WebAssembly works great together!

Here’s an example of Sudoku running in WebAssembly (it was vibe coded in Zig) and then rendered to canvas. The interface between the wasm module and the browser is function calls for keyboard and mouse events, and then another that renders to a pixel buffer to copy to the canvas.

https://qip.dev/play-sudoku

And this approach also works for simple forms, such as a URL input that gets turned into a QR code. Again the interface is simple, here converted a URL into SVG markup. As you type in the input we call the WebAssembly render function again.

https://qip.dev/qr

[spartanatreyu]

The sudoku example has something massively wrong with it's performance. Latency is over a second per click and it halts after a few clicks.

The QR example works fine though

[burntcaramel]

Thanks, I had shipped a bug in the event system. The performance should be much improved now.

[spartanatreyu]

Can confirm it's working now :)

[dmazzoni]

Do you really think this "works great"?

I'm using a brand-new MacBook Pro with a high-end M5 processor, and this site is extremely unresponsive for me. Huge latency between clicking and getting feedback.

It also breaks accessibility.

The QR code use case seems far more reasonable to me, you're generating a static image.

[burntcaramel]

It definitely wasn’t “working great”, I’ve now fixed a bug in the event system that was causing loops. The performance should be improved now.

Yes, accessibility is a key concern of mine, I’m keen to explore html-in-canvas as a way to have an accessibility tree combined with a rendered interaction.

I’m personally at a stage where React and CSS have pushed to DOM to extremes of complexity and difficultly in optimization that I desire simpler ARIA-based HTML combined with custom rendering. I’m hopeful that it will be easier to test, lighter for users, and faster for everyone.

[breve]

Try a WebAssembly implementation of solitaire: https://solitaire.xaml.live/