{"_id":"@aurumjs/canvas","_rev":"2-1001e9e432feebcaffdb77e294347efe","name":"@aurumjs/canvas","dist-tags":{"latest":"0.10.1"},"versions":{"0.10.0":{"name":"@aurumjs/canvas","version":"0.10.0","keywords":["aurum","scenegraph","canvas","rendering"],"author":{"url":"CyberPhoenix","name":"Joao Santos"},"license":"MIT","_id":"@aurumjs/canvas@0.10.0","maintainers":[{"name":"cyberphoenix90","email":"Joao260690@gmail.com"}],"homepage":"https://github.com/CyberPhoenix90/aurum#readme","bugs":{"url":"https://github.com/CyberPhoenix90/aurum/issues"},"dist":{"shasum":"1f534c7d6ddbdaa13c5037f143943e15f04aab69","tarball":"https://registry.npmjs.org/@aurumjs/canvas/-/canvas-0.10.0.tgz","fileCount":95,"integrity":"sha512-mMd+KAhxRT3nhHsLI2i9G6eol3v+37gIZ0i5DIto61sXERea9k4RfUD2bfFmL9Ck5OuPMlZ9sFvxpDvFRfqsaw==","signatures":[{"sig":"MEUCIQC1lvI3kuOsdw/2QYrvnzVNcaFWWWzEM3TUG+4NaiC/fwIgA5bDM+AVnWe7eQQoxjrGdFAfIXZ7SIZ2+TYEryRFNBI=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":198511},"main":"./prebuilt/esnext/aurum-canvas.js","type":"module","types":"./prebuilt/esnext/aurum-canvas.d.ts","exports":{".":{"types":"./prebuilt/esnext/aurum-canvas.d.ts","import":"./prebuilt/esnext/aurum-canvas.js"},"./core":{"types":"./prebuilt/esnext/core.d.ts","import":"./prebuilt/esnext/core.js"}},"gitHead":"115fc28ffe30a71d85da8da4d0a6ef5aaf64319e","scripts":{"test":"tsc -p tsconfig.test.json && vitest run","build":"tsc -p tsconfig.build.json","prepack":"npm run build","benchmark":"tsc -p tsconfig.bench.json && node dist_bench/bench/run.js"},"_npmUser":{"name":"cyberphoenix90","email":"Joao260690@gmail.com"},"repository":{"url":"git+https://github.com/CyberPhoenix90/aurum.git","type":"git","directory":"packages/aurum-canvas"},"_npmVersion":"11.17.0","description":"Aurum style scene graph management for rendering in canvas","directories":{},"_nodeVersion":"26.5.0","dependencies":{"@aurumjs/html":"^0.10.0","@aurumjs/rendering":"^0.10.0"},"_hasShrinkwrap":false,"devDependencies":{"vitest":"^4.0.16","@vitest/browser":"^4.0.16","@vitest/browser-playwright":"^4.0.16"},"_npmOperationalInternal":{"tmp":"tmp/canvas_0.10.0_1787913307234_0.5341883748262273","host":"s3://npm-registry-packages-npm-production"}},"0.10.1":{"_id":"@aurumjs/canvas@0.10.1","bugs":{"url":"https://github.com/CyberPhoenix90/aurum/issues"},"dist":{"shasum":"d7bfae674e02aa998708e5f88f71ab447a4a0490","tarball":"https://registry.npmjs.org/@aurumjs/canvas/-/canvas-0.10.1.tgz","fileCount":99,"integrity":"sha512-1bj4rr37LSCSyTGvmCWHPV0KVhjqD246u7vmw0I83VOmqQ8FNSl1AbN1b0i9/ix4p/WSzb2+mZ0lZCCNreofMA==","signatures":[{"sig":"MEYCIQC8bai7FE/oLu2iLf8aqkdGOLZuxv0iizVVEhp/FRU5cgIhAPhVhoDzqOeRYjuWfFXOL7vVwCyRFSdDMXbK0mL3+as+","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"},{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIGtH2RUHLeYS42UHw2Sj1fgDyHEud8BmcqrW1UE9CYgBAiEA64tpwUKYugkeQLooOcS57gWciBPoRJvxex44nCFxZSE="}],"unpackedSize":202425},"main":"./prebuilt/esnext/aurum-canvas.js","name":"@aurumjs/canvas","type":"module","types":"./prebuilt/esnext/aurum-canvas.d.ts","author":{"url":"CyberPhoenix","name":"Joao Santos"},"exports":{".":{"types":"./prebuilt/esnext/aurum-canvas.d.ts","import":"./prebuilt/esnext/aurum-canvas.js"},"./core":{"types":"./prebuilt/esnext/core.d.ts","import":"./prebuilt/esnext/core.js"}},"gitHead":"b6228b8cf6553907f3904cff36e89c399d80fc7c","license":"MIT","scripts":{"test":"tsc -p tsconfig.test.json && vitest run","build":"tsc -p tsconfig.build.json","prepack":"npm run build","benchmark":"tsc -p tsconfig.bench.json && node dist_bench/bench/run.js"},"version":"0.10.1","_npmUser":{"name":"cyberphoenix90","email":"Joao260690@gmail.com"},"homepage":"https://github.com/CyberPhoenix90/aurum#readme","keywords":["aurum","scenegraph","canvas","rendering"],"repository":{"url":"git+https://github.com/CyberPhoenix90/aurum.git","type":"git","directory":"packages/aurum-canvas"},"_npmVersion":"11.17.0","description":"Aurum style scene graph management for rendering in canvas","directories":{},"maintainers":[{"name":"cyberphoenix90","email":"Joao260690@gmail.com"}],"_nodeVersion":"26.5.0","dependencies":{"@aurumjs/html":"^0.10.0","@aurumjs/rendering":"^0.10.0"},"_hasShrinkwrap":false,"devDependencies":{"vitest":"^4.1.11","@vitest/browser":"^4.0.16","@vitest/browser-playwright":"^4.0.16"},"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/canvas_0.10.1_1790061922523_0.30827751665368375"}}},"time":{"created":"2026-08-28T10:35:07.067Z","modified":"2026-09-22T07:25:22.823Z","0.10.0":"2026-08-28T10:35:07.373Z","0.10.1":"2026-09-22T07:25:22.598Z"},"bugs":{"url":"https://github.com/CyberPhoenix90/aurum/issues"},"author":{"url":"CyberPhoenix","name":"Joao Santos"},"license":"MIT","homepage":"https://github.com/CyberPhoenix90/aurum#readme","keywords":["aurum","scenegraph","canvas","rendering"],"repository":{"url":"git+https://github.com/CyberPhoenix90/aurum.git","type":"git","directory":"packages/aurum-canvas"},"description":"Aurum style scene graph management for rendering in canvas","maintainers":[{"name":"cyberphoenix90","email":"Joao260690@gmail.com"}],"readme":"Aurum-style scene graph management for Canvas 2D.\n\nImport the HTML-hosted component from `@aurumjs/canvas`. Renderer integrations that do not need an HTML intrinsic element can import the scene model, draw functions, drawable components, and `AurumOffscreenCanvas` from `@aurumjs/canvas/core`. The core entry point depends on `@aurumjs/rendering`; the HTML host is isolated in the main entry point.\n\nAllows creating canvas drawings using familar concepts from Aurum.js\nSupports data sources for all attributes and dynamic scene graphs with array data sources\n\n```\n<AurumCanvas width=\"200\" height=\"200\">\n\t<AurumRectangle x={a} y={20} fillColor=\"red\" width={20} height={20}>\n\t\t<AurumRectangle x={20} y={a} fillColor=\"blue\" width={20} height={20}></AurumRectangle>\n\t</AurumRectangle>\n\t<AurumRectangle x={50} y={50} fillColor=\"green\" width={20} height={20}></AurumRectangle>\n\t<AurumText x={10} y={10} fillColor=\"black\">\n\t\t{name}\n\t</AurumText>\n</AurumCanvas>\n\n```\n\n## Verification and performance\n\n`npm test -w @aurumjs/canvas` runs the browser-backed Canvas 2D behavior suite. `npm run benchmark -w @aurumjs/canvas` runs a repeatable CPU baseline for resolving and drawing 1,000 and 10,000 rectangle scene nodes. Benchmark numbers are machine-dependent; compare results on the same machine and runtime when evaluating renderer changes.\n\nCreate canvas components just the way you create any aurum component:\n\n```\nfunction Triangle(props: { x: number; y: number }) {\n\tconst { x, y } = props;\n\n\treturn (\n\t\t<AurumGroup x={x} y={y}>\n\t\t\t<AurumLine lineWidth={3} strokeColor=\"red\" x={0} y={0} tx={30} ty={30}></AurumLine>\n\t\t\t<AurumLine lineWidth={3} strokeColor=\"red\" x={30} y={30} tx={-30} ty={30}></AurumLine>\n\t\t\t<AurumLine lineWidth={3} strokeColor=\"red\" x={-30} y={30} tx={0} ty={0}></AurumLine>\n\t\t</AurumGroup>\n\t);\n}\n\n```\n\nReuse components that weren't even intended for use in the canvas:\n\n```\n<AurumCanvas width=\"200\" height=\"200\">\n\t<Switch state={triangular}>\n\t\t<SwitchCase when={true}>\n\t\t\t<Triangle x={50} y={50}></Triangle>\n\t\t</SwitchCase>\n\t\t<SwitchCase when={false}>\n\t\t\t<AurumRectangle x={50} y={50} fillColor=\"green\" width={20} height={20}></AurumRectangle>\n\t\t</SwitchCase>\n\t</Switch>\n</AurumCanvas>\n```\n\nDeclarative animation and interaction support\n\n```\n<AurumCanvas width=\"400\" height=\"200\">\n\t<AurumRectangle\n\t\tonMouseDown={(e, target) => {\n\t\t\tstate.update('highlight');\n\t\t}}\n\t\tstate={state}\n\t\tstrokeColor=\"red\"\n\t\tx={0}\n\t\ty={0}\n\t\twidth={30}\n\t\theight={30}\n\t>\n\t\t<State opacity={1} id=\"highlight\" width={300} transitionTime={2000}></State>\n\t</AurumRectangle>\n</AurumCanvas>\n\n```\n","readmeFilename":"README.md"}