Use canvas as target for raster rendering (#1256)

* Implement ApplicationIo

* Simplify output duplication logic

* Fix let node initialization for ExtractImageFrame

* Async macros

* Use manual node registry impl

* Fix canvas insertion into the dom

frontend/src/components/panels/Document.svelte

@@ -124,6 +124,17 @@
 	export async function updateDocumentArtwork(svg: string) {
 		artworkSvg = svg;
 		rasterizedCanvas = undefined;
+
+		await tick();
+
+		const placeholders = window.document.querySelectorAll("[data-canvas] [data-canvas-placeholder]");
+		// Replace the placeholders with the actual canvas elements
+		placeholders.forEach((placeholder) => {
+			const canvasName = placeholder.getAttribute("data-canvas-placeholder");
+			// Get the canvas element from the global storage
+			const context = (window as any).imageCanvases[canvasName];
+			placeholder.replaceWith(context.canvas);
+		});
 	}
 
 	export function updateDocumentOverlays(svg: string) {
@@ -578,6 +589,11 @@
 						// Allows dev tools to select the artwork without being blocked by the SVG containers
 						pointer-events: none;
 
+						canvas {
+							width: 100%;
+							height: 100%;
+						}
+
 						// Prevent inheritance from reaching the child elements
 						> * {
 							pointer-events: auto;

frontend/src/wasm-communication/editor.ts

@@ -60,6 +60,7 @@ export async function initWasm(): Promise<void> {
 	// eslint-disable-next-line import/no-cycle
 	await init();
 	wasmImport = await wasmMemory();
+	window["imageCanvases"] = {};
 
 
 	// Provide a random starter seed which must occur after initializing the WASM module, since WASM can't generate its own random numbers