Last active
March 23, 2026 13:29
-
-
Save t-nissie/0ff20f2de652b16acc72ef4b01893998 to your computer and use it in GitHub Desktop.
animation with wasm-canvas
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Animation.c | |
| // wasm-canvas: https://github.com/alextyner/wasm-canvas | |
| // How to compile and run locally (as written in Makefile): | |
| // ln -s SOMEWHERE/wasm-canvas/src/canvas.c . | |
| // ln -s SOMEWHERE/wasm-canvas/src/canvas.h . | |
| // emcc -c -o animation.o animation.c | |
| // emcc -c -o canvas.o canvas.c | |
| // emcc --shell-file template.html animation.o canvas.o -o index.html | |
| // emrun index.html | |
| //// | |
| #include "canvas.h" | |
| #include <emscripten.h> | |
| static HTMLCanvasElement *canvas; | |
| static CanvasRenderingContext2D *ctx; | |
| void animate() { | |
| static double x = 0; | |
| // Clear the canvas | |
| ctx->clearRect(ctx, 0, 0, canvas->getWidth(canvas), canvas->getHeight(canvas)); | |
| // Update position | |
| x += 2; | |
| if (x > canvas->getWidth(canvas)) x = 0; | |
| // Draw something at new position | |
| ctx->setFillStyle(ctx, "green"); | |
| ctx->fillRect(ctx, x, 50, 50, 50); | |
| } | |
| int main(void) | |
| { | |
| canvas = createCanvas("myCanvas"); | |
| canvas->setWidth(canvas, 800); | |
| canvas->setHeight(canvas, 600); | |
| ctx = canvas->getContext(canvas, "2d"); | |
| // Start animation | |
| emscripten_set_main_loop(animate, 0, 1); | |
| return 0; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| #-*-Makefile-*- for animation.c | |
| ## | |
| CC=emcc | |
| index.html: template.html Animation.o canvas.o | |
| emcc --shell-file $^ -o $@ | |
| emrun $@ | |
| clean: | |
| rm -f canvas.o Animation.o index.html index.js index.wasm |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Canvas fillRect Example</title> | |
| <style> | |
| /* Optional: Add a border so you can see the canvas area */ | |
| canvas { | |
| border: 1px solid black; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| {{{ SCRIPT }}} | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment