From 07802204f212bda9ef39970a0d1e928666e61bbf Mon Sep 17 00:00:00 2001 From: Keavon Chambers Date: Thu, 31 Jul 2025 02:49:16 -0700 Subject: [PATCH] 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 --- frontend/src/components/panels/Document.svelte | 4 ++-- frontend/src/messages.ts | 2 +- frontend/src/utility-functions/rasterization.ts | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/frontend/src/components/panels/Document.svelte b/frontend/src/components/panels/Document.svelte index ebab3b45..a1177418 100644 --- a/frontend/src/components/panels/Document.svelte +++ b/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; diff --git a/frontend/src/messages.ts b/frontend/src/messages.ts index 5bb11ade..6b0c6ffa 100644 --- a/frontend/src/messages.ts +++ b/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); diff --git a/frontend/src/utility-functions/rasterization.ts b/frontend/src/utility-functions/rasterization.ts index 767c7e8b..8a0807ac 100644 --- a/frontend/src/utility-functions/rasterization.ts +++ b/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);