Fixing ugly canvas. now full browser window, fixing dpi blurry issue

src/main.ts

@@ -13,10 +13,7 @@ import textInputCode from './textinput-test.cg?raw';
 import testCode from './test.cg?raw';
 import counterApp from './counter.cg?raw';
 
-const canvas = document.createElement('canvas');
-canvas.width = 800;
-canvas.height = 600;
-canvas.style.border = "1px solid #000";
+const canvas = document.createElement('canvas') as HTMLCanvasElement;
 document.body.appendChild(canvas);
 
 const cgCode = stdlibCode + '\n' + designTokensCode + '\n' + uiComponentsCode + '\n' + textInputCode;
@@ -27,13 +24,8 @@ const ast = parser.parse();
 console.log(ast);
 
 const env: Env = new Map(Object.entries(builtins));
-// const res = evaluate(ast, env);
-// console.log(res);
-
 const appRecord = evaluate(ast, env);
 
-console.log(appRecord);
-
 if (appRecord.kind !== 'record')
     throw new Error('Expected record');
 

src/runtime.ts

@@ -12,6 +12,18 @@ export type App = {
 export function runApp(app: App, canvas: HTMLCanvasElement) {
     let state = app.init;
 
+    function setupCanvas() {
+        const dpr = window.devicePixelRatio || 1;
+
+        canvas.width = window.innerWidth * dpr;
+        canvas.height = window.innerHeight * dpr;
+
+        canvas.style.width = window.innerWidth + 'px';
+        canvas.style.height = window.innerHeight + 'px';
+    }
+
+    setupCanvas();
+
     function rerender() {
         if (app.view.kind !== 'closure')
             throw new Error('view must be a function');
@@ -19,8 +31,8 @@ export function runApp(app: App, canvas: HTMLCanvasElement) {
         const viewport: Value = {
             kind: 'record',
             fields: {
-                width: { kind: 'int', value: canvas.width },
-                height: { kind: 'int', value: canvas.height }
+                width: { kind: 'int', value: window.innerWidth },
+                height: { kind: 'int', value: window.innerHeight }
             }
         };
 
@@ -77,5 +89,10 @@ export function runApp(app: App, canvas: HTMLCanvasElement) {
         }
     })
 
+    window.addEventListener('resize', (e) => {
+        setupCanvas();
+        rerender();
+    })
+
     rerender();
 }

src/ui.ts

@@ -25,7 +25,12 @@ let focusedInputSubmit: Value | null = null;
 export function render(ui: UIValue, canvas: HTMLCanvasElement) {
     const ctx = canvas.getContext('2d');
     if (ctx) {
+        const dpr = window.devicePixelRatio || 1;
+
         ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+        ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+
         clickRegions = [];
         textInputRegions = [];
         renderUI(ui, ctx, 0, 0);