move to constants

config.js

@@ -8,6 +8,16 @@ export const config = {
     vertsPerGlyph: 6,
     floatsPerVertex: 8,
     uniformBufferSize: 64,
+    canvas: {
+        width: 512,
+        height: 256
+    },
+    context: {
+        font: '32px monospace',
+        textBaseline: 'middle',
+        textAlign: 'center',
+        fillStyle: 'white'
+    },
     render: {
         zNear: 0.001,
         zFar: 50

constants.js

@@ -1,5 +1,8 @@
 // constants.js
 
+export const CANVAS = document.createElement('canvas');
+export const CTX = CANVAS.getContext('2d');
+
 export const COLORS = [
     [1, 1, 0, 1],
     [0, 1, 1, 1],

index.html

@@ -13,23 +13,22 @@
         import { mat4 } from 'https://webgpufundamentals.org/3rdparty/wgpu-matrix.module.js';
         import { fetchShaderCode } from './utility.js';
         import { config } from './config.js';
-        import { COLORS, RENDER_PASS_DESCRIPTOR } from './constants.js';
+        import { CANVAS, CTX, COLORS, RENDER_PASS_DESCRIPTOR } from './constants.js';
 
         function generateGlyphTextureAtlas() {
-            const canvas = document.createElement('canvas');
-            canvas.width = 512;
-            canvas.height = 256;
-            const ctx = canvas.getContext('2d');
-            ctx.font = '32px monospace';
-            ctx.textBaseline = 'middle';
-            ctx.textAlign = 'center';
-            ctx.fillStyle = 'white';
+            CANVAS.width = config.canvas.width;
+            CANVAS.height = config.canvas.height;
+
+            CTX.font = config.context.font
+            CTX.textBaseline = config.context.textBaseline;
+            CTX.textAlign = config.context.textAlign;
+            CTX.fillStyle = config.context.fillStyle;
             for (let c = 33, x = 0, y = 0; c < 128; ++c) {
-                ctx.fillText(String.fromCodePoint(c), x + config.glyphWidth / 2, y + config.glyphHeight / 2);
-                x = (x + config.glyphWidth) % canvas.width;
+                CTX.fillText(String.fromCodePoint(c), x + config.glyphWidth / 2, y + config.glyphHeight / 2);
+                x = (x + config.glyphWidth) % CANVAS.width;
                 if (x === 0) y += config.glyphHeight;
             }
-            return canvas;
+            return CANVAS;
         }
         async function main() {
             const adapter = await navigator.gpu?.requestAdapter();