Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/dmester/canvas-renderer
HTML5 inspired canvas implemented in Node.js for rendering PNG images.
https://github.com/dmester/canvas-renderer
canvas2d graphics node-canvas nodejs rasterizer rendering-2d-graphics
Last synced: 3 months ago
JSON representation
HTML5 inspired canvas implemented in Node.js for rendering PNG images.
- Host: GitHub
- URL: https://github.com/dmester/canvas-renderer
- Owner: dmester
- License: mit
- Created: 2017-07-07T12:29:06.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2022-08-07T19:48:45.000Z (about 2 years ago)
- Last Synced: 2024-07-06T18:04:44.507Z (4 months ago)
- Topics: canvas2d, graphics, node-canvas, nodejs, rasterizer, rendering-2d-graphics
- Language: JavaScript
- Homepage:
- Size: 104 KB
- Stars: 20
- Watchers: 1
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-github-star - canvas-renderer
README
# canvas-renderer
[](https://travis-ci.org/dmester/canvas-renderer)
[](https://www.npmjs.com/package/canvas-renderer)
[](https://github.com/dmester/canvas-renderer/blob/master/LICENSE)
HTML5 inspired canvas implemented in Node.js for rendering PNG images.
* Render simple polygons as PNG with no native dependencies
like PhantomJS.
* The library does not run in the browser.
* This is not an attempt to implement the complete HTML5
CanvasRenderingContext2D interface. See the supported methods
below.
* The performance has not been in focus. If performance is
important in your project, consider using a native backed canvas
implementation.
## Sample
Install the canvas-renderer NPM package.
```
npm install canvas-renderer
```
The following example renders two triangles to test.png.
```js
const fs = require("fs");
const canvasRenderer = require("canvas-renderer");
var canvas = canvasRenderer.createCanvas(100, 100);
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#ff0000";
ctx.beginPath();
ctx.moveTo(10, 10);
ctx.lineTo(90, 10);
ctx.lineTo(10, 90);
ctx.fill();
ctx.fillStyle = "#0000ff";
ctx.beginPath();
ctx.moveTo(90, 90);
ctx.lineTo(90, 50);
ctx.lineTo(50, 90);
ctx.fill();
var testpng = fs.createWriteStream("test.png");
testpng.write(canvas.toPng());
testpng.close();
```
## API
To create an instance of `Canvas`, use the `createCanvas(width, height)` method that is exposed
by the module. Use the `getContext()` method on the canvas to get a `CanvasContext` object.
### Canvas
#### Properties
* `width` (integer)
The width of the canvas in pixels.
* `height` (integer)
The height of the canvas in pixels.
* `backColor` (color)
Specifies the background color. See `fillStyle` below for allowed values.
Default is transparent.
#### Methods
* `toPng([keywords])`
Renders the canvas as a PNG data stream and returns it as a `Buffer`. `keywords`
is an optional dictionary defining the keywords to be written to the PNG stream.
See https://www.w3.org/TR/PNG/#11keywords.
* `getContext()`
Gets a CanvasContext object for drawing on this canvas.
* `toDataURL([type], [encoderOptions])`
Renders the canvas as a dataURI. Note that the two parameters are currently
ignored since the only supported `type` is `image/png`.
### CanvasContext
#### Properties
* `fillStyle` (color)
Specifies the fill color that is used when the `fill()` method is called. Allowed values are:
* 32 bit integers on the format `0xRRGGBBAA`
* string `"transparent"`
* strings on the format `"#2c4"` (#RGB)
* strings on the format `"#2c4f"` (#RGBA)
* strings on the format `"#22cc44"` (#RRGGBB)
* strings on the format `"#22cc44ff"` (#RRGGBBAA)
* strings on the format `"rgb(255, 124, 22)"`
* strings on the format `"rgb(255, 124, 22, 0.5)"`
* strings on the format `"rgb(255, 124, 22, 50%)"`
* strings on the format `"rgba(255, 124, 22, 0.5)"`
* strings on the format `"rgba(255, 124, 22, 50%)"`
* strings on the format `"rgb(23%, 45%, 75%)"`
* strings on the format `"rgb(23%, 45%, 75%, 0.5)"`
* strings on the format `"rgb(23%, 45%, 75%, 50%)"`
* strings on the format `"rgba(23%, 45%, 75%, 0.5)"`
* strings on the format `"rgba(23%, 45%, 75%, 50%)"`
* strings on the format `"hsl(134, 50%, 50%)"`
* strings on the format `"hsl(134, 50%, 50%, 0.5)"`
* strings on the format `"hsl(134, 50%, 50%, 50%)"`
* strings on the format `"hsla(134, 50%, 50%, 0.5)"`
* strings on the format `"hsla(134, 50%, 50%, 50%)"`
* strings on the format `"hwb(134, 50%, 50%)"`
* strings on the format `"hwb(134, 50%, 50%, 0.5)"`
* strings on the format `"hwb(134, 50%, 50%, 50%)"`
* named colors listed in [CSS Color Module Level 4](https://www.w3.org/TR/css-color-4/#named-colors)
#### Paths
* `beginPath()`
Removes all existing subpaths and begins a new path.
* `moveTo(x, y)`
Begins a new subpath by moving the cursor to the specified position.
* `lineTo(x, y)`
Inserts an edge between the last and specified position.
* `arc(x, y, radius, startAngle, endAngle, [anticlockwise])`
Adds an arc to the current subpath. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/arc)
for details.
* `closePath()`
Starts a new subpath that begins in the same point as the start and end point of the previous one.
#### Rendering
* `clearRect(x, y, width, height)`
Fills the specified rectangle with fully transparent black without affecting the current paths.
* `fill([windingRule])`
Fills the defined paths. `windingRule` defines the winding rule to be used for
determining which areas are covered by the current path. Valid values are `"evenodd"` and
`"nonzero"`. Default is `"nonzero"`.
* `fillRect(x, y, width, height)`
Fills the specified rectangle without affecting the current paths.
#### Operations
* `save()`
Saves the current transformation and fill style to a stack. The state can be
restored using `restore()`.
* `restore()`
Restores the last state saved by `save()` and removes the state from the
state stack.
#### Transformation
* `resetTransform()`
* `rotate(angle)`
* `scale(x, y)`
* `setTransform(a, b, c, d, e, f)`
* `transform(a, b, c, d, e, f)`
* `translate(x, y)`
## License
canvas-renderer is released under the [MIT license](https://github.com/dmester/canvas-renderer/blob/master/LICENSE).