Use willReadFrequently in 2D canvas contexts

Updated all calls to getContext('2d') to include the { willReadFrequently: true } option. This change improves performance for frequent pixel read operations, particularly for mask and image processing tasks.
This commit is contained in:
Dariusz L
2025-07-01 07:44:14 +02:00
parent cf10322101
commit 02bac6c624
5 changed files with 23 additions and 23 deletions

View File

@@ -168,7 +168,7 @@ export const imageToTensor = withErrorHandling(async function (image) {
}
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
const ctx = canvas.getContext('2d', { willReadFrequently: true });
canvas.width = image.width || image.naturalWidth;
canvas.height = image.height || image.naturalHeight;
@@ -205,7 +205,7 @@ export const tensorToImage = withErrorHandling(async function (tensor) {
const [, height, width, channels] = tensor.shape;
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
const ctx = canvas.getContext('2d', { willReadFrequently: true });
canvas.width = width;
canvas.height = height;
@@ -246,7 +246,7 @@ export const resizeImage = withErrorHandling(async function (image, maxWidth, ma
}
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
const ctx = canvas.getContext('2d', { willReadFrequently: true });
const originalWidth = image.width || image.naturalWidth;
const originalHeight = image.height || image.naturalHeight;
@@ -292,7 +292,7 @@ export const imageToBase64 = withErrorHandling(function (image, format = 'png',
}
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
const ctx = canvas.getContext('2d', { willReadFrequently: true });
canvas.width = image.width || image.naturalWidth;
canvas.height = image.height || image.naturalHeight;
@@ -374,7 +374,7 @@ export function createImageFromSource(source) {
*/
export const createEmptyImage = withErrorHandling(function (width, height, color = 'transparent') {
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
const ctx = canvas.getContext('2d', { willReadFrequently: true });
canvas.width = width;
canvas.height = height;