{"_id":"@aurouscia/svgcanvas","name":"@aurouscia/svgcanvas","dist-tags":{"latest":"2.6.1"},"versions":{"2.6.1":{"name":"@aurouscia/svgcanvas","version":"2.6.1","description":"svgcanvas fork with viewBox fix and active maintenance","main":"dist/svgcanvas.js","module":"dist/svgcanvas.esm.js","scripts":{"copy-types":"node scripts/copy-types.js","prebuild":"npm run copy-types","watch":"rollup -c -w","build":"rollup -c","prepublishOnly":"npm run build","test":"karma start"},"types":"index.d.ts","repository":{"type":"git","url":"https://gitee.com/au114514/svgcanvas.git"},"publishConfig":{"access":"public"},"keywords":["canvas","svg","canvas2svg"],"author":{"name":"Zeno Zeng"},"license":"MIT","devDependencies":{"@rollup/plugin-commonjs":"^21.0.2","@rollup/plugin-node-resolve":"^13.1.3","@types/svgcanvas":"~2.6.0","chai":"^4.3.6","karma":"^6.3.17","karma-chrome-launcher":"^3.1.0","karma-coverage":"^2.2.0","karma-mocha":"^2.0.1","karma-mocha-reporter":"^2.2.5","karma-sourcemap-loader":"^0.3.8","mocha":"^11.1.0","puppeteer":"^24.6.0","rollup":"^2.67.0"},"gitHead":"3aaf3cf835442b4103306214a7567c67b7e34b96","_id":"@aurouscia/svgcanvas@2.6.1","_nodeVersion":"24.16.0","_npmVersion":"11.13.0","dist":{"integrity":"sha512-+BMRhYgZOUAz78tWc8jWZ+kBBcTEt9byHJY7w9t9LbTuZcY7ghtRkUvJYmglrC4rLdrJ44jVlN3tiYyvy5897g==","shasum":"76d3ab765c69616bd66abf13b306238224886377","tarball":"https://registry.npmjs.org/@aurouscia/svgcanvas/-/svgcanvas-2.6.1.tgz","fileCount":6,"unpackedSize":137308,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQCWj7Z8Bi+XC39Sw9rrjVnt9BUzs+tdrl12dKllrb1vEwIhAOdSOMC3ZO8NauRIeCROFHtVJMMwXKx3q9GgGrXfHF0U"}]},"_npmUser":{"name":"aurouscia","email":"18971501210@189.cn"},"directories":{},"maintainers":[{"name":"aurouscia","email":"18971501210@189.cn"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/svgcanvas_2.6.1_1783267794984_0.9483292809130737"},"_hasShrinkwrap":false}},"time":{"created":"2026-07-05T16:09:54.807Z","2.6.1":"2026-07-05T16:09:55.142Z","modified":"2026-07-05T16:09:55.352Z"},"maintainers":[{"name":"aurouscia","email":"18971501210@189.cn"}],"description":"svgcanvas fork with viewBox fix and active maintenance","keywords":["canvas","svg","canvas2svg"],"repository":{"type":"git","url":"https://gitee.com/au114514/svgcanvas.git"},"author":{"name":"Zeno Zeng"},"license":"MIT","readme":"# @aurouscia/svgcanvas\r\n\r\nA fork of original svgcanvas, with viewBox problem fixed\r\n\r\nDraw on SVG using Canvas's 2D Context API. A maintained fork of\r\n[gliffy's canvas2svg](https://github.com/gliffy/canvas2svg).\r\n\r\n## Demo\r\n\r\nhttps://zenozeng.github.io/svgcanvas/test/\r\n\r\n## How it works\r\n\r\nWe create a mock 2d canvas context. Use the canvas context like you would on a\r\nnormal canvas. As you call methods, we build up a scene graph in SVG.\r\n\r\n## Usage\r\n\r\n```javascript\r\nimport { Context } from \"svgcanvas\";\r\n\r\nconst ctx = new Context(500, 500);\r\n\r\n// draw your canvas like you would normally\r\nctx.fillStyle = \"red\";\r\nctx.fillRect(100, 100, 100, 100);\r\n\r\n// serialize your SVG\r\nconst mySerializedSVG = ctx.getSerializedSvg();\r\n```\r\n\r\nWrapping canvas elements:\r\n\r\n```javascript\r\nimport { Context, Element } from \"svgcanvas\";\r\n\r\nconst canvas = document.createElement(\"canvas\");\r\nconst context2D = canvas.getContext(\"2d\");\r\n\r\n// more options to pass into constructor:\r\nconst options = {\r\n  height: 2000, // falsy values get converted to 500\r\n  width: 0 / 0, // falsy values get converted to 500\r\n  ctx: context2D, // existing Context2D to wrap around\r\n  enableMirroring: false, // whether canvas mirroring (get image data) is enabled (defaults to false)\r\n  document: undefined, // overrides default document object\r\n};\r\n\r\n// Creates a mock canvas context (mocks `context2D` above)\r\nconst ctx = new Context(options);\r\n\r\n// draw your canvas like you would normally\r\nctx.fillStyle = \"red\";\r\nctx.fillRect(100, 100, 100, 100);\r\n\r\nctx.getSerializedSvg(); // returns the serialized SVG\r\nctx.getSvg(); // returns the inline svg element\r\n\r\n// Creates a mock canvas element (mocks `canvas` above)\r\nconst dom = new Element(options);\r\ndom.ctx; // the internal context, via `new Context(options)`\r\ndom.wrapper; // a div with the svg as a child\r\ndom.svg; // the inline svg element\r\n```\r\n\r\n## Tests\r\n\r\nhttps://zenozeng.github.io/p5.js-svg/test/\r\n\r\n## License\r\n\r\nThis library is licensed under the MIT license.\r\n","readmeFilename":"README.md","_rev":"1-4e0d5d990b2ecbdf8bd7c3f6102b521d"}