{"_id":"@drxiaozhi/canvaskit-wasm-demo","name":"@drxiaozhi/canvaskit-wasm-demo","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@drxiaozhi/canvaskit-wasm-demo","version":"0.1.0","description":"CanvasKit WASM Canvas 2D demos and API checks for Bun.","license":"MIT","author":{"name":"Dr. John","url":"醫者小智"},"type":"module","publishConfig":{"access":"public"},"bin":{"canvaskit-wasm-demo":"tri.ts"},"scripts":{"tri":"bun tri.ts","test:canvas":"bun canvas_api_tests.ts"},"gitHead":"984b84e8c1995e07d29525bccb4774712b593e6c","_id":"@drxiaozhi/canvaskit-wasm-demo@0.1.0","_nodeVersion":"26.2.0","_npmVersion":"11.16.0","dist":{"integrity":"sha512-k7VKqBQ6WyxSvRIWN3HL199qwlsZmYH8JfqZf+otKH6eGj5SzyK23+UmXURsnQAD0xD+uJWMu8/oj3oWT3Tbmw==","shasum":"efb28ef07db763ab2ed287c92db44b44410a881c","tarball":"https://registry.npmjs.org/@drxiaozhi/canvaskit-wasm-demo/-/canvaskit-wasm-demo-0.1.0.tgz","fileCount":52,"unpackedSize":10369739,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIAkGVi9GlZznl3WD3bWQPvxQCtuUZI0iyXIuAREgil3vAiBViqeBhbZJGvv28t3wJzZzfDTAjC+PIxVMp9JZExc+BQ=="}]},"_npmUser":{"name":"drxiaozhi","email":"jjtseng93@gmail.com"},"directories":{},"maintainers":[{"name":"drxiaozhi","email":"jjtseng93@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/canvaskit-wasm-demo_0.1.0_1783788704811_0.6517551046136412"},"_hasShrinkwrap":false}},"time":{"created":"2026-07-11T16:51:44.663Z","0.1.0":"2026-07-11T16:51:45.117Z","modified":"2026-07-11T16:51:45.332Z"},"maintainers":[{"name":"drxiaozhi","email":"jjtseng93@gmail.com"}],"description":"CanvasKit WASM Canvas 2D demos and API checks for Bun.","author":{"name":"Dr. John","url":"醫者小智"},"license":"MIT","readme":"# CanvasKit wasm demo notes\n\nThis repo uses CanvasKit WASM to emulate a Canvas 2D environment from Bun/Node.\nMost drawing calls in `canvas_api_tests.ts` are standard `CanvasRenderingContext2D`\nAPIs, but the setup, image decoding, font loading, output, and cleanup are\nCanvasKit or runtime-specific.\n\n## Running examples\n\n### Run the full canvas API test:\n\n```sh\nbun canvas_api_tests.ts\n```\n\n- The test writes visual outputs to:\n\n```text\nimg_outputs/\n```\n\n### Run the minimal triangle example:\n\n```sh\nbun tri.ts\n```\n\n- `tri.ts` only draws one red triangle on an 8x8 canvas, then prints an ANSI preview and the raw RGBA hex dump.\n\n## Not browser-standard canvas APIs\n\nThese APIs are used by the tests but are not browser-standard Canvas APIs:\n\n- `CanvasKitInit(...)`\n  - CanvasKit WASM initialization.\n  - Browser canvas does not need this; it uses the browser's built-in canvas\n    implementation.\n\n- `CanvasKit.MakeCanvas(width, height)`\n  - Creates a CanvasKit emulated canvas.\n  - Browser equivalent is usually `document.createElement(\"canvas\")` or an\n    existing `<canvas>` element.\n\n- `canvas.decodeImage(bytes)`\n  - CanvasKit helper for decoding image bytes into a CanvasKit image object.\n  - Browser-standard image sources are things like `HTMLImageElement`,\n    `ImageBitmap`, `HTMLCanvasElement`, `OffscreenCanvas`, `VideoFrame`, etc.\n  - In this Bun/Node setup, `ctx.drawImage(...)` works with the image returned\n    by `canvas.decodeImage(...)`.\n\n- `canvas.loadFont(fontBytes, descriptors)`\n  - CanvasKit helper for registering font bytes with the emulated canvas.\n  - Browser-standard font loading uses CSS `@font-face`, the `FontFace` API,\n    and `document.fonts`.\n  - In this environment, fonts are not automatically discovered like a browser\n    would normally do. Load fonts explicitly before using `fillText` or\n    `measureText`.\n  - The test uses the local font file at `assets/Roboto-Regular.ttf`.\n\n- `canvas.toDataURL()` in this test environment\n  - `toDataURL()` is browser-standard on `HTMLCanvasElement`, but here it is\n    CanvasKit's emulated implementation.\n  - The tests use it to write PNG files for visual inspection.\n\n- `canvas.dispose()`\n  - CanvasKit/WASM resource cleanup.\n  - Browser canvas elements do not have this API.\n\n## Runtime-specific code\n\nThese are not canvas APIs; they are only used to run the tests from Bun/Node:\n\n- `readFileSync(...)`\n- `writeFileSync(...)`\n- `mkdirSync(...)`\n- `Buffer.from(...)`\n- `import cvwasm from \"./assets/canvaskit.wasm\" with { type: \"file\" }`\n\n## Standard Canvas 2D APIs covered by the test\n\nThe test currently exercises these standard `ctx.*` Canvas 2D APIs:\n\n- Rectangles: `fillRect`, `clearRect`, `strokeRect`\n- Paths: `beginPath`, `moveTo`, `lineTo`, `closePath`, `rect`\n- Curves: `arc`, `quadraticCurveTo`, `bezierCurveTo`\n- Painting: `fill`, `stroke`, `fillStyle`, `strokeStyle`, `lineWidth`\n- Gradients: `createLinearGradient`, `createRadialGradient`, `addColorStop`\n- Compositing: `globalAlpha`, `globalCompositeOperation`\n- Clipping: `clip`\n- Transforms/state: `translate`, `rotate`, `save`, `restore`\n- Pixels: `createImageData`, `putImageData`, `getImageData`\n- Images: `drawImage`\n- Lines: `setLineDash`\n- Text: `font`, `fillText`, `measureText`\n\n## Compatibility notes\n\nEven when a method name is standard, CanvasKit behavior may differ from a\nbrowser in some areas:\n\n- `drawImage` accepts CanvasKit-supported image objects in this environment.\n  For PNG files, use `canvas.decodeImage(readFileSync(...))`.\n- Text requires explicit `canvas.loadFont(...)`.\n- `measureText` is limited compared with browsers; CanvasKit's README notes it\n  returns width only and does no full shaping.\n- Font fallback and complex text shaping should not be assumed to match Chrome,\n  Firefox, or Safari.\n- Pixel output can differ slightly because of antialiasing, gradient\n  interpolation, and font rasterization.\n\n## Third-party notices\n\nThis demo project's own source code is licensed under the MIT License. See:\n\n```text\nLICENSE\n```\n\nThird-party license texts are stored in:\n\n```text\nLICENSES/\n```\n\nThe project-level third-party notice is:\n\n```text\nNOTICE\n```\n\n`icon.png` is a GPT-generated local test asset used by the `drawImage` case.\n","readmeFilename":"README.md","_rev":"1-7503148bd5d66cea73ff403be1cc6ceb"}