{"id":19831742,"url":"https://github.com/robrohan/wasm-canvas","last_synced_at":"2025-09-16T12:38:31.881Z","repository":{"id":43103239,"uuid":"407737509","full_name":"robrohan/wasm-canvas","owner":"robrohan","description":"Demo of how to use clang to compile to wasm and write to an HTML canvas (no emscripten)","archived":false,"fork":false,"pushed_at":"2022-03-18T03:54:59.000Z","size":3331,"stargazers_count":15,"open_issues_count":0,"forks_count":3,"subscribers_count":3,"default_branch":"main","last_synced_at":"2023-04-12T12:26:18.603Z","etag":null,"topics":["c","javascript","wasm","webassembly"],"latest_commit_sha":null,"homepage":"","language":"C","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/robrohan.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-09-18T02:48:53.000Z","updated_at":"2023-02-10T03:24:51.000Z","dependencies_parsed_at":"2022-09-14T17:52:28.321Z","dependency_job_id":null,"html_url":"https://github.com/robrohan/wasm-canvas","commit_stats":null,"previous_names":[],"tags_count":null,"template":null,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/robrohan%2Fwasm-canvas","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/robrohan%2Fwasm-canvas/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/robrohan%2Fwasm-canvas/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/robrohan%2Fwasm-canvas/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/robrohan","download_url":"https://codeload.github.com/robrohan/wasm-canvas/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224266894,"owners_count":17283226,"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":["c","javascript","wasm","webassembly"],"created_at":"2024-11-12T11:34:20.323Z","updated_at":"2025-09-16T12:38:26.825Z","avatar_url":"https://github.com/robrohan.png","language":"C","funding_links":[],"categories":[],"sub_categories":[],"readme":"# WASM to Canvas with Clang - no Emscripten\n\nThis is a little project that shows an example of how to write some C code,\ncompile with clang, load the wasm in javascript and then display an image\ncreated by the C code. It shows:\n\n- How to compile into wasm from C\n- How to export specific functions from C into Javascript\n- How to mess with shared memory in Javascript\n- An example of using `malloc` without the standard library\n- Passing a buffer from Javascript to C\n- Writing to a buffer in C and reading it in Javascript\n- Taking a buffer and making an image\n- Writing that image to a canvas\n- Using requestAnimationFrame in javascript to repeatedly call into C\n\nIf you're looking for the next level of this kind of project,\n[wefx](https://github.com/robrohan/wefx) does the same thing as this\nproject, but adds basic _draw_point_ and _draw_line_ type functions (still\nusing raw buffers no WebGL type calls).\n\nThe code is quite heavily commented, and should, hopefully, be self\nexplanatory. The start point is `src/graphics.c` and `public/test.html` and,\nof course, the `Makefile`.\n\n![Screenshot of running application](public/shot.png)\n\n## Running\n\n_WARNING_ When running the app, the animation flashes a lot of colours\nrapidly. It may be seizure inducing I don't know. If you're prone to that\nkind of thing be cautious.\n\n## Mac and Linux\n\nYou'll need `make` installed (Mac and Linux no problem see `brew` or `apt`\nor whatever). To compile you'll do:\n\n```\nmake build\n```\n\nIf you have python3 installed, you can run `make serve` and it'll build and\nrun a web server for you to play with on http://localhost:8000\n\nThen use your favourite mini http server and serve up the `public` directory\n(see `make start` for an example).\n\n### Windows\n\nOn windows, you'll have to do something else, but you should be able to\nbuild with Visual Studio, install `clang` and port the `Makefile`.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frobrohan%2Fwasm-canvas","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frobrohan%2Fwasm-canvas","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frobrohan%2Fwasm-canvas/lists"}