{"id":22105161,"url":"https://github.com/ghackenberg/assemblyscript-canvas-api","last_synced_at":"2026-05-08T18:33:05.021Z","repository":{"id":110013949,"uuid":"525988302","full_name":"ghackenberg/assemblyscript-canvas-api","owner":"ghackenberg","description":"Boilerplate project exposing the Native HTML 5 Canvas API to AssemblyScript and the generated WebAssembly into React.","archived":false,"fork":false,"pushed_at":"2024-04-13T18:43:06.000Z","size":436,"stargazers_count":1,"open_issues_count":2,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-24T02:45:28.219Z","etag":null,"topics":["assemblyscript","boilerplate","canvas","frontend","html5","react","typescript","webassembly"],"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/ghackenberg.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2022-08-17T23:40:11.000Z","updated_at":"2024-04-13T18:28:26.000Z","dependencies_parsed_at":"2024-04-14T08:52:55.776Z","dependency_job_id":"936d2dc7-cedb-4bca-a30e-df381f20e149","html_url":"https://github.com/ghackenberg/assemblyscript-canvas-api","commit_stats":null,"previous_names":["ghackenberg/assemblyscript-canvas-api"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/ghackenberg/assemblyscript-canvas-api","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ghackenberg%2Fassemblyscript-canvas-api","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ghackenberg%2Fassemblyscript-canvas-api/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ghackenberg%2Fassemblyscript-canvas-api/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ghackenberg%2Fassemblyscript-canvas-api/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ghackenberg","download_url":"https://codeload.github.com/ghackenberg/assemblyscript-canvas-api/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ghackenberg%2Fassemblyscript-canvas-api/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32792124,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-08T08:22:46.396Z","status":"ssl_error","status_checked_at":"2026-05-08T08:22:45.650Z","response_time":54,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["assemblyscript","boilerplate","canvas","frontend","html5","react","typescript","webassembly"],"created_at":"2024-12-01T06:39:01.069Z","updated_at":"2026-05-08T18:33:05.001Z","avatar_url":"https://github.com/ghackenberg.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# AssemblyScript Canvas API\n\n![](./images/social_preview.png)\n\nThis **boilerplate project** provides a **React frontend** written in **TypeScript**, which integrates a **WebAssembly** written in **AssemblyScript**. The **WebAssembly** uses the **Native HTML 5 Canvas API** for drawing **hardware-accelerated 2D graphics**.\n\n## Packages\n\nThe project contains the following packages.\n\n* [webassembly-boilerplate-glue](./packages/glue/) - **[AssemblyScript + TypeScript]** - Exposing the Native HTML 5 Canvas API to AssemblyScript\n* [webassembly-boilerplate-wasm](./packages/wasm/) - **[AssemblyScript only]** - Using the Native HTML 5 Canvas API for drawing hardware-accelerated 2D graphics\n* [webassembly-boilerplate-react](./packages/react/) - **[TypeScript only]** - Integrating the WebAssemlby package into a classical React frontend\n\n## Examples\n\nThe following examples demonstrate the use of the [Glue Package](./packages/glue/) for accessing the **Native HTML 5 Canvas API** in **AssemblyScript**. Note that we expose a purely **functional variant** of the API. In this variant the 2D rendering context is a function parameter rather than the enclosing object. We designed this approach so that API calls from within WebAssembly cause **minimal overhead**.\n\n### AssemblyScript Example\n\n```typescript\n// Import HTML 5 Canvas API bindings from Glue Package\nimport { clearRect } from 'webassembly-boilerplate-glue/assembly/'\nimport { fillStyle } from 'webassembly-boilerplate-glue/assembly/'\nimport { fillRect } from 'webassembly-boilerplate-glue/assembly/'\n\n// Export draw function to TypeScript/JavaScript\nexport function draw(ctx: externref): void {\n    clearRect(ctx, 0, 0, 100, 100)\n    fillStyle(ctx, 'blue')\n    fillRect(ctx, 0, 0, 100, 100)\n}\n```\n\n### TypeScript Example\n\n```typescript\n// Import draw function from AssemblyScript build\nimport { draw } from 'webassembly-boilerplate-wasm'\n\n// Create HTML 5 Canvas object\nconst canvas = document.createElement('canvas')\n// Get 2D rendering context\nconst context = canvas.getContext('2d')\n// Pass 2D rendering context to WebAssembly\ndraw(context)\n```\n\n## Dependencies\n\nWe distinguish between build-time and run-time dependencies.\n\n### Build-time\n\n* [assemblyscript^0.20.19](https://www.assemblyscript.org/) - AssemblyScript compiler\n* [typescript^4.7.4](https://www.typescriptlang.org/) - TypeScript compiler\n* [webpack^5.74.0](https://webpack.js.org/) - Web application bundler\n\n### Run-time\n\n* [react^18.2.0](https://reactjs.org/) - React framework\n* [react-dom^18.2.0](https://reactjs.org/docs/react-dom.html) - React DOM binding\n\n## Scripts\n\nWe distinguish between install, build, and serve scripts.\n\n### Install\n\nInstall 3rd party dependencies:\n\n```\nnpm install\n```\n\n### Build\n\nBuild debug version:\n\n```\nnpm run build:debug\n```\n\nBuild release version:\n\n```\nnpm run build:release\n```\n\n### Serve\n\nServe debug version:\n\n```\nnpm run serve\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fghackenberg%2Fassemblyscript-canvas-api","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fghackenberg%2Fassemblyscript-canvas-api","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fghackenberg%2Fassemblyscript-canvas-api/lists"}