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

@@ -8,7 +8,7 @@ export class MaskTool {
this.mainCanvas = canvasInstance.canvas;
this.onStateChange = callbacks.onStateChange || null;
this.maskCanvas = document.createElement('canvas');
this.maskCtx = this.maskCanvas.getContext('2d');
this.maskCtx = this.maskCanvas.getContext('2d', { willReadFrequently: true });
this.x = 0;
this.y = 0;
@@ -21,7 +21,7 @@ export class MaskTool {
this.lastPosition = null;
this.previewCanvas = document.createElement('canvas');
this.previewCtx = this.previewCanvas.getContext('2d');
this.previewCtx = this.previewCanvas.getContext('2d', { willReadFrequently: true });
this.previewVisible = false;
this.previewCanvasInitialized = false;
@@ -220,7 +220,7 @@ export class MaskTool {
const tempCanvas = document.createElement('canvas');
tempCanvas.width = this.maskCanvas.width;
tempCanvas.height = this.maskCanvas.height;
const tempCtx = tempCanvas.getContext('2d');
const tempCtx = tempCanvas.getContext('2d', { willReadFrequently: true });
tempCtx.drawImage(this.maskCanvas, 0, 0);
const imageData = tempCtx.getImageData(0, 0, tempCanvas.width, tempCanvas.height);
const data = imageData.data;
@@ -258,7 +258,7 @@ export class MaskTool {
this.maskCanvas.width = newWidth;
this.maskCanvas.height = newHeight;
this.maskCtx = this.maskCanvas.getContext('2d');
this.maskCtx = this.maskCanvas.getContext('2d', { willReadFrequently: true });
if (oldMask.width > 0 && oldMask.height > 0) {