diff options
| author | Mitchell Hashimoto <mitchell.hashimoto@gmail.com> | 2022-12-05 10:54:40 -0800 |
|---|---|---|
| committer | Mitchell Hashimoto <mitchell.hashimoto@gmail.com> | 2022-12-05 10:54:40 -0800 |
| commit | 19e326dab67e719376bb764c687ef1738f6cd1a5 (patch) | |
| tree | ba72bb8a4f537e9d2c28ef18cf5a12af920f2263 /example | |
| parent | d3b46eeeafe6e6bba93c79ce5f6fa5e7bca979c6 (diff) | |
font: working on rendering glyphs in canvas
Diffstat (limited to 'example')
| -rw-r--r-- | example/app.ts | 23 | ||||
| -rw-r--r-- | example/index.html | 4 |
2 files changed, 20 insertions, 7 deletions
diff --git a/example/app.ts b/example/app.ts index 8b3528223..65ba6450f 100644 --- a/example/app.ts +++ b/example/app.ts @@ -26,6 +26,10 @@ fetch(url.href).then(response => free, face_new, face_free, + face_render_glyph, + face_debug_canvas, + atlas_new, + atlas_free, } = results.instance.exports; // Give us access to the zjs value for debugging. globalThis.zjs = zjs; @@ -34,16 +38,23 @@ fetch(url.href).then(response => // Initialize our zig-js memory zjs.memory = memory; + // Create our atlas + const atlas = atlas_new(512, 0 /* greyscale */); + // Create some memory for our string const font = new TextEncoder().encode("monospace"); const font_ptr = malloc(font.byteLength); - try { new Uint8Array(memory.buffer, font_ptr).set(font); - // Call whatever example you want: - const face = face_new(font_ptr, font.byteLength, 14); + // Call whatever example you want: + const face = face_new(font_ptr, font.byteLength, 144); + free(font_ptr); + + // Render a glyph + face_render_glyph(face, atlas, "A".codePointAt(0)); + + // Debug our canvas + face_debug_canvas(face); + //face_free(face); - } finally { - free(font_ptr); - } }); diff --git a/example/index.html b/example/index.html index 0866d6256..12b4fb1dd 100644 --- a/example/index.html +++ b/example/index.html @@ -6,6 +6,8 @@ <script type="module" src="app.ts"></script> </head> <body> - Open your console, we are just debugging here. + <p>Open your console, we are just debugging here.</p> + <p>The font rendering canvas should show below. This shows a single glyph.</p> + <div id="face-canvas" style="display: inline-block; border: 1px solid red;"></div> </body> </html> |