Added WebGL text error and textFont documentation update

[RandomGamingDev]

Resolves #7028

Changes:

Replaced the previously vague error:

WEBGL: you must load and set a font before drawing text. See `loadFont` and `textFont` for more details.

with

WEBGL: you must load and set a font before drawing text. See `loadFont` and `textFont` (both of which have to be executed in preload() for WebGL mode when loading a new font) for more details.

and updated textFont()'s page to have a WEBGL example:

// WEBGL Example
function preload() 
  createCanvas(100, 100, WEBGL); // In WebGL textFont has to be executed in preload
  textFont('Courier New');
}
 
function setup() {
  background(200);
  textSize(24);
  text('hi', 35, 55);

  describe('The text "hi" written in a black, monospace font on a gray background.');
}

Screenshots of the change:

PR Checklist

• npm run lint passes
• Inline documentation is included / updated
• Unit tests are included / updated

[RandomGamingDev]

It looks like what's actually going on here is it's creating a WebGL canvas in the preload function before ignoring it and creating a P2D canvas automatically without a createCanvas() statement which is how the font's actually getting loaded with no errors reporting what happened.

Example Code:

// WEBGL Example
function preload() {
  createCanvas(100, 100, WEBGL); // In WebGL textFont has to be executed in preload
  textFont('Courier New');
}
 
function setup() {
  background(200);
  textSize(24);
  text('hi', 35, 55);
  
  describe('The text "hi" written in a black, monospace font on a gray background.');
}

Sketch: https://editor.p5js.org/PotatoBoy/sketches/fSU62FlS3