Add 'willReadFrequently' option to certain getContext('2d') calls

Increasing Access

Making canvas operations more performant would make sketches run better on mobile and lower-end hardware.

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)

Feature enhancement details

When using tint() I get a canvas2d warning that says:

Canvas2D: Multiple readback operations using getImageData are faster with the willReadFrequently attribute set to true.

The canvas specs say that passing { willReadFrequently: true } to getContext() will disable hardware acceleration on the canvas, making it perform better with getImageData(). This looks like a recent addition for Chrome at least? It's discussed in a blog post here

Would this be something that would be helpful to add wherever getImageData() is called?

Below is an example that triggers this warning. In this case it's the Filters._toPixels() call in p5.Renderer2D.prototype._getTintedImageCanvas.

let pg0;

function setup() {
  createCanvas(400, 400);
  
  pg0 = createGraphics(400,400);

}

function draw() {
  background(220);
  
  tint(255, 100);
  image(pg0,0,0);
}

Start by searching the rendering code for getImageData(), especially Filters._toPixels() and p5.Renderer2D.prototype._getTintedImageCanvas, which the report identifies as the warning path. Check the related canvas getContext('2d') calls and existing rendering tests, if present. Done means the affected readback path no longer produces the reported warning without changing the expected tint behavior.