Fix Github Font Preview mini glyph fill color (#14)

The font preview userscript was previously drawing the glyphs within the
preview pages without specifying the fill color as was done when drawing
the large glyph. This worked fine when the default fill color was the
standard black, but when the color was very light, like it is in dark
themes such as Github Dark, this resulted in having nearly-white glyphs
drawn on top of a nearly-white background. The readability problem this
caused has been fixed by drawing all the glyphs, both the small preview
glyphs and the large detail glyph, using a specific color. That color is
controlled by the "glyphFillColor" variable, which is simply a rename of
the "bigGlyphFillColor" variable but still using the same default color.

You can see a before/after of the UI changes involved in the fix here:
https://imgur.com/1K7Tb7j

Signed-off-by: Emily Mabrey <[email protected]>

Author: emabrey

github-font-preview.user.js

@@ -33,8 +33,8 @@
   const fontExt = /\.(otf|ttf|woff)$/i,
 
   // canvas colors
+  glyphFillColor       = '#808080', // (big) (mini) fill color
   bigGlyphStrokeColor  = '#111111', // (big) stroke color
-  bigGlyphFillColor    = '#808080', // (big) fill color
   bigGlyphMarkerColor  = '#f00',    // (big) min & max width marker
   miniGlyphMarkerColor = '#606060', // (mini) glyph index (bottom left corner)
   glyphRulerColor      = '#a0a0a0'; // (mini) min & max width marker & (big) glyph horizontal lines
@@ -502,7 +502,7 @@
 
     ctx.fillStyle = bigGlyphStrokeColor;
     path = glyph.getPath(x0, glyphBaseline, glyphSize);
-    path.fill = bigGlyphFillColor;
+    path.fill = glyphFillColor;
     path.stroke = bigGlyphStrokeColor;
     path.strokeWidth = 1.5;
     drawPathWithArrows(ctx, path);
@@ -534,7 +534,9 @@
     ctx.fillRect(xmax, fontBaseline, 1, cellMarkSize);
 
     ctx.fillStyle = '#000000';
-    glyph.draw(ctx, x0, fontBaseline, fontSize);
+    let path = glyph.getPath(x0, fontBaseline, fontSize);
+    path.fill = glyphFillColor;
+    path.draw(ctx);
   }
 
   function displayGlyphPage(pageNum) {