import { Context } from 'svgcanvas'

const ctx = new Context(500, 500);

// draw your canvas like you would normally
ctx.fillStyle = "red";
ctx.fillRect(100, 100, 100, 100);

// serialize your SVG
const mySerializedSVG = ctx.getSerializedSvg();

Wrapping canvas elements:

import { Context, Element } from 'svgcanvas';

const canvas = document.createElement("canvas");
const context2D = canvas.getContext("2d");

// more options to pass into constructor:
const options = {
	height: 2000, // falsy values get converted to 500
	width: 0 / 0, // falsy values get converted to 500
	ctx: context2D, // existing Context2D to wrap around
	enableMirroring: false, // whether canvas mirroring (get image data) is enabled (defaults to false)
	document: undefined, // overrides default document object
}

// Creates a mock canvas context (mocks `context2D` above)
const ctx = new Context(options);

// draw your canvas like you would normally
ctx.fillStyle = "red";
ctx.fillRect(100, 100, 100, 100);

ctx.getSerializedSvg(); // returns the serialized SVG
ctx.getSvg(); // returns the inline svg element

// Creates a mock canvas element (mocks `canvas` above)
const dom = new Element(options);
dom.ctx; // the internal context, via `new Context(options)`
dom.wrapper; // a div with the svg as a child
dom.svg; // the inline svg element

Tests

https://zenozeng.github.io/p5.js-svg/test/

CHANGELOG

v2.2.2

Delegate getAttribute/setAttribute (Validark) #8

v2.2.1

fix(SVGCanvasElement): addEventListener

v2.2.0

feat: Context.prototype.getImageData (experimental) for https://github.com/gliffy/canvas2svg/issues/3 and https://github.com/zenozeng/p5.js-svg/issues/203

v2.1.0

feat: SVGCanvasElement(options)
feat: options.debug
refactor

v2.0.7

fix typo
rollup 2.67.0

v2.0.6

utils.toString for https://github.com/zenozeng/p5.js-svg/issues/204

v2.0.5

Fix adding CanvasPattern (Xavier Delamotte) #7

v2.0.4

fix: push/pop transformMatrixStack when save/restore, for https://github.com/zenozeng/p5.js-svg/issues/191

v2.0.3

feat: sync element's width and height to context

v2.0.2

feat: Implement CanvasTransform Interface, https://github.com/gliffy/canvas2svg/pull/83
feat: ClearCanvas in fillRect
feat: Element API
feat: ESM
fix: Recreate root <g> when __clearCanvas to remove all attributes
chore: Bundle JavaScript using Rollup
chore: GitHub Actions

v1.x

v1.0.19 Fix __parseFont to not crash
v1.0.18 clip was not working, the path never made it to the clip area
v1.0.17 Fix bug with drawing in an empty context. Fix image translation problem. Fix globalAlpha issue.
v1.0.16 Add npm publishing support, bower file and optimize for arcs with no angles.
v1.0.15 Setup travis, add testharness and debug playground, and fix regression for __createElement refactor
v1.0.14 bugfix for gradients, move __createElement to scoped createElement function, so all classes have access.
v1.0.13 set paint order before stroke and fill to make them behavior like canvas
v1.0.12 Implementation of ctx.prototype.arcTo.
v1.0.11 call lineTo instead moveTo in ctx.arc, fixes closePath issue and straight line issue
v1.0.10 when lineTo called, use M instead of L unless subpath exists
v1.0.9 use currentDefaultPath instead of 's d attribute, fixes stroke's different behavior in SVG and canvas.
v1.0.8 reusing __createElement and adding a properties undefined check
v1.0.7 fixes for multiple transforms and fills and better text support from stafyniaksacha
v1.0.6 basic support for text baseline (contribution from KoKuToru)
v1.0.5 fixes for #5 and #6 (with contributions from KoKuToru)
v1.0.4 generate ids that start with a letter
v1.0.3 fixed #4 where largeArcFlag was set incorrectly in some cases
v1.0.2 Split up rgba values set in fill/stroke to allow illustrator import support.
v1.0.1 Allow C2S to be called as a function. https://github.com/gliffy/canvas2svg/issues/2
v1.0.0 Initial release

License

This library is licensed under the MIT license.