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

4 days ago · 58715f42bf
parent 86996ed4ef
commit 58715f42bf
4 changed files with 45 additions and 11 deletions
--- a/index.html
+++ b/index.html
@ -5,7 +5,27 @@
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>cg</title>
+    <style>
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body, html {
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+}
+
+canvas {
+    display: block;
+    width: 100%;
+    height: 100%;
+}
+    </style>
  </head>
+
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
--- a/src/main.ts
+++ b/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');

--- a/src/runtime.ts
+++ b/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();
 }
--- a/src/ui.ts
+++ b/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);