Fix ~1 second delay opening new document in Chrome by correctly setting willReadFrequently (#2962)

* Fix ~1 second delay opening new document in Chrome by correctly setting willReadFrequently

* Use willReadFrequently in a couple more places

Author: Keavon

frontend/src/components/panels/Document.svelte

@@ -241,8 +241,8 @@
 			`.trim();
 
 		if (!rasterizedCanvas) {
-			rasterizedCanvas = await rasterizeSVGCanvas(svg, width * dpiFactor, height * dpiFactor, "image/png");
-			rasterizedContext = rasterizedCanvas.getContext("2d") || undefined;
+			rasterizedCanvas = await rasterizeSVGCanvas(svg, width * dpiFactor, height * dpiFactor);
+			rasterizedContext = rasterizedCanvas.getContext("2d", { willReadFrequently: true }) || undefined;
 		}
 		if (!rasterizedContext) return undefined;
 

frontend/src/messages.ts

@@ -516,7 +516,7 @@ export class Color {
 		const canvas = document.createElement("canvas");
 		canvas.width = 1;
 		canvas.height = 1;
-		const context = canvas.getContext("2d");
+		const context = canvas.getContext("2d", { willReadFrequently: true });
 		if (!context) return undefined;
 
 		context.clearRect(0, 0, 1, 1);

frontend/src/utility-functions/rasterization.ts

@@ -93,7 +93,7 @@ export async function imageToCanvasContext(imageData: ImageBitmapSource): Promis
 	canvas.width = width;
 	canvas.height = height;
 
-	const context = canvas.getContext("2d");
+	const context = canvas.getContext("2d", { willReadFrequently: true });
 	if (!context) throw new Error("Could not create canvas context");
 	context.drawImage(image, 0, 0, image.width, image.height, 0, 0, width, height);