{"id":13670905,"url":"https://github.com/dmester/canvas-renderer","last_synced_at":"2025-04-15T10:51:15.392Z","repository":{"id":57193785,"uuid":"96536452","full_name":"dmester/canvas-renderer","owner":"dmester","description":"HTML5 inspired canvas implemented in Node.js for rendering PNG images.","archived":false,"fork":false,"pushed_at":"2022-08-07T19:48:45.000Z","size":107,"stargazers_count":21,"open_issues_count":0,"forks_count":3,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-28T19:12:55.488Z","etag":null,"topics":["canvas2d","graphics","node-canvas","nodejs","rasterizer","rendering-2d-graphics"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dmester.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-07-07T12:29:06.000Z","updated_at":"2024-08-22T06:27:39.000Z","dependencies_parsed_at":"2022-09-15T22:31:35.696Z","dependency_job_id":null,"html_url":"https://github.com/dmester/canvas-renderer","commit_stats":null,"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dmester%2Fcanvas-renderer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dmester%2Fcanvas-renderer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dmester%2Fcanvas-renderer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dmester%2Fcanvas-renderer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dmester","download_url":"https://codeload.github.com/dmester/canvas-renderer/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249057543,"owners_count":21205904,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["canvas2d","graphics","node-canvas","nodejs","rasterizer","rendering-2d-graphics"],"created_at":"2024-08-02T09:00:52.666Z","updated_at":"2025-04-15T10:51:15.358Z","avatar_url":"https://github.com/dmester.png","language":"JavaScript","readme":"# canvas-renderer\n\n[![Build Status](https://travis-ci.org/dmester/canvas-renderer.svg?branch=master)](https://travis-ci.org/dmester/canvas-renderer)\n[![Downloads](https://img.shields.io/npm/dt/canvas-renderer.svg)](https://www.npmjs.com/package/canvas-renderer)\n[![License MIT](https://img.shields.io/badge/license-MIT-green.svg)](https://github.com/dmester/canvas-renderer/blob/master/LICENSE)\n\nHTML5 inspired canvas implemented in Node.js for rendering PNG images.\n* Render simple polygons as PNG with no native dependencies \n  like PhantomJS.\n* The library does not run in the browser.\n* This is not an attempt to implement the complete HTML5 \n  CanvasRenderingContext2D interface. See the supported methods\n  below.\n* The performance has not been in focus. If performance is \n  important in your project, consider using a native backed canvas \n  implementation.\n  \n\n## Sample\nInstall the canvas-renderer NPM package.\n\n```\nnpm install canvas-renderer\n```\n\nThe following example renders two triangles to test.png.\n\n```js\nconst fs = require(\"fs\");\nconst canvasRenderer = require(\"canvas-renderer\");\n\nvar canvas = canvasRenderer.createCanvas(100, 100);\n\nvar ctx = canvas.getContext(\"2d\");\n\nctx.fillStyle = \"#ff0000\";\nctx.beginPath();\nctx.moveTo(10, 10);\nctx.lineTo(90, 10);\nctx.lineTo(10, 90);\nctx.fill();\n\nctx.fillStyle = \"#0000ff\";\nctx.beginPath();\nctx.moveTo(90, 90);\nctx.lineTo(90, 50);\nctx.lineTo(50, 90);\nctx.fill();\n\nvar testpng = fs.createWriteStream(\"test.png\");\ntestpng.write(canvas.toPng());\ntestpng.close();\n```\n\n## API\nTo create an instance of `Canvas`, use the `createCanvas(width, height)` method that is exposed\nby the module. Use the `getContext()` method on the canvas to get a `CanvasContext` object.\n\n### Canvas\n\n#### Properties\n\n* `width` (integer)\n\n  The width of the canvas in pixels.\n\n* `height` (integer)\n\n  The height of the canvas in pixels.\n\n* `backColor` (color)\n\n  Specifies the background color. See `fillStyle` below for allowed values. \n  Default is transparent.\n\n#### Methods\n\n* `toPng([keywords])`\n\n  Renders the canvas as a PNG data stream and returns it as a `Buffer`. `keywords`\n  is an optional dictionary defining the keywords to be written to the PNG stream.\n  See https://www.w3.org/TR/PNG/#11keywords.\n\n* `getContext()`\n\n  Gets a CanvasContext object for drawing on this canvas.\n  \n* `toDataURL([type], [encoderOptions])`\n\n  Renders the canvas as a dataURI. Note that the two parameters are currently\n  ignored since the only supported `type` is `image/png`.\n\n\n### CanvasContext\n\n#### Properties\n\n* `fillStyle` (color)\n\n  Specifies the fill color that is used when the `fill()` method is called. Allowed values are:\n\n  * 32 bit integers on the format `0xRRGGBBAA`\n  * string `\"transparent\"`\n  * strings on the format `\"#2c4\"` (#RGB)\n  * strings on the format `\"#2c4f\"` (#RGBA)\n  * strings on the format `\"#22cc44\"` (#RRGGBB)\n  * strings on the format `\"#22cc44ff\"` (#RRGGBBAA)\n  * strings on the format `\"rgb(255, 124, 22)\"`\n  * strings on the format `\"rgb(255, 124, 22, 0.5)\"`\n  * strings on the format `\"rgb(255, 124, 22, 50%)\"`\n  * strings on the format `\"rgba(255, 124, 22, 0.5)\"`\n  * strings on the format `\"rgba(255, 124, 22, 50%)\"`\n  * strings on the format `\"rgb(23%, 45%, 75%)\"`\n  * strings on the format `\"rgb(23%, 45%, 75%, 0.5)\"`\n  * strings on the format `\"rgb(23%, 45%, 75%, 50%)\"`\n  * strings on the format `\"rgba(23%, 45%, 75%, 0.5)\"`\n  * strings on the format `\"rgba(23%, 45%, 75%, 50%)\"`\n  * strings on the format `\"hsl(134, 50%, 50%)\"`\n  * strings on the format `\"hsl(134, 50%, 50%, 0.5)\"`\n  * strings on the format `\"hsl(134, 50%, 50%, 50%)\"`\n  * strings on the format `\"hsla(134, 50%, 50%, 0.5)\"`\n  * strings on the format `\"hsla(134, 50%, 50%, 50%)\"`\n  * strings on the format `\"hwb(134, 50%, 50%)\"`\n  * strings on the format `\"hwb(134, 50%, 50%, 0.5)\"`\n  * strings on the format `\"hwb(134, 50%, 50%, 50%)\"`\n  * named colors listed in [CSS Color Module Level 4](https://www.w3.org/TR/css-color-4/#named-colors)\n  \n#### Paths\n\n* `beginPath()`\n\n  Removes all existing subpaths and begins a new path.\n\n* `moveTo(x, y)`\n\n  Begins a new subpath by moving the cursor to the specified position.\n\n* `lineTo(x, y)`\n\n  Inserts an edge between the last and specified position.\n\n* `arc(x, y, radius, startAngle, endAngle, [anticlockwise])`\n\n  Adds an arc to the current subpath. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/arc)\n  for details.\n\n* `closePath()`\n\n  Starts a new subpath that begins in the same point as the start and end point of the previous one.\n\n#### Rendering\n\n* `clearRect(x, y, width, height)`\n\n  Fills the specified rectangle with fully transparent black without affecting the current paths.\n\n* `fill([windingRule])`\n\n  Fills the defined paths. `windingRule` defines the winding rule to be used for \n  determining which areas are covered by the current path. Valid values are `\"evenodd\"` and\n  `\"nonzero\"`. Default is `\"nonzero\"`.\n\n* `fillRect(x, y, width, height)`\n\n  Fills the specified rectangle without affecting the current paths.\n\n#### Operations\n\n* `save()`\n\n  Saves the current transformation and fill style to a stack. The state can be\n  restored using `restore()`.\n\n* `restore()`\n\n  Restores the last state saved by `save()` and removes the state from the \n  state stack.\n\n#### Transformation\n\n* `resetTransform()`\n\n* `rotate(angle)`\n\n* `scale(x, y)`\n\n* `setTransform(a, b, c, d, e, f)`\n\n* `transform(a, b, c, d, e, f)`\n\n* `translate(x, y)`\n\n## License\ncanvas-renderer is released under the [MIT license](https://github.com/dmester/canvas-renderer/blob/master/LICENSE).\n","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdmester%2Fcanvas-renderer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdmester%2Fcanvas-renderer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdmester%2Fcanvas-renderer/lists"}