Update README.md
Adds a bit more information to the README
This commit is contained in:
parent
3427480ed3
commit
4c26d48c79
34
README.md
34
README.md
@ -26,6 +26,40 @@ ctx.fillRect(100,100,100,100);
|
||||
const mySerializedSVG = ctx.getSerializedSvg();
|
||||
```
|
||||
|
||||
Wrapping canvas elements:
|
||||
|
||||
```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
|
||||
```
|
||||
|
||||
## Tests
|
||||
|
||||
https://zenozeng.github.io/p5.js-svg/test/
|
||||
|
Loading…
x
Reference in New Issue
Block a user