Last active
March 22, 2026 07:06
-
-
Save t-nissie/8fb6c7b521227634cbcfed8f72f6c7d7 to your computer and use it in GitHub Desktop.
Draw an arc 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
| // ArcWASM.c draws a rectangle and an arc with wasm-canvas as same as original.html | |
| // 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 ArcWASM.o ArcWASM.c | |
| // emcc -c -o canvas.o canvas.c | |
| // emcc --shell-file template.html ArcWASM.o canvas.o -o index.html | |
| // emrun index.html | |
| //// | |
| #include "canvas.h" | |
| int main(void) | |
| { | |
| HTMLCanvasElement *canvas = createCanvas("myCanvas"); | |
| canvas->setWidth(canvas, 300); | |
| canvas->setHeight(canvas, 200); | |
| CanvasRenderingContext2D *ctx = canvas->getContext(canvas, "2d"); | |
| // --- green rectangle --- | |
| ctx->setFillStyle(ctx, "green"); | |
| ctx->fillRect(ctx, 20, 10, 150, 100); | |
| // --- red arc --- | |
| ctx->setFillStyle(ctx, "red"); | |
| ctx->beginPath(ctx); | |
| ctx->arc(ctx, 150, 100, 50, 0, 2 * 3.1415926535); | |
| ctx->fill(ctx); | |
| freeCanvas(canvas); | |
| 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 ArcWASM.c | |
| ## | |
| CC=emcc | |
| index.html: template.html ArcWASM.o canvas.o | |
| emcc --shell-file $^ -o $@ | |
| emrun $@ | |
| clean: | |
| rm -f canvas.o ArcWASM.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> | |
| <!-- 1. Define the canvas element --> | |
| <canvas id="myCanvas" width="300" height="200"> | |
| Your browser does not support the canvas element. | |
| </canvas> | |
| <!-- 2. Add the script to draw on the canvas --> | |
| <script> | |
| // Get the canvas element from the DOM | |
| const canvas = document.getElementById('myCanvas'); | |
| // Get the 2D rendering context | |
| const ctx = canvas.getContext('2d'); | |
| // Set the fill color to green | |
| ctx.fillStyle = 'green'; | |
| // Draw the filled rectangle | |
| // fillRect(x, y, width, height) | |
| ctx.fillRect(20, 10, 150, 100); | |
| // Sraw an arc | |
| ctx.fillStyle = 'red'; | |
| ctx.beginPath(); | |
| ctx.arc(150,100,50, 2*3.151592, false); | |
| ctx.fill(); | |
| </script> | |
| </body> | |
| </html> |
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