{"_id":"@blinn-motion/canvas","_rev":"4-f6ea4c52158674154023437eb976adff","name":"@blinn-motion/canvas","dist-tags":{"latest":"0.1.3"},"versions":{"0.1.0":{"name":"@blinn-motion/canvas","version":"0.1.0","license":"MIT","_id":"@blinn-motion/canvas@0.1.0","maintainers":[{"name":"gron371","email":"ismailyagci371@gmail.com"}],"homepage":"https://blinnmotion.com","bugs":{"url":"https://github.com/ismailyagci/blinn-motion/issues"},"dist":{"shasum":"36c320fdf1dfe5a9d8db05cecf25ef3e1a8bb8a0","tarball":"https://registry.npmjs.org/@blinn-motion/canvas/-/canvas-0.1.0.tgz","fileCount":7,"integrity":"sha512-/OUWlQAv/nNyFTP1g9IP7AhntV3ySu5mYDWScZ4VR18NjcD2EM5PsT40asabsSUzJ4fNSKp2dg99Ir5YuYLJrw==","signatures":[{"sig":"MEYCIQC9eZMj1NB8ozZ9CxF/mBi8s9SEjY/WeI9hTMHxVFZFcwIhAPW/Q3YA35/NdFFReBdgUSUrKocHeWtLXiO0M1GN7jSm","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blinn-motion%2fcanvas@0.1.0","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":195205},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"}},"gitHead":"2532aab4276d43f115627973bcd29cfcd0f95600","scripts":{"dev":"tsup --watch","build":"tsup","typecheck":"tsc --noEmit"},"_npmUser":{"name":"gron371","email":"ismailyagci371@gmail.com"},"repository":{"url":"git+https://github.com/ismailyagci/blinn-motion.git","type":"git"},"_npmVersion":"10.9.8","description":"Blinn Motion Canvas adapter — paints @blinn-motion/core's resolved render tree onto a 2D canvas. Pure JS, no DOM layout.","directories":{},"sideEffects":false,"_nodeVersion":"22.23.1","dependencies":{"@blinn-motion/core":"^0.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/canvas_0.1.0_1784220062904_0.17486897553219016","host":"s3://npm-registry-packages-npm-production"}},"0.1.1":{"name":"@blinn-motion/canvas","version":"0.1.1","license":"MIT","_id":"@blinn-motion/canvas@0.1.1","maintainers":[{"name":"gron371","email":"ismailyagci371@gmail.com"}],"homepage":"https://blinnmotion.com","bugs":{"url":"https://github.com/ismailyagci/blinn-motion/issues"},"dist":{"shasum":"123d7bd17ca0f61f00e95f71b31e1968d0f984de","tarball":"https://registry.npmjs.org/@blinn-motion/canvas/-/canvas-0.1.1.tgz","fileCount":7,"integrity":"sha512-dDMaFEBd4sGgftsLfFdyvkGxOKdEzR9Emtr/EGkw9IXfqn4LBYEqy8g3tF0kGbkL97m9ZNPUjQr63e8i4RyTrw==","signatures":[{"sig":"MEUCIAJFB487ZUbuUzWbyVQmrpvvg+PqsqzCYH6vub0psRFBAiEAyoM/yUxjqNmVBI6p0OHWnV1tGusw6q+AzVt7QYMse5c=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blinn-motion%2fcanvas@0.1.1","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":210767},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"}},"gitHead":"befca5fac3e3f011f219a040b6cf69eff138bdf4","scripts":{"dev":"tsup --watch","build":"tsup","typecheck":"tsc --noEmit"},"_npmUser":{"name":"gron371","email":"ismailyagci371@gmail.com"},"repository":{"url":"git+https://github.com/ismailyagci/blinn-motion.git","type":"git"},"_npmVersion":"10.9.8","description":"Blinn Motion Canvas adapter — paints @blinn-motion/core's resolved render tree onto a 2D canvas. Pure JS, no DOM layout.","directories":{},"sideEffects":false,"_nodeVersion":"22.23.1","dependencies":{"@blinn-motion/core":"^0.1.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/canvas_0.1.1_1784223384031_0.6864751814579055","host":"s3://npm-registry-packages-npm-production"}},"0.1.2":{"name":"@blinn-motion/canvas","version":"0.1.2","license":"MIT","_id":"@blinn-motion/canvas@0.1.2","maintainers":[{"name":"gron371","email":"ismailyagci371@gmail.com"}],"homepage":"https://blinnmotion.com","bugs":{"url":"https://github.com/ismailyagci/blinn-motion/issues"},"dist":{"shasum":"a2ba3bd30dc73e94f70d4f619a0d0864d304f64a","tarball":"https://registry.npmjs.org/@blinn-motion/canvas/-/canvas-0.1.2.tgz","fileCount":7,"integrity":"sha512-OKHzJqY+BXwYOgCpocOibE7rFZRRVjJGUv9D0oT5lwes0Q6AI5ecjz6lz10ercrLzcH7zlHpIGcBke0P0BE7Gg==","signatures":[{"sig":"MEUCIQCO6FRbI2P08NuPWMCMSv8ZF9CjQ+fPRu5yjyuSmc33YgIgRn/6N4/gg1OlMOzffG0yDULFwk4ZaWEFe52uVJuQG+U=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blinn-motion%2fcanvas@0.1.2","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":206127},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"}},"gitHead":"58f09492a6476c188e3c5b91676df6c6464a13d8","scripts":{"dev":"tsup --watch","build":"tsup","typecheck":"tsc --noEmit"},"_npmUser":{"name":"gron371","email":"ismailyagci371@gmail.com"},"repository":{"url":"git+https://github.com/ismailyagci/blinn-motion.git","type":"git"},"_npmVersion":"10.9.8","description":"Blinn Motion Canvas adapter — paints @blinn-motion/core's resolved render tree onto a 2D canvas. Pure JS, no DOM layout.","directories":{},"sideEffects":false,"_nodeVersion":"22.23.1","dependencies":{"@blinn-motion/core":"^0.1.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/canvas_0.1.2_1784225016201_0.04140207013493713","host":"s3://npm-registry-packages-npm-production"}},"0.1.3":{"name":"@blinn-motion/canvas","version":"0.1.3","description":"Blinn Motion Canvas adapter — paints @blinn-motion/core's resolved render tree onto a 2D canvas. Pure JS, no DOM layout.","license":"MIT","type":"module","sideEffects":false,"main":"./dist/index.cjs","module":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"}},"scripts":{"build":"tsup","dev":"tsup --watch","typecheck":"tsc --noEmit"},"dependencies":{"@blinn-motion/core":"^0.1.3"},"publishConfig":{"access":"public"},"repository":{"type":"git","url":"git+https://github.com/ismailyagci/blinn-motion.git","directory":"packages/canvas"},"homepage":"https://docs.blinnmotion.com/adapters/canvas","bugs":{"url":"https://github.com/ismailyagci/blinn-motion/issues"},"keywords":["blinn-motion","figma","figma-motion","motiondoc","animation","motion","timeline","canvas","2d","adapter"],"_id":"@blinn-motion/canvas@0.1.3","gitHead":"199359afa1ba483192cdd327730a411279238893","_nodeVersion":"22.23.1","_npmVersion":"10.9.8","dist":{"integrity":"sha512-Vca+q/iupjojUs2FWprZW2d92CDqEP4AnlwcWNS1hswiRWFCmkPpXMRC+U2OAimbEYqijWePlGfLWZeGwMKyWQ==","shasum":"82e442ecb72ee745697394d32e0d0f42139d4299","tarball":"https://registry.npmjs.org/@blinn-motion/canvas/-/canvas-0.1.3.tgz","fileCount":8,"unpackedSize":209348,"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blinn-motion%2fcanvas@0.1.3","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQClh/E9UMjYDJGCk/tcRSUdEA5uwuSVva4LQDjbX209DAIhAKQvskS4kPU1+dr/iAIQYyAnPuUpN6v3kw+3owBcQjd+"}]},"_npmUser":{"name":"gron371","email":"ismailyagci371@gmail.com"},"directories":{},"maintainers":[{"name":"gron371","email":"ismailyagci371@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/canvas_0.1.3_1784231257853_0.30626367686818057"},"_hasShrinkwrap":false}},"time":{"created":"2026-07-16T16:41:02.786Z","modified":"2026-07-16T19:47:38.347Z","0.1.0":"2026-07-16T16:41:03.042Z","0.1.1":"2026-07-16T17:36:24.184Z","0.1.2":"2026-07-16T18:03:36.343Z","0.1.3":"2026-07-16T19:47:38.005Z"},"bugs":{"url":"https://github.com/ismailyagci/blinn-motion/issues"},"license":"MIT","homepage":"https://docs.blinnmotion.com/adapters/canvas","repository":{"type":"git","url":"git+https://github.com/ismailyagci/blinn-motion.git","directory":"packages/canvas"},"description":"Blinn Motion Canvas adapter — paints @blinn-motion/core's resolved render tree onto a 2D canvas. Pure JS, no DOM layout.","maintainers":[{"name":"gron371","email":"ismailyagci371@gmail.com"}],"readme":"# @blinn-motion/canvas\n\n[![npm](https://img.shields.io/npm/v/@blinn-motion/canvas.svg)](https://www.npmjs.com/package/@blinn-motion/canvas)\n[![license](https://img.shields.io/npm/l/@blinn-motion/canvas.svg)](https://github.com/ismailyagci/blinn-motion/blob/main/LICENSE)\n\n**Pure-JS 2D Canvas adapter for [Blinn Motion](https://blinnmotion.com).**\n\nEach frame samples a MotionDoc with [`@blinn-motion/core`](https://www.npmjs.com/package/@blinn-motion/core) and repaints an HTML canvas. Same render method as the DOM adapter — same timing, different paint path. Ideal for single-layer stages, export pipelines, or when you want one bitmap surface.\n\n## Install\n\n```bash\nnpm install @blinn-motion/canvas\n# pulls in @blinn-motion/core\n```\n\n## Quick start\n\n```ts\nimport { create } from \"@blinn-motion/canvas\";\nimport doc from \"./card.motion.json\";\n\n// Pass a <canvas> or a container (a canvas is created for you)\nconst player = create(document.getElementById(\"stage\")!, doc, {\n  loop: true,\n  autoplay: true,\n  onframe: (time, fraction) => {},\n});\n\nplayer.pause();\nplayer.seekFraction(0.5);\nplayer.setProgress(0.3);\nplayer.play();\n```\n\n```html\n<div id=\"stage\" style=\"width:375px;height:600px\"></div>\n<!-- or: <canvas id=\"stage\" width=\"375\" height=\"600\"></canvas> -->\n```\n\n## What it paints\n\n- Transforms, opacity, nested layers  \n- Solid / linear / radial / angular (diamond ≈ radial) / image fills  \n- Rounded rects, ellipses, polygons, stars, arcs  \n- Text, vector paths with trim  \n- Uniform + per-side strokes, blend modes  \n- Drop / inner shadows  \n- Noise / texture + glass-style overlays  \n- Clipping and nested opacity  \n\nFor maximum CSS/SVG fidelity (masks, complex filters, live DOM text selection), prefer [`@blinn-motion/dom`](https://www.npmjs.com/package/@blinn-motion/dom). Side-by-side: [vanilla lab](https://vanilla.blinnmotion.com).\n\n## API\n\n### `create(target, doc, options?) → CanvasPlayer`\n\n`target` is `HTMLCanvasElement | HTMLElement`.\n\n| Option | Default | Description |\n|--------|---------|-------------|\n| `loop` | `true` | Loop timeline |\n| `rate` | `1` | Speed multiplier |\n| `autoplay` | `false` | Start immediately (wrappers often pass `true`) |\n| `onframe` | — | `(time, fraction) => void` |\n| `dpr` | `devicePixelRatio` | Canvas backing store scale |\n\n### `CanvasPlayer`\n\nSame transport surface as the DOM player:\n\n`play` · `pause` · `stop` · `toggle` · `seek` · `seekFraction` · `setProgress` · `setRate`\n\n### Low-level exports\n\n```ts\nimport { drawTree } from \"@blinn-motion/canvas\";\nimport { sample } from \"@blinn-motion/core\";\n\nconst tree = sample(doc, t);\ndrawTree(ctx, tree); // custom loops / offscreen export\n```\n\nAlso: `flattenPath`, `slicePolyline`, `trimmedPath2D` for path tooling.\n\n## Docs\n\n- [Canvas adapter](https://docs.blinnmotion.com/adapters/canvas)\n- [Render engine](https://docs.blinnmotion.com/concepts/render-engine)\n- [Live dual-stage lab](https://vanilla.blinnmotion.com)\n\n## License\n\nMIT © Blinn Motion\n","readmeFilename":"README.md","keywords":["blinn-motion","figma","figma-motion","motiondoc","animation","motion","timeline","canvas","2d","adapter"]}