{"id":17202827,"url":"https://github.com/indus/ncc","last_synced_at":"2025-04-07T08:26:48.864Z","repository":{"id":16892815,"uuid":"19653539","full_name":"indus/ncc","owner":"indus","description":"node-chrome-canvas || a simple to use and performant HTML5 canvas for Node.js","archived":false,"fork":false,"pushed_at":"2017-05-17T11:19:00.000Z","size":207,"stargazers_count":172,"open_issues_count":3,"forks_count":6,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-03-31T06:07:30.118Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/indus.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"license.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-05-10T22:33:10.000Z","updated_at":"2024-08-27T15:43:18.000Z","dependencies_parsed_at":"2022-07-26T11:18:41.220Z","dependency_job_id":null,"html_url":"https://github.com/indus/ncc","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/indus%2Fncc","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/indus%2Fncc/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/indus%2Fncc/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/indus%2Fncc/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/indus","download_url":"https://codeload.github.com/indus/ncc/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247617565,"owners_count":20967630,"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":[],"created_at":"2024-10-15T02:16:05.885Z","updated_at":"2025-04-07T08:26:48.846Z","avatar_url":"https://github.com/indus.png","language":"TypeScript","readme":"\u003c!-- ![logo](https://raw.githubusercontent.com/indus/ncc/master/footage/logo.png) --\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/indus/ncc/master/footage/logo.png\" alt=\"logo\"/\u003e\n\u003c/p\u003e\n\n### About\n**ncc** (or node-chrome-canvas) utilizes Googles [Chrome-Browser](https://www.google.com/chrome/browser/) and its [remote debugging protocol](https://developers.google.com/chrome-developer-tools/docs/debugger-protocol) to give [Node.js](http://nodejs.org/) access to a full-blown HTML5 Canvas-Element and its 2d-Context.  \nIn contrast to [canvas](https://www.npmjs.org/package/canvas) (that may satisfy your needs as well) which uses [Cairo](http://cairographics.org/) to sham a canvas, **ncc** works with a real [HTMLCanvasElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement) in a Browser-Context.\n\nBehind the curtains of the familiar Canvas-API, **ncc** uses a single WebSocket-Connection and some command-bundeling-logic to gain its performance.\n\n### Quickstart\n```\nnpm install ncc\n```\n```javascript\nvar ncc = require('ncc')\n\nvar canvas = ncc();\n\ncanvas.width = canvas.height = 256;\n\nvar ctx = canvas.getContext('2d');\n\nctx.fillStyle = \"slateGray\";\nctx.fillRect(28, 28, 200, 200)();  // function call is intentional!\n```\n\n### Examples\n\n- **[draw ncc logo](https://github.com/indus/ncc/blob/master/examples/1_draw_ncc_logo.js)**\n\u003e\u003e **learn** how to setup ncc and draw shapes to canvas\n- **[early access](https://github.com/indus/ncc/blob/master/examples/2_early_access.js)**\n\u003e\u003e **learn** how to start using ncc even before it is fully set up\n- **[get return values](https://github.com/indus/ncc/blob/master/examples/3_get_return_values.js)**\n\u003e\u003e **learn** how to get return values of non-void functions\n- **[gardients/patterns](https://github.com/indus/ncc/blob/master/examples/4_gradients_and_patterns.js)**\n\u003e\u003e **learn** how to use gradients and patterns\n- **[images](https://github.com/indus/ncc/blob/master/examples/5_images.js)**\n\u003e\u003e **learn** how to apply images from urls or the filesystem\n- **[shadow canvas](https://github.com/indus/ncc/blob/master/examples/6_shadow_canvas.js)**\n\u003e\u003e **learn** how work with more than one canvas\n\n### API\n\n**ncc** follows the native [Web API Interfaces](https://developer.mozilla.org/en-US/docs/Web/API)...\n[HTMLCanvasElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement),\n[HTMLImageElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement),\n[CanvasRenderingContext2D](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D),\n[CanvasGradient](https://developer.mozilla.org/en-US/docs/Web/API/CanvasGradient),\n[CanvasPattern](https://developer.mozilla.org/en-US/docs/Web/API/CanvasPattern)\n... as close as possible.\n\nDifferences are a result of the asynchronous nature of **ncc**. All object creations, method calls and property manipulations don't get processed directly, but get serialized and stored until a return value is necessary and a request is therefore unavoidable.  \nEvery 'Object' provided by **ncc** (and also every return value of a method) is actually a function to trigger a synchronization. You can pass a error-first-callback ( 'function(error, result){...}' ) to such a function to receive the return value of the last action (see [examples](https://github.com/indus/ncc#examples)).\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/indus/ncc/master/footage/flow.png\" alt=\"flowchart\"/\u003e\n\u003c/p\u003e\nThe **Canvas-** RenderingContext2D, -Gradient and -Pattern Proxys are fully implemented.  \nThe **HTML-** CanvasElement and -ImageElement Proxys only necessary properties and functions. For example they both implement a 'width' and 'height' attribute but don´t have further DOM functionality.  \n\nMethods and properties beyond the native API are marked with a leading underscore and they are hidden from console by default (e.g. 'image._toFile(fileName, \u0026lt;callback\u0026gt;)' to write an image to the filesystem).\n\n#### proxy - creators\n\n* **ncc(** \u0026lt;options\u0026gt; **,** \u0026lt;callback\u0026gt; **)** \u003e\u003e\u003e **[canvas]**  \n**ncc(** \u0026lt;callback\u0026gt; **)** \u003e\u003e\u003e **[canvas]** \n\noptions (with defaults)\n```javascript\n{ logLevel: 'info', //['log','info','warn','error']\n  port: 9222,\n  retry: 9,\n  retryDelay: 500,\n  headless: false\n}\n```\n\n* **ncc.createCanvas()** \u003e\u003e\u003e **[canvas]**    *if one is not enough*\n\n* **ncc.createImage(** \u0026lt;src\u0026gt; **,** \u0026lt;onloadFn\u0026gt; **,** \u0026lt;onerrorFn\u0026gt; **)** \u003e\u003e\u003e **[image]**\n\n* **nccCanvas.getContext(** *[nativeAPI](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement#Methods)* **)** \u003e\u003e\u003e **[context2d]**\n\n* **context2d.createLinearGradient(** *[nativeAPI](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D#createLinearGradient())* **)** \u003e\u003e\u003e **[linearGradient]**  \n**context2d.createRadialGradient(** *[nativeAPI](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D#createRadialGradient())* **)** \u003e\u003e\u003e **[radialGradient]**  \n**context2d.createPattern(** *[nativeAPI](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D#createPattern())* **)** \u003e\u003e\u003e **[pattern]**\n\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Findus%2Fncc","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Findus%2Fncc","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Findus%2Fncc/lists"}