noSmooth() makes textures with NEAREST interpolation blurry

[RandomGamingDev]

Most appropriate sub-area of p5.js?

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

p5.js version

1.7.0

Web browser and version

115.0.5790.111

Operating System

Windows 10

Steps to reproduce this

Steps:

1. Create a small texture that you can tell is or isn't pixelated
2. Create the canvas and set it to noSmooth()
3. Set the interpolation to NEAREST

Snippet:

let img;
let canvas;

function preload() {
  img = loadImage('<pixelated image goes here>');
}

function setup() {
  canvas = createCanvas(400, 400, WEBGL);
  noSmooth(); // ironically the image only smooths/blurs if this is on

  canvas.getTexture(img).setInterpolation(NEAREST, NEAREST);
}

function draw() {
  background(0);
  image(img, -width / 2, -height / 2, width, height);
}

In case you don't want to copy and paste it here's the sketch: https://editor.p5js.org/PotatoBoy/sketches/vgaD3vTok