croquis

Minimal CLI for running Canvas 2D sketches in the browser.

Install

npm install -g croquis

Usage

croquis sketch.ts

Write a default export function, get a full-screen canvas:

import type { Handle } from "croquis"

export default function (this: Handle) {
  const ctx = this.context
  ctx.fillStyle = "tomato"
  ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height)
  return () => {}
}

The function receives this: Handle which provides context (CanvasRenderingContext2D) and signal (AbortSignal). Return a draw function — it becomes the per-frame callback when loop is enabled.

Animation

import type { Config, Handle } from "croquis"

export const config: Config = { loop: true }

export default function (this: Handle) {
  let t = 0
  return (ctx: CanvasRenderingContext2D) => {
    const w = ctx.canvas.width
    const h = ctx.canvas.height
    ctx.clearRect(0, 0, w, h)
    ctx.fillStyle = `hsl(${t++ % 360}, 70%, 55%)`
    ctx.fillRect(w / 4, h / 4, w / 2, h / 2)
  }
}

Config

| Key | Default | Description | | ------ | ------- | ----------------------------------- | | loop | false | Enable requestAnimationFrame loop |

Features

• Saves auto-reload the browser
• TypeScript works out of the box
• npm packages resolve via esm.sh — no install needed

Local dependencies

If node_modules exists next to your sketch, imports resolve locally instead of CDN.

License

MIT