Merge pull request #13 from stagas/canvas

feat: add canvas

README.md

@@ -30,6 +30,7 @@
 - [x] Deno KV storage
 - [x] Kysley Postgres/Neon storage
   - [x] Migrations
+  - [ ] Seeds
 - [x] RPC (GET/POST)
 - [x] Emails (Resend)
 - [x] Auth
@@ -56,8 +57,10 @@
 - [x] Tailwindcss
 - [x] Icons (Lucide)
 - [x] Fonts
-- [ ] Canvas
-  - [ ] Wait for Fonts
+- [x] Canvas
+  - [x] Wait for Fonts
+  - [x] Animation
+  - [x] Screen/Dims
 - [x] AssemblyScript
 - [x] WebAudio
   - [x] Wasm AudioWorklet

src/pages/About.tsx

@@ -1,5 +1,3 @@
-import { Link } from '~/src/ui/Link.tsx'
-
 export function About() {
   return <div>
     About Page

src/pages/App.tsx

@@ -5,6 +5,7 @@ import { ResetPassword } from '~/src/comp/ResetPassword.tsx'
 import { VerifyEmail } from '~/src/comp/VerifyEmail.tsx'
 import { About } from '~/src/pages/About.tsx'
 import { AssemblyScript } from '~/src/pages/AssemblyScript.tsx'
+import { Canvas } from '~/src/pages/Canvas'
 import { Chat } from '~/src/pages/Chat/Chat.tsx'
 import { Home } from '~/src/pages/Home.tsx'
 import { OAuthRegister } from '~/src/pages/OAuthRegister.tsx'
@@ -19,6 +20,8 @@ export function App() {
 
   const info = $({
     bg: 'transparent',
+    canvasWidth: 500,
+    canvasHeight: 500,
   })
 
   return <main
@@ -49,6 +52,12 @@ export function App() {
           case '/chat':
             return <Chat />
 
+          case '/canvas':
+            return <Canvas
+              width={info.$.canvasWidth}
+              height={info.$.canvasHeight}
+            />
+
           case '/asc':
             return <AssemblyScript />
 

src/pages/Canvas.tsx

@@ -0,0 +1,59 @@
+import { Sigui, type Signal } from 'sigui'
+import { drawText } from 'utils'
+import { screen } from '~/src/screen.ts'
+
+export function Canvas({ width, height }: {
+  width: Signal<number>
+  height: Signal<number>
+}) {
+  using $ = Sigui()
+
+  const canvas = <canvas width="1" height="1" /> as HTMLCanvasElement
+  const c = canvas.getContext('2d')!
+
+  const info = $({
+    pr: screen.$.pr,
+    width,
+    height,
+    c: $.unwrap(async () => {
+      await document.fonts.ready
+      return c
+    })
+  })
+
+  $.fx(() => {
+    const { c, width, height, pr } = $.of(info)
+    $()
+    if (c instanceof Error) return
+    canvas.width = width * pr
+    canvas.height = height * pr
+    canvas.style.width = `${width}px`
+    canvas.style.height = `${height}px`
+    c.scale(pr, pr)
+    c.textBaseline = 'top'
+    c.textRendering = 'optimizeSpeed'
+    c.miterLimit = 1.5
+    c.font = '32px "Fustat"'
+  })
+
+  let i = 0
+  let animFrame: any
+  function tick() {
+    animFrame = requestAnimationFrame(tick)
+    c.restore()
+    c.save()
+    c.rotate(0.12 * i++)
+    drawText(c, { x: 10, y: 10 }, 'Hello World', `hsl(${i % 360}, 50%, 50%)`, 4, '#000')
+  }
+
+  $.fx(() => {
+    const { c } = $.of(info)
+    $()
+    if (c instanceof Error) return
+    c.translate(info.width / 2, info.height / 2)
+    tick()
+    return () => cancelAnimationFrame(animFrame)
+  })
+
+  return canvas
+}

src/pages/Home.tsx

@@ -23,6 +23,7 @@ export function Home() {
         <div class="flex gap-2">
           {state.user.isAdmin && <a href="/admin/">Admin</a>}
           <Link href="/chat">Chat</Link>
+          <Link href="/canvas">Canvas</Link>
           <Link href="/asc">AssemblyScript</Link>
           <Link href="/about">About</Link>
         </div>

src/screen.ts

@@ -0,0 +1,5 @@
+import { $ } from 'sigui'
+
+export const screen = $({
+  pr: window.devicePixelRatio,
+})