Start refactoring to work in WebGL mode too

preview/index.html

@@ -20,25 +20,21 @@
     import p5 from '../src/app.js';
 
     const sketch = function (p) {
-      let g, f;
+      let f;
 
-      p.setup = function () {
-        p.createCanvas(200, 200);
-        g = p.createGraphics(200, 200);
-        f = p.createGraphics(200, 200, p.WEBGL);
+      p.setup = async function () {
+        // TODO: make this work without a name
+        f = await p.loadFont('font/BricolageGrotesque-Variable.ttf', 'Bricolage')
+        p.createCanvas(200, 200, p.WEBGL);
       };
 
       p.draw = function () {
         p.background(0, 50, 50);
-        p.circle(100, 100, 50);
 
         p.fill('white');
         p.textSize(30);
+        p.textFont(f)
         p.text('hello', 10, 30);
-
-        // f.fill('red');
-        f.sphere();
-        p.image(f, 0, 0);
       };
     };
 

src/app.js

@@ -49,10 +49,6 @@ io(p5);
 import math from './math';
 math(p5);
 
-// typography
-import type from './type'
-type(p5);
-
 // utilities
 import utilities from './utilities';
 utilities(p5);
@@ -61,6 +57,10 @@ utilities(p5);
 import webgl from './webgl';
 webgl(p5);
 
+// typography
+import type from './type'
+type(p5);
+
 import './core/init';
 
 export default p5;

src/core/p5.Renderer.js

@@ -486,7 +486,7 @@ class Renderer {
  * Helper function to check font type (system or otf)
  */
   _isOpenType(f = this.states.textFont) {
-    return typeof f === 'object' && f.font && f.font.supported;
+    return typeof f === 'object' && f.data;
   }
 
   _updateTextMetrics() {