{"id":26409090,"url":"https://github.com/mcchatman8009/native-canvas","last_synced_at":"2025-03-17T19:18:47.555Z","repository":{"id":57308215,"uuid":"161009754","full_name":"mcchatman8009/native-canvas","owner":"mcchatman8009","description":"A canvas library that allows for a HTML canvas to run natively on NodeJs, without a WebBrowser","archived":false,"fork":false,"pushed_at":"2024-10-08T14:53:59.000Z","size":11704,"stargazers_count":32,"open_issues_count":5,"forks_count":5,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-02-20T15:05:38.434Z","etag":null,"topics":["2d","2d-graphics","canvas","es6","game","graphics","html-canvas","html5","javascript","native-canvas","native-javascript","node","nodejs","sdl","sdl2","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/mcchatman8009.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":"2018-12-09T06:02:23.000Z","updated_at":"2025-02-17T07:24:44.000Z","dependencies_parsed_at":"2022-09-07T01:53:41.536Z","dependency_job_id":null,"html_url":"https://github.com/mcchatman8009/native-canvas","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mcchatman8009%2Fnative-canvas","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mcchatman8009%2Fnative-canvas/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mcchatman8009%2Fnative-canvas/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mcchatman8009%2Fnative-canvas/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mcchatman8009","download_url":"https://codeload.github.com/mcchatman8009/native-canvas/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244094273,"owners_count":20397020,"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":["2d","2d-graphics","canvas","es6","game","graphics","html-canvas","html5","javascript","native-canvas","native-javascript","node","nodejs","sdl","sdl2","typescript"],"created_at":"2025-03-17T19:18:46.942Z","updated_at":"2025-03-17T19:18:47.544Z","avatar_url":"https://github.com/mcchatman8009.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# native-canvas\n\n## Overview\nThe purpose and intent of this project was to create a library that allows for developers\nto create a browser canvas element that runs natively, without the need of a WebBrowser. \nAllowing for developers to code and develop portable canvas based applications that\ncan run both on the WebBrowser and natively on any NodeJS platform.\n\n## Requirements\n* NodeJS 10+\n\n## Getting Stated\n\n* Install the **native-canvas** library\n\n```bash\nnpm install native-canvas\n```\n\n## A Simple Example\n```javascript\n// Load the library\nrequire('native-canvas');\n\n// Use the globally exposed canvas\nconst ctx = canvas.getContext(\"2d\");\n\nctx.lineWidth = 1;\nctx.fillStyle = \"#FF0000\";\nctx.fillRect(0, 0, 150, 75);\n```\n\nView the [samples](./samples) directory to see more examples.\n\n\n## Running a Browser Example\n```javascript\n// Load the library\nrequire('native-canvas');\n\n// Title the title attribute\ndocument.title = 'Create Canvas with Document';\n\n// Provides the current running canvas\nconst canvas = document.createElement('canvas');\nconst ctx = canvas.getContext(\"2d\");\n\ncanvas.height = 150;\n\nctx.lineWidth = 1;\n\nctx.clearRect(0, 0, 400, 400);\nctx.beginPath();\nctx.arc(40, 40, 40, 0, 2 * Math.PI);\nctx.closePath();\nctx.stroke();\n```\n\n## Mac OS [Apple Silicon]\n\nTo install you need to install system deps first.\n\n```bash\nbrew install python\narch -arm64 brew install pkg-config cairo pango jpeg giflib librsvg libffi\n```\n\n## Raspberry Pi\n\nTo install on Raspberry Pi, you need to prep your environment\nby installing a few dev libraries.\n\n```bash\nsudo apt install \\\n  libpixman-1-dev \\\n  libcairo2-dev \\\n  libpango1.0-dev \\\n  libjpeg-dev \\\n  libgif-dev \\\n  libsdl2-dev\n```\n\n## Screenshots\n\n![Bouncing Ball](./images/bouncing-ball.png)\n![Mario](./images/mario.png)\n\n![Example](./images/clock-example.png)\n\n## Acknowledgments\nSpecial Thanks to [@dmcquillan314](https://github.com/dmcquillan314) for the support!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmcchatman8009%2Fnative-canvas","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmcchatman8009%2Fnative-canvas","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmcchatman8009%2Fnative-canvas/lists"}