// text.js


/*
 * Create text, given a font file path, the message, and size
 */
S2D.CreateText = function(font, msg, size) {
  
  // Create image object
  var txt   = Object.create(S2D.Text);
  txt.color = Object.create(S2D.Color);
  txt.font  = font;
  txt.size  = size;
  
  // Create a canvas element to make a texture
  var ctx = document.createElement("canvas").getContext("2d");
  
  // TODO: Width and height should probably be variable, based on
  // `ctx.measureText(msg).width` or something.
  var w = 1000;
  var h = 1000;
  
  // Double size of font for high DPI
  size = size * 2;
  
  // Set context attributes and draw text
  ctx.canvas.width  = w;
  ctx.canvas.height = h;
  ctx.font = `${size}px ${font}`;
  ctx.textAlign = "right";
  ctx.textBaseline = "bottom";
  ctx.fillStyle = "white";
  ctx.fillText(msg, w, h);
  
  // Wait until after the window is ready to create the WebGL texture
  window.addEventListener('DOMContentLoaded', function() {
    if (msg == "") return;  // no need to create a texture
    txt.data    = S2D.TrimCanvas(ctx.canvas);  // trim the transparent pixels
    txt.texture = S2D.GL.CreateTexture(txt.data);
    txt.width   = txt.data.width  / 2;  // half size of texture for high DPI
    txt.height  = txt.data.height / 2;
  });
  
  return txt;
};


/*
* Sets the text message
*/
S2D.SetText = function(txt, msg) {
  S2D.GL.FreeTexture(txt.texture);
  
  // Create a canvas element to make a texture
  var ctx = document.createElement("canvas").getContext("2d");
  
  // TODO: Width and height should probably be variable, based on
  // `ctx.measureText(msg).width` or something.
  var w = 1000;
  var h = 1000;
  
  // Double size of font for high DPI
  var size = txt.size * 2;
  
  // Set context attributes and draw text
  ctx.canvas.width  = w;
  ctx.canvas.height = h;
  ctx.font = `${size}px ${txt.font}`;
  ctx.textAlign = "right";
  ctx.textBaseline = "bottom";
  ctx.fillStyle = "white";
  ctx.fillText(msg, w, h);
  
  txt.data    = S2D.TrimCanvas(ctx.canvas);  // trim the transparent pixels
  txt.texture = S2D.GL.CreateTexture(txt.data);
  txt.width   = txt.data.width  / 2;  // half size of texture for high DPI
  txt.height  = txt.data.height / 2;
};


/*
 * Draw text
 */
S2D.DrawText = function(txt) {
  if (!txt) return;
  S2D.GL.DrawText(txt);
};

@@ -257,1024 +257,39 @@
 txt.
-size  = size;%0A  %0A  // Create a canvas element to make a texture%0A  var ctx = document.createElement(%22canvas%22).getContext(%222d%22);%0A  %0A  // TODO: Width and height should probably be variable, based on%0A  // %60ctx.measureText(msg).width%60 or something.%0A  var w = 1000;%0A  var h = 1000;%0A  %0A  // Double size of font for high DPI%0A  size = size * 2;%0A  %0A  // Set context attributes and draw text%0A  ctx.canvas.width  = w;%0A  ctx.canvas.height = h;%0A  ctx.font = %60$%7Bsize%7Dpx $%7Bfont%7D%60;%0A  ctx.textAlign = %22right%22;%0A  ctx.textBaseline = %22bottom%22;%0A  ctx.fillStyle = %22white%22;%0A  ctx.fillText(msg, w, h);%0A  %0A  // Wait until after the window is ready to create the WebGL texture%0A  window.addEventListener('DOMContentLoaded', function() %7B%0A    if (msg == %22%22) return;  // no need to create a texture%0A    txt.data    = S2D.TrimCanvas(ctx.canvas);  // trim the transparent pixels%0A    txt.texture = S2D.GL.CreateTexture(txt.data);%0A    txt.width   = txt.data.width  / 2;  // half size of texture for high DPI%0A    txt.height  = txt.data.height / 2;%0A  %7D)
+msg   = msg;%0A  txt.size  = size
 ;%0A  
@@ -373,16 +373,76 @@
  msg) %7B%0A
+  if (msg == %22%22) return;  // no need to create a texture%0A  %0A
   S2D.GL
@@ -1334,24 +1334,24 @@
 tion(txt) %7B%0A
-
   if (!txt) 
@@ -1358,16 +1358,79 @@
 return;%0A
+  %0A  if (!txt.texture) %7B%0A    S2D.SetText(txt, txt.msg);%0A  %7D%0A  %0A
   S2D.GL

Simplify texture creation for text