# red-agate-svg-canvas
> red-agate svg canvas library.
Latest version **0.5.0** (published 2020-10-24) · ISC license · 0 weekly downloads
## Install
```sh
npm install red-agate-svg-canvas
pnpm add red-agate-svg-canvas
yarn add red-agate-svg-canvas
bun add red-agate-svg-canvas
```
## Health
**Score 30/100 (F)** — status: abandoned.
Positive: has types; esm support; no vulnerabilities; high quality score.
Warnings: low downloads; pre 1.0.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 0.5.0 |
| Published | 2020-10-24 |
| First published | 2017-12-03 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=8.0 |
| Dependencies | 0 |
| Unpacked size | 521.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 20 |
| Author | shellyln |
| Maintainers | shellyln |
| Keywords | SVG, canvas, canvas2d, html5 |
## Links
- npm: https://www.npmjs.com/package/red-agate-svg-canvas
- Repository: https://github.com/shellyln/red-agate
- Homepage: https://shellyln.github.io/
- Issues: https://github.com/shellyln/red-agate/issues
- npm.io page: https://npm.io/package/red-agate-svg-canvas
## Alternatives
- [@tsparticles/shape-image](https://npm.io/package/@tsparticles/shape-image.md) — 303.7K weekly downloads
- [@tsparticles/shape-line](https://npm.io/package/@tsparticles/shape-line.md) — 233.7K weekly downloads
- [stringify-attributes](https://npm.io/package/stringify-attributes.md) — 58.6K weekly downloads
- [mobile-drag-drop](https://npm.io/package/mobile-drag-drop.md) — 46.3K weekly downloads
- [@comunica/actor-rdf-parse-html](https://npm.io/package/@comunica/actor-rdf-parse-html.md) — 29.2K weekly downloads
## Recent versions
- 0.5.0 (latest) — 2020-10-24
- 0.4.0 — 2020-07-28
- 0.3.1 — 2020-02-26
- 0.3.0 — 2020-01-25
- 0.2.20 — 2019-11-30
- 0.2.19 — 2019-05-11
- 0.2.18 — 2019-03-31
- 0.2.17 — 2019-03-30
- 0.2.16 — 2019-01-29
- 0.2.15 — 2019-01-12
- 0.2.14 — 2018-11-04
- 0.2.13 — 2018-11-03
- 0.2.12 — 2018-10-09
- 0.2.11 — 2018-09-21
- 0.2.10 — 2018-09-20
- … 18 more at https://npm.io/package/red-agate-svg-canvas/versions
## README
# RedAgate's SVG Canvas library.
#### HTML5 Canvas API implementation that rendering as SVG, w/o dependencies of browser DOM.
[](https://www.npmjs.com/package/red-agate-svg-canvas)
[](https://github.com/shellyln/red-agate/releases)
[](https://travis-ci.org/shellyln/red-agate)
[](https://github.com/shellyln/red-agate/fork)
[](https://github.com/shellyln/red-agate)
[RedAgate Project Home](https://github.com/shellyln/red-agate)
## Install
```bash
$ npm install red-agate-util --save
$ npm install red-agate-svg-canvas --save
```
> Note
>
> To import this from your code, you need to use `babel` + `webpack` and import `red-agate-*/modules/*` paths.
> (We have used the `import` statements for doing the [tree-shaking](https://webpack.js.org/guides/tree-shaking/).
> The `import` statements in the `.js` not the `.mjs` files cannot import from the vanilla node.js.)
>
> You can also import from the `.mjs` file on a node with the `--experimental-modules` option enabled.
> NOTICE:
> Use with `webpack >= 5`
>
> If you get the error:
>
> ```
> Module not found: Error: Can't resolve '(importing/path/to/filename)'
> in '(path/to/node_modules/path/to/dirname)'
> Did you mean '(filename).js'?`
> ```
>
> Add following setting to your `webpack.config.js`.
>
> ```js
> {
> test: /\.m?js/,
> resolve: {
> fullySpecified: false,
> },
> },
> ```
>
> On `webpack >= 5`, the extension in the request is mandatory for it to be fully specified
> if the origin is a '*.mjs' file or a '*.js' file where the package.json contains '"type": "module"'.
## Usage
```typescript
import { Rect2D } from 'red-agate-svg-canvas/modules/drawing/canvas/TransferMatrix2D';
import { SvgCanvas } from 'red-agate-svg-canvas/modules/drawing/canvas';
const canvasCtx = new SvgCanvas();
// You can call HTML5 Canvas APIs.
// See also: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API
canvasCtx.fillRect(10, 10, 80, 180);
// Render as SVG.
const svgString = canvasCtx.render(new Rect2D(0, 0 , 100, 200), 'mm');
// //Render as data URL encoded SVG.
// const svgDataUrl = canvasCtx.toDataUrl(new Rect2D(0, 0 , 100, 200), 'mm');
console.log(svgString);
```
## Use with the [Chart.js](https://www.chartjs.org/)
See [this](https://github.com/shellyln/chart.js-node-ssr-example) example.
## Patch font rendering output for your target apps/libs' incompatibilities
```typescript
import { SvgCanvas } from 'red-agate-svg-canvas/modules/drawing/canvas';
class MySvgCanvas extends SvgCanvas {
protected getMultilineTextHeight(c: SvgTextAttributes) {
// NOTE: * Inherited classes can adjust the value of
// `lineHeight` (adjust argument and call super).
return super.getMultilineTextHeight(c);
}
protected getTextFontStyles() {
// NOTE: * issue #1: CairoSVG, Inkscape, and some libraries can't
// understand `font` shorthand style property.
// (Inkscape (v0.92.4) may understand partly)
// * Inherited classes can split `font` property to
// `font-family`, `font-weight`, `font-size`, ...
// * `bramstein/css-font-parser` may useful.
return super.getTextFontStyles();
}
protected getTextAttributes(
maxWidthOrExtraAttrs: number | SvgTextAttributes | null | undefined): string {
// NOTE: * Firefox and Inkscape will render text justified
// if `textLength` is set.
// * Chromium and Safari don't justify in this case.
// * This is due to the difference of
// `SVG: ` and `Canvas: fillText(,,,maxWidth)`.
// * Inherited classes can adjust the value of
// `textLength` (adjust argument and call super).
// See: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/textLength
// https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fillText
return super.getTextAttributes(maxWidthOrExtraAttrs);
}
}
```
See also:
* Issue [#1](https://github.com/shellyln/red-agate/issues/1)
## License
[ISC](https://github.com/shellyln/red-agate-util/blob/master/LICENSE.md)
Copyright (c) 2017, Shellyl_N and Authors.
---
_Source: https://npm.io/package/red-agate-svg-canvas · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._