2d text renders badly

My canvas uses WEBGL and i am trying to draw regular debug text on top in 2D.

I am following this WEBGL method https://p5js.org/reference/#/p5/text

function preload() {
  inconsolata = loadFont(
    "https://cdnjs.cloudflare.com/ajax/libs/bwip-js/2.0.6/Inconsolata.otf"
  );
}

function setup() {
  pixelDensity(1); //lower is faster

  var canvas = createCanvas(windowWidth, windowHeight, WEBGL);
  
  textFont(inconsolata);
  textSize(20);
  textAlign(CENTER, CENTER);

Drawing text inside displayHUD() makes it look very glitchy. drawing text inside draw() is glitchy too but in 3D space.

[stephanschulz]

I just tried your example and also tried adding the lights() suggestion but it did not change anything 😦 Overall it’s not a big problem since i can just tell people to use a specific browser.

[jwdunn1]

One other thing to try. If you are using a lighting model in your draw loop, be sure to turn that off in the HUD, otherwise objects are shaded using that lighting model. This would affect how fonts are shaded too. For example, if the standard lighting model lights() is called in the draw loop, then call noLights() in the HUD code. I’ve updated the sketch so you can try it there first.