dotframe 0.1.0

package/src/native/ffi.ts

@@ -0,0 +1,42 @@
+// Signature-only declarations bound to native/df_native.c through native/ffi.*.json.
+export declare function dfOpen(width: number, height: number, title: string): number;
+export declare function dfKeyDown(scancode: number): boolean;
+export declare function dfGamepadAxis(pad: number, axis: number): number;
+export declare function dfGamepadButton(pad: number, button: number): boolean;
+export declare function dfMouse(field: number): number;
+export declare function dfPrefPath(org: string, app: string, out: Uint8Array): number;
+export declare function dfWidth(): number;
+export declare function dfHeight(): number;
+export declare function dfBuffer(usage: number, data: Uint8Array): number;
+export declare function dfBufferWrite(buffer: number, data: Uint8Array): void;
+export declare function dfBufferDestroy(buffer: number): void;
+export declare function dfPipeline(wgsl: string, stride: number, attributes: Uint8Array, flags: number): number;
+export declare function dfBind(pipeline: number, buffer: number, texture: number): number;
+export declare function dfTexture(width: number, height: number, rgba: Uint8Array, smooth: boolean): number;
+export declare function dfImage(png: Uint8Array, smooth: boolean): number;
+export declare function dfTextureSize(texture: number, axis: number): number;
+export declare function dfPoll(): boolean;
+export declare function dfTouchCount(): number;
+export declare function dfTouch(index: number, field: number): number;
+export declare function dfBegin(r: number, g: number, b: number, depth: boolean): number;
+export declare function dfDraw(
+  pipeline: number,
+  bindGroup: number,
+  vertexBuffer: number,
+  indexBuffer: number,
+  first: number,
+  count: number,
+): void;
+export declare function dfEnd(): void;
+export declare function dfClose(): void;
+export declare function dfAudioOpen(): number;
+export declare function dfSound(mp3: Uint8Array): number;
+export declare function dfPlay(sound: number, volume: number, rate: number): void;
+export declare function dfTone(frequency: number, duration: number, volume: number): void;
+export declare function dfTrack(mp3: Uint8Array): number;
+export declare function dfMusicPlay(track: number, loop: boolean, volume: number): number;
+export declare function dfMusicStop(): void;
+export declare function dfMusicPause(paused: boolean): void;
+export declare function dfMusicVolume(volume: number): void;
+export declare function dfMasterVolume(volume: number): void;
+export declare function dfAudioActive(): number;

package/src/native/library.ts

@@ -0,0 +1,65 @@
+// Runtime for scriptc library mode (iOS): the native host owns the app lifecycle and event loop and calls the
+// library's exported init and frame functions. The df* declarations in ffi.ts become profile callbacks the host
+// registers (tools/gen-library-glue.ts), since library mode has no FFI. Library mode also has no promises, so
+// loading is synchronous.
+import { readFileSync } from "node:fs";
+import type { AudioPlayer } from "../audio";
+import type { RenderGpu, Texture, WindowOptions } from "../gpu";
+import type { Input } from "../input";
+import type { Storage } from "../storage";
+import {
+  createNativeAudioPlayer,
+  createNativeImage,
+  createNativeInput,
+  createNativeRenderGpu,
+  decodeNativeSound,
+  openNativeAudio,
+  storeNativeTrack,
+} from "./backend";
+import { dfHeight, dfOpen, dfWidth } from "./ffi";
+
+export interface LibraryPlatform {
+  gpu: RenderGpu;
+  input: Input;
+  audio: AudioPlayer;
+  storage: Storage;
+  // Surface size in pixels, to pick a logical resolution with the device's aspect ratio.
+  width: number;
+  height: number;
+  image: (png: Uint8Array, smooth: boolean) => Texture;
+  sound: (mp3: Uint8Array) => number;
+  track: (mp3: Uint8Array) => number;
+  readFile: (path: string) => Uint8Array;
+}
+
+// In-memory for now: library hosts pass no writable preferences path yet.
+function memoryStorage(): Storage {
+  const values = new Map<string, string>();
+  return {
+    get: (key: string): string | null => values.get(key) ?? null,
+    set: (key: string, value: string): void => {
+      values.set(key, value);
+    },
+  };
+}
+
+export function openLibraryPlatform(options: WindowOptions): LibraryPlatform {
+  const status = dfOpen(options.width, options.height, options.title);
+  if (status !== 0) throw new Error(`dfOpen failed: ${status}`);
+  const audioReady = openNativeAudio();
+  return {
+    gpu: createNativeRenderGpu(),
+    input: createNativeInput(),
+    audio: createNativeAudioPlayer(),
+    storage: memoryStorage(),
+    width: dfWidth(),
+    height: dfHeight(),
+    image: (png: Uint8Array, smooth: boolean): Texture => createNativeImage(png, smooth),
+    sound: (mp3: Uint8Array): number => (audioReady ? decodeNativeSound(mp3) : -1),
+    track: (mp3: Uint8Array): number => storeNativeTrack(mp3),
+    readFile: (path: string): Uint8Array => {
+      const data = readFileSync(path);
+      return new Uint8Array(data.buffer, data.byteOffset, data.byteLength);
+    },
+  };
+}

package/src/native/run.ts

@@ -0,0 +1,88 @@
+import { existsSync, readFileSync, writeFileSync } from "node:fs";
+import type { Audio } from "../audio";
+import type { Gpu, Setup, Texture, WindowOptions } from "../gpu";
+import type { Storage } from "../storage";
+import {
+  createNativeAudioPlayer,
+  createNativeImage,
+  createNativeInput,
+  createNativeRenderGpu,
+  decodeNativeSound,
+  openNativeAudio,
+  storeNativeTrack,
+} from "./backend";
+import { dfClose, dfOpen, dfPoll, dfPrefPath } from "./ffi";
+
+export async function loadBytes(path: string): Promise<Uint8Array> {
+  const data = readFileSync(path);
+  return new Uint8Array(data.buffer, data.byteOffset, data.byteLength);
+}
+
+// Stores values as one JSON object in <prefs>/dotframe/<app>/storage.json, rewritten on every set.
+function openStorage(app: string): Storage {
+  const pathBytes = new Uint8Array(1024);
+  const length = dfPrefPath("dotframe", app.split(":").join("").split("/").join("-"), pathBytes);
+  const file = length > 0 ? `${new TextDecoder().decode(pathBytes.subarray(0, length))}storage.json` : "";
+  const values = new Map<string, string>();
+  if (file !== "" && existsSync(file)) {
+    const saved = JSON.parse(readFileSync(file, "utf8")) as Record<string, string>;
+    for (const key of Object.keys(saved)) values.set(key, saved[key]);
+  }
+  return {
+    get: (key: string): string | null => values.get(key) ?? null,
+    set: (key: string, value: string): void => {
+      values.set(key, value);
+      if (file === "") return;
+      const out: Record<string, string> = {};
+      for (const [k, v] of values) out[k] = v;
+      writeFileSync(file, JSON.stringify(out));
+    },
+  };
+}
+
+export async function run(options: WindowOptions, setup: Setup): Promise<void> {
+  const status = dfOpen(options.width, options.height, options.title);
+  if (status !== 0) throw new Error(`dfOpen failed: ${status}`);
+
+  const render = createNativeRenderGpu();
+  const gpu: Gpu = {
+    createBuffer: render.createBuffer,
+    writeBuffer: render.writeBuffer,
+    destroyBuffer: render.destroyBuffer,
+    createPipeline: render.createPipeline,
+    bind: render.bind,
+    createTexture: render.createTexture,
+    frame: render.frame,
+    aspect: render.aspect,
+    createImage: async (png: Uint8Array, smooth: boolean): Promise<Texture> => createNativeImage(png, smooth),
+  };
+  const input = createNativeInput();
+  const storage = openStorage(options.title);
+  const audioReady = openNativeAudio();
+  const player = createNativeAudioPlayer();
+  const audio: Audio = {
+    play: player.play,
+    tone: player.tone,
+    playMusic: player.playMusic,
+    stopMusic: player.stopMusic,
+    pauseMusic: player.pauseMusic,
+    setMusicVolume: player.setMusicVolume,
+    setMasterVolume: player.setMasterVolume,
+    loadSound: async (mp3: Uint8Array): Promise<number> => (audioReady ? decodeNativeSound(mp3) : -1),
+    loadMusic: async (mp3: Uint8Array): Promise<number> => storeNativeTrack(mp3),
+  };
+
+  const frame = setup({ gpu, input, audio, storage });
+  // DF_FRAMES bounds the run for headless checks.
+  const maxFrames = Number(process.env.DF_FRAMES ?? "0");
+  const start = performance.now();
+  let index = 0;
+  while (dfPoll()) {
+    if (!frame((performance.now() - start) / 1000)) break;
+    // Let promise callbacks queued by game code (asset loads, timers) run, as the browser does between frames.
+    await Promise.resolve();
+    index++;
+    if (maxFrames > 0 && index >= maxFrames) break;
+  }
+  dfClose();
+}

package/src/physics.ts

@@ -0,0 +1,57 @@
+import type { Vec3 } from "./math";
+
+// Axis-aligned boxes in the XY plane (side view), integrated at a fixed step.
+
+export interface Body {
+  position: Vec3;
+  velocity: Vec3;
+  halfWidth: number;
+  halfHeight: number;
+  onGround: boolean;
+}
+
+export interface Solid {
+  x: number;
+  y: number;
+  halfWidth: number;
+  halfHeight: number;
+}
+
+export const FIXED_STEP = 1 / 60;
+
+function overlaps(body: Body, solid: Solid): boolean {
+  return (
+    Math.abs(body.position.x - solid.x) < body.halfWidth + solid.halfWidth &&
+    Math.abs(body.position.y - solid.y) < body.halfHeight + solid.halfHeight
+  );
+}
+
+// Moves the body one step and resolves collisions against static solids, X then Y.
+export function stepBody(body: Body, solids: Solid[], gravity: number, dt: number): void {
+  body.velocity = { x: body.velocity.x, y: body.velocity.y + gravity * dt, z: 0 };
+
+  body.position = { x: body.position.x + body.velocity.x * dt, y: body.position.y, z: body.position.z };
+  for (const solid of solids) {
+    if (!overlaps(body, solid)) continue;
+    // A shallow vertical overlap (resting on or grazing a solid) belongs to the Y pass.
+    const overlapX = body.halfWidth + solid.halfWidth - Math.abs(body.position.x - solid.x);
+    const overlapY = body.halfHeight + solid.halfHeight - Math.abs(body.position.y - solid.y);
+    if (overlapY < overlapX) continue;
+    const side = body.position.x < solid.x ? -1 : 1;
+    body.position = { x: solid.x + side * (solid.halfWidth + body.halfWidth), y: body.position.y, z: body.position.z };
+    body.velocity = { x: 0, y: body.velocity.y, z: 0 };
+  }
+
+  body.onGround = false;
+  body.position = { x: body.position.x, y: body.position.y + body.velocity.y * dt, z: body.position.z };
+  for (const solid of solids) {
+    if (!overlaps(body, solid)) continue;
+    if (body.velocity.y <= 0 && body.position.y > solid.y) {
+      body.position = { x: body.position.x, y: solid.y + solid.halfHeight + body.halfHeight, z: body.position.z };
+      body.onGround = true;
+    } else {
+      body.position = { x: body.position.x, y: solid.y - solid.halfHeight - body.halfHeight, z: body.position.z };
+    }
+    body.velocity = { x: body.velocity.x, y: 0, z: 0 };
+  }
+}

package/src/platform.ts

@@ -0,0 +1,12 @@
+import type { Audio } from "./audio";
+import type { Gpu } from "./gpu";
+import type { Input } from "./input";
+import type { Storage } from "./storage";
+
+// Everything a game gets from the backend it runs on.
+export interface Platform {
+  gpu: Gpu;
+  input: Input;
+  audio: Audio;
+  storage: Storage;
+}

package/src/raster2d.ts

@@ -0,0 +1,348 @@
+import { parseColor } from "./draw2d";
+
+// CPU canvas for baking art at load time (pixel-art backgrounds, procedural stages, portraits).
+// Implements the Canvas2D subset baking code uses, writes straight RGBA8, and renders identically on every target.
+// Upload the result with gpu.createTexture(raster.width, raster.height, raster.pixels, false).
+
+export interface Gradient {
+  x0: number;
+  y0: number;
+  x1: number;
+  y1: number;
+  stops: GradientStop[];
+}
+
+export interface GradientStop {
+  offset: number;
+  r: number;
+  g: number;
+  b: number;
+  a: number;
+}
+
+export interface Raster {
+  width: number;
+  height: number;
+  // Straight (not premultiplied) RGBA8, row-major.
+  pixels: Uint8Array;
+}
+
+export interface Raster2D {
+  raster: Raster;
+  setFillStyle: (color: string) => void;
+  setFillGradient: (gradient: Gradient) => void;
+  setGlobalAlpha: (alpha: number) => void;
+  fillRect: (x: number, y: number, width: number, height: number) => void;
+  clearRect: (x: number, y: number, width: number, height: number) => void;
+  beginPath: () => void;
+  moveTo: (x: number, y: number) => void;
+  lineTo: (x: number, y: number) => void;
+  arc: (x: number, y: number, radius: number, start: number, end: number, counterclockwise: boolean) => void;
+  arcTo: (x1: number, y1: number, x2: number, y2: number, radius: number) => void;
+  rect: (x: number, y: number, width: number, height: number) => void;
+  closePath: () => void;
+  // Nonzero winding, pixel centers sampled, no antialiasing (pixel art).
+  fill: () => void;
+  // Nearest-neighbor copy of a source rectangle, alpha-blended.
+  drawImage: (
+    source: Raster,
+    sx: number,
+    sy: number,
+    sw: number,
+    sh: number,
+    dx: number,
+    dy: number,
+    dw: number,
+    dh: number,
+  ) => void;
+}
+
+export function createRaster(width: number, height: number): Raster {
+  return { width, height, pixels: new Uint8Array(width * height * 4) };
+}
+
+export function createLinearGradient(x0: number, y0: number, x1: number, y1: number): Gradient {
+  return { x0, y0, x1, y1, stops: [] };
+}
+
+export function addColorStop(gradient: Gradient, offset: number, color: string): void {
+  const c = parseColor(color);
+  gradient.stops.push({ offset, r: c.r, g: c.g, b: c.b, a: c.a });
+  gradient.stops.sort((a: GradientStop, b: GradientStop): number => a.offset - b.offset);
+}
+
+export function createRaster2D(raster: Raster): Raster2D {
+  const { width, height, pixels } = raster;
+  let fillR = 0;
+  let fillG = 0;
+  let fillB = 0;
+  let fillA = 1;
+  let gradient: Gradient | null = null;
+  let alpha = 1;
+  // Path as subpaths of flat points.
+  const subpaths: number[][] = [];
+  let subpathCount = 0;
+  let penX = 0;
+  let penY = 0;
+
+  const startSubpath = (x: number, y: number): number[] => {
+    if (subpathCount === subpaths.length) subpaths.push([]);
+    const points = subpaths[subpathCount];
+    points.length = 0;
+    points.push(x, y);
+    subpathCount++;
+    return points;
+  };
+  const current = (): number[] => (subpathCount === 0 ? startSubpath(penX, penY) : subpaths[subpathCount - 1]);
+  const addPoint = (x: number, y: number): void => {
+    current().push(x, y);
+    penX = x;
+    penY = y;
+  };
+
+  // Writes one pixel with source-over blending of the current fill at (x, y).
+  const blendFill = (index: number, x: number, y: number): void => {
+    let r = fillR;
+    let g = fillG;
+    let b = fillB;
+    let a = fillA;
+    const grad = gradient;
+    if (grad) {
+      const dx = grad.x1 - grad.x0;
+      const dy = grad.y1 - grad.y0;
+      const lengthSquared = dx * dx + dy * dy;
+      let t = lengthSquared > 0 ? ((x + 0.5 - grad.x0) * dx + (y + 0.5 - grad.y0) * dy) / lengthSquared : 0;
+      t = t < 0 ? 0 : t > 1 ? 1 : t;
+      const stops = grad.stops;
+      if (stops.length > 0) {
+        let k = 0;
+        while (k + 1 < stops.length && stops[k + 1].offset < t) k++;
+        const from = stops[k];
+        const to = stops[k + 1 < stops.length ? k + 1 : k];
+        const span = to.offset - from.offset;
+        const local = span > 0 ? (t - from.offset) / span : 0;
+        const u = local < 0 ? 0 : local > 1 ? 1 : local;
+        r = from.r + (to.r - from.r) * u;
+        g = from.g + (to.g - from.g) * u;
+        b = from.b + (to.b - from.b) * u;
+        a = from.a + (to.a - from.a) * u;
+      }
+    }
+    blend(index, r * 255, g * 255, b * 255, a * alpha);
+  };
+
+  const blend = (index: number, r: number, g: number, b: number, a: number): void => {
+    if (a <= 0) return;
+    if (a >= 1) {
+      pixels[index] = r;
+      pixels[index + 1] = g;
+      pixels[index + 2] = b;
+      pixels[index + 3] = 255;
+      return;
+    }
+    const dstA = pixels[index + 3] / 255;
+    const outA = a + dstA * (1 - a);
+    if (outA <= 0) return;
+    pixels[index] = (r * a + pixels[index] * dstA * (1 - a)) / outA;
+    pixels[index + 1] = (g * a + pixels[index + 1] * dstA * (1 - a)) / outA;
+    pixels[index + 2] = (b * a + pixels[index + 2] * dstA * (1 - a)) / outA;
+    pixels[index + 3] = outA * 255;
+  };
+
+  return {
+    raster,
+    setFillStyle: (color: string): void => {
+      const c = parseColor(color);
+      fillR = c.r;
+      fillG = c.g;
+      fillB = c.b;
+      fillA = c.a;
+      gradient = null;
+    },
+    setFillGradient: (value: Gradient): void => {
+      gradient = value;
+    },
+    setGlobalAlpha: (value: number): void => {
+      alpha = value;
+    },
+    fillRect: (x: number, y: number, w: number, h: number): void => {
+      const x0 = Math.max(0, Math.round(Math.min(x, x + w)));
+      const y0 = Math.max(0, Math.round(Math.min(y, y + h)));
+      const x1 = Math.min(width, Math.round(Math.max(x, x + w)));
+      const y1 = Math.min(height, Math.round(Math.max(y, y + h)));
+      for (let py = y0; py < y1; py++) {
+        for (let px = x0; px < x1; px++) blendFill((py * width + px) * 4, px, py);
+      }
+    },
+    clearRect: (x: number, y: number, w: number, h: number): void => {
+      const x0 = Math.max(0, Math.round(x));
+      const y0 = Math.max(0, Math.round(y));
+      const x1 = Math.min(width, Math.round(x + w));
+      const y1 = Math.min(height, Math.round(y + h));
+      // TypedArray.fill has no scriptc lowering yet; clear byte by byte.
+      for (let py = y0; py < y1; py++) {
+        for (let i = (py * width + x0) * 4; i < (py * width + x1) * 4; i++) pixels[i] = 0;
+      }
+    },
+    beginPath: (): void => {
+      subpathCount = 0;
+    },
+    moveTo: (x: number, y: number): void => {
+      startSubpath(x, y);
+      penX = x;
+      penY = y;
+    },
+    lineTo: (x: number, y: number): void => addPoint(x, y),
+    arc: (x: number, y: number, radius: number, start: number, end: number, counterclockwise: boolean): void => {
+      const full = Math.PI * 2;
+      let sweep = end - start;
+      if (!counterclockwise && sweep < 0) sweep = (sweep % full) + full;
+      if (counterclockwise && sweep > 0) sweep = (sweep % full) - full;
+      if (Math.abs(end - start) >= full) sweep = counterclockwise ? -full : full;
+      const steps = Math.max(4, Math.ceil((Math.abs(sweep) / full) * Math.max(12, radius * 2)));
+      for (let i = 0; i <= steps; i++) {
+        const angle = start + (sweep * i) / steps;
+        addPoint(x + Math.cos(angle) * radius, y + Math.sin(angle) * radius);
+      }
+    },
+    // Canvas2D arcTo: a line toward (x1, y1) ending in an arc tangent to both segments.
+    arcTo: (x1: number, y1: number, x2: number, y2: number, radius: number): void => {
+      const x0 = penX;
+      const y0 = penY;
+      const ax = x0 - x1;
+      const ay = y0 - y1;
+      const bx = x2 - x1;
+      const by = y2 - y1;
+      const la = Math.hypot(ax, ay);
+      const lb = Math.hypot(bx, by);
+      const cross = ax * by - ay * bx;
+      if (radius <= 0 || la === 0 || lb === 0 || Math.abs(cross) < 1e-9) {
+        addPoint(x1, y1);
+        return;
+      }
+      const angle = Math.acos(Math.max(-1, Math.min(1, (ax * bx + ay * by) / (la * lb))));
+      const tangent = radius / Math.tan(angle / 2);
+      const t0x = x1 + (ax / la) * tangent;
+      const t0y = y1 + (ay / la) * tangent;
+      const t1x = x1 + (bx / lb) * tangent;
+      const t1y = y1 + (by / lb) * tangent;
+      // Center lies along the bisector, at radius from both tangent points.
+      const bisX = ax / la + bx / lb;
+      const bisY = ay / la + by / lb;
+      const bisLength = Math.hypot(bisX, bisY);
+      const centerDistance = radius / Math.sin(angle / 2);
+      const cx = x1 + (bisX / bisLength) * centerDistance;
+      const cy = y1 + (bisY / bisLength) * centerDistance;
+      addPoint(t0x, t0y);
+      const startAngle = Math.atan2(t0y - cy, t0x - cx);
+      let endAngle = Math.atan2(t1y - cy, t1x - cx);
+      const clockwise = cross < 0;
+      if (clockwise && endAngle < startAngle) endAngle += Math.PI * 2;
+      if (!clockwise && endAngle > startAngle) endAngle -= Math.PI * 2;
+      const steps = Math.max(2, Math.ceil(Math.abs(endAngle - startAngle) * Math.max(2, radius)));
+      for (let i = 1; i <= steps; i++) {
+        const a = startAngle + ((endAngle - startAngle) * i) / steps;
+        addPoint(cx + Math.cos(a) * radius, cy + Math.sin(a) * radius);
+      }
+    },
+    rect: (x: number, y: number, w: number, h: number): void => {
+      const points = startSubpath(x, y);
+      points.push(x + w, y, x + w, y + h, x, y + h);
+      penX = x;
+      penY = y;
+    },
+    closePath: (): void => {
+      if (subpathCount > 0) {
+        const points = subpaths[subpathCount - 1];
+        penX = points[0];
+        penY = points[1];
+      }
+    },
+    fill: (): void => {
+      let minY = height;
+      let maxY = 0;
+      for (let s = 0; s < subpathCount; s++) {
+        const points = subpaths[s];
+        for (let i = 1; i < points.length; i += 2) {
+          minY = Math.min(minY, points[i]);
+          maxY = Math.max(maxY, points[i]);
+        }
+      }
+      const yStart = Math.max(0, Math.floor(minY));
+      const yEnd = Math.min(height - 1, Math.ceil(maxY));
+      const crossings: number[] = [];
+      const windings: number[] = [];
+      for (let py = yStart; py <= yEnd; py++) {
+        const sampleY = py + 0.5;
+        crossings.length = 0;
+        windings.length = 0;
+        for (let s = 0; s < subpathCount; s++) {
+          const points = subpaths[s];
+          const count = points.length / 2;
+          for (let i = 0; i < count; i++) {
+            const j = (i + 1) % count;
+            const ay = points[i * 2 + 1];
+            const by = points[j * 2 + 1];
+            if (ay === by) continue;
+            const up = ay < by;
+            const lowY = up ? ay : by;
+            const highY = up ? by : ay;
+            if (sampleY < lowY || sampleY >= highY) continue;
+            const ax = points[i * 2];
+            const bx = points[j * 2];
+            crossings.push(ax + ((sampleY - ay) / (by - ay)) * (bx - ax));
+            windings.push(up ? 1 : -1);
+          }
+        }
+        // Sort crossings with their windings (insertion sort: few edges per scanline).
+        for (let i = 1; i < crossings.length; i++) {
+          const x = crossings[i];
+          const w = windings[i];
+          let j = i - 1;
+          while (j >= 0 && crossings[j] > x) {
+            crossings[j + 1] = crossings[j];
+            windings[j + 1] = windings[j];
+            j--;
+          }
+          crossings[j + 1] = x;
+          windings[j + 1] = w;
+        }
+        let winding = 0;
+        for (let i = 0; i + 1 < crossings.length; i++) {
+          winding += windings[i];
+          if (winding === 0) continue;
+          const x0 = Math.max(0, Math.ceil(crossings[i] - 0.5));
+          const x1 = Math.min(width - 1, Math.ceil(crossings[i + 1] - 0.5) - 1);
+          for (let px = x0; px <= x1; px++) blendFill((py * width + px) * 4, px, py);
+        }
+      }
+    },
+    drawImage: (
+      source: Raster,
+      sx: number,
+      sy: number,
+      sw: number,
+      sh: number,
+      dx: number,
+      dy: number,
+      dw: number,
+      dh: number,
+    ): void => {
+      const x0 = Math.max(0, Math.round(dx));
+      const y0 = Math.max(0, Math.round(dy));
+      const x1 = Math.min(width, Math.round(dx + dw));
+      const y1 = Math.min(height, Math.round(dy + dh));
+      const src = source.pixels;
+      for (let py = y0; py < y1; py++) {
+        const v = Math.floor(sy + ((py + 0.5 - dy) / dh) * sh);
+        if (v < 0 || v >= source.height) continue;
+        for (let px = x0; px < x1; px++) {
+          const u = Math.floor(sx + ((px + 0.5 - dx) / dw) * sw);
+          if (u < 0 || u >= source.width) continue;
+          const si = (v * source.width + u) * 4;
+          blend((py * width + px) * 4, src[si], src[si + 1], src[si + 2], (src[si + 3] / 255) * alpha);
+        }
+      }
+    },
+  };
+}