open-index/open-npm huggingface dataset:
npm package: @redwilly/canvaskitengine
Description: This library is a browser vector engine rebuilt in TypeScript with CanvasKit as the rendering backend.
Latest version: 0.0.13

# canvaskitengine

This library is a browser vector engine rebuilt in TypeScript with CanvasKit as the rendering backend.

Install:

```bash
bun install
bun run build
```

That build emits both:

- `dist/canvaskitengine.js`
- `dist/canvaskit.wasm`

## Import the wasm asset directly

If you want explicit control over the wasm URL, the package also exports it as a subpath:

```ts
import wasmUrl from "canvaskitengine/canvaskit.wasm";
import { CanvasEngineInit } from "canvaskitengine";

await CanvasEngineInit({
  wasmUrl,
});
```

## Direct CanvasKit usage

If you want to see the backend explicitly, bootstrap CanvasKit yourself and hand the runtime to the engine:

```ts
import { CanvasEngineInit, createCanvasKitRuntime } from "canvaskitengine";

const runtime = await createCanvasKitRuntime();

await CanvasEngineInit({ runtime });

const engine = document.createElement("canvas-engine");
document.body.appendChild(engine);
```

If you prefer, you can also pass `locateFile` directly instead of importing the wasm subpath.

You can also provide a preloaded CanvasKit instance directly:

```ts
import CanvasKitInit from "canvaskit-wasm";
import { CanvasEngineInit, CanvasKitRuntime } from "canvaskitengine";

const canvasKit = await CanvasKitInit({
  locateFile: (file) => `/dist/${file}`,
});

await CanvasEngineInit({
  runtime: new CanvasKitRuntime(canvasKit),
});
```

## Automatic CanvasKit loading

`CanvasEngineInit()` can also load CanvasKit with an explicit wasm path when needed:

```ts
import { CanvasEngineInit } from "canvaskitengine";

await CanvasEngineInit({
  locateFile: (file) => `/dist/${file}`,
});
```

## Architecture note

CanvasKit is intentionally isolated behind the runtime layer:

- `src/runtime/canvaskit.ts`: official `canvaskit-wasm` bootstrap helpers
- `src/runtime/index.ts`: CanvasKit surface/paint/path/shader bridge, native font/typeface use, pattern shaders, fill rules, and native picture recording
- `src/engine/index.ts`: host component and engine bootstrapping

That keeps the document model and editing logic renderer-agnostic while still using CanvasKit for actual drawing.