SVGCanvas

https://github.com/zenozeng/svgcanvas

Admin

SVGCanvas allows drawing on SVG using the Canvas's 2D Context API, serving as a maintained fork of...

Tokens:501

Snippets:4

Trust Score:7.7

License:MIT

Update:3 months ago

Show doc for...

Tokens:

Raw

### Initialize and Serialize SVGCanvas

Source: https://github.com/zenozeng/svgcanvas/blob/main/README.md

Basic setup for creating a new SVG context and serializing the resulting SVG content.

```javascript
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();
```

--------------------------------

### Wrap Canvas Elements and Configure Options

Source: https://github.com/zenozeng/svgcanvas/blob/main/README.md

Advanced usage for wrapping existing canvas elements or configuring specific dimensions, mirroring, and document overrides.

```javascript
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
```

Tokens:

Raw