Update README.md

Adds a bit more information to the README
This commit is contained in:
Validark 2022-03-07 05:57:46 -06:00 committed by GitHub
parent 3427480ed3
commit 4c26d48c79
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -14,18 +14,52 @@ We create a mock 2d canvas context. Use the canvas context like you would on a n
## Usage ## Usage
```javascript ```javascript
import {Context} from 'svgcanvas' import { Context } from 'svgcanvas'
const ctx = new Context(500, 500); const ctx = new Context(500, 500);
//draw your canvas like you would normally // draw your canvas like you would normally
ctx.fillStyle="red"; ctx.fillStyle = "red";
ctx.fillRect(100,100,100,100); ctx.fillRect(100, 100, 100, 100);
// serialize your SVG // serialize your SVG
const mySerializedSVG = ctx.getSerializedSvg(); 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 ## Tests
https://zenozeng.github.io/p5.js-svg/test/ https://zenozeng.github.io/p5.js-svg/test/