tint fails in 2d canvas with webgl p5.Graphics

[micuat]

Most appropriate sub-area of p5.js?

• Accessibility (Web Accessibility)
• Build tools and processes
• Color
• Core/Environment/Rendering
• Data
• DOM
• Events
• Friendly error system
• Image
• IO (Input/Output)
• Localization
• Math
• Unit Testing
• Typography
• Utilities
• WebGL
• Other (specify if possible)

Details about the bug:

• p5.js version: 1.1.9
• Web browser and version: any
• Operating System: any
• Steps to reproduce this:

using tint inside a 2D canvas with webgl p5.Graphics causes error
https://editor.p5js.org/micuat/sketches/9hh8x1HjF

TypeError: canvas.getContext(...) is null (sketch: line 14)

from #3709 (comment)

[stalgiag]

Thank you @micuat !

This problem is fixed and grunt passes if the function here is changed to:

Filters._toPixels = function(canvas) {
  if (canvas instanceof ImageData) {
    return canvas.data;
  } else {
    if (canvas.getContext('2d')) {
      return canvas
        .getContext('2d')
        .getImageData(0, 0, canvas.width, canvas.height).data;
    } else if (canvas.getContext('webgl')) {
      const gl = canvas.getContext('webgl');
      const len = gl.drawingBufferWidth * gl.drawingBufferHeight * 4;
      const data = new Uint8Array(len);
      gl.readPixels(
        0,
        0,
        canvas.width,
        canvas.height,
        gl.RGBA,
        gl.UNSIGNED_BYTE,
        data
      );
      return data;
    }
  }
};

This isn't ideal for a few reasons, it uses getContext to check whether the context is 2D or 3D. It also reproduces much of the code from loadPixels() which is more efficient because it checks for an existing pixel cache. Off the top of my head, I think a lot of this could be fixed by passing the renderer instead of the canvas (when there is one). I don't have time to try at this precise moment so if anyone else wants to take it up they are welcome. Otherwise, I can return to this at some point in the next month or so.

[ShenpaiSharma]

Hi, @stalgiag, I would like to work on this.

[montoyamoraga]

hi @ShenpaiSharma we assigned this issue to you,
please link it when you submit a PR, good luck, and thanks!