dustinswan/cg
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source
This commit is contained in:
Dustin Swan 2026-02-03 13:28:20 -07:00
parent 86996ed4ef
commit 58715f42bf
No known key found for this signature in database
GPG key ID: 30D46587E2100467
4 changed files with 45 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

20
index.html
View file

@ -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>

10
src/main.ts
View file

@ -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');

21
src/runtime.ts
View file

@ -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();
}

5
src/ui.ts
View file

@ -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);