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

[aceslowman]

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);
}

[davepagurek]

In the most recent p5 release (1.5.0), tint() no longer uses image data, so at least that particular warning should go away (and it should be faster!) #5471

This may still be beneficial for other sketches that load/updatePixels often though.

[limzykenneth]

willReadFrequently when set to true will change the canvas pixels data to be CPU backed instead of GPU backed, while this can speed up reading pixel data from the canvas (by eliminating the need to grab the data from GPU to CPU), it can also cause deterioration of performance in most other areas as a CPU backed canvas tend to be slower than GPU backed ones.

This flag is more for special cases where the user know that they will do a lot of pixel reads from the canvas and not much write and want to optimize for it because otherwise the browser vendors can just implement this as a default without needing an option.

This option is also not supported in Safari yet.