Canvas2D warning in console when using mask() function

[ziyuan-linn]

Most appropriate sub-area of p5.js?

• Accessibility
• Color
• Core/Environment/Rendering
• Data
• DOM
• Events
• Image
• IO
• Math
• Typography
• Utilities
• WebGL
• Build Process
• Unit Testing
• Internalization
• Friendly Errors
• Other (specify if possible)

p5.js version

1.8.0

Web browser and version

Chrome 119.0.6045.160

Operating System

Windows 11

Steps to reproduce this

Steps:

1. Create a p5 image and a p5 video object.
2. In draw(), mask the image onto the video using the mask function.
3. Check the console for the warning: "Canvas2D: Multiple readback operations using getImageData are faster with the willReadFrequently attribute set to true."

Snippet:

let video;
let maskImage;

function setup() {
  createCanvas(400, 400);
  video = createCapture(VIDEO);
  maskImage = createImage(400, 400);
}

function draw() {
  video.mask(maskImage);
}

[davepagurek]

Hi! This isn't actually a bug, just a warning from the browser, so if you're satisfied with the performance as is, you can safely ignore this.

If you want better performance: mask loops over pixels, which is likely to be slower than other methods. If you're in WebGL mode, consider using a shader to do the masking. (Perhaps now that we have filter shader support in both 2D and WebGL mode, we could make a default filter shader for this?) Alternatively, you could make a p5.Graphics, draw the image to that, call graphic.drawingContext.globalCompositeOperation = 'destination-in', and then draw the mask image, then draw the graphic to the main canvas.

[ziyuan-linn]

Thank you for the info!