From 25f2f1a652ab01a6f404d867e955172a3112654b Mon Sep 17 00:00:00 2001
From: Mitchell Hashimoto <mitchell.hashimoto@gmail.com>
Date: Mon, 5 Dec 2022 15:25:09 -0800
Subject: [PATCH] font: fix glyph offset calculations for render

---
 example/app.ts               |  2 +-
 src/font/Atlas.zig           |  2 ++
 src/font/face/web_canvas.zig | 11 ++++-------
 3 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/example/app.ts b/example/app.ts
index 9113faa5d..966bb4224 100644
--- a/example/app.ts
+++ b/example/app.ts
@@ -55,7 +55,7 @@ fetch(url.href).then(response =>
   for (let i = 33; i <= 126; i++) {
     face_render_glyph(face, atlas, i);
   }
-  // face_render_glyph(face, atlas, "A".codePointAt(0));
+  //face_render_glyph(face, atlas, "p".codePointAt(0));
 
   // Debug our canvas
   face_debug_canvas(face);
diff --git a/src/font/Atlas.zig b/src/font/Atlas.zig
index bcfc6f9c5..db73f1e90 100644
--- a/src/font/Atlas.zig
+++ b/src/font/Atlas.zig
@@ -426,6 +426,7 @@ pub const Wasm = struct {
             const Uint8ClampedArray = try js.global.get(js.Object, "Uint8ClampedArray");
             defer Uint8ClampedArray.deinit();
             const arr = try Uint8ClampedArray.new(.{ mem_buf, buf.ptr, buf.len });
+            defer arr.deinit();
 
             // Create the image data from our array
             const ImageData = try js.global.get(js.Object, "ImageData");
@@ -435,6 +436,7 @@ pub const Wasm = struct {
 
             break :data data;
         };
+        defer image_data.deinit();
 
         // Draw it
         try ctx.call(void, "putImageData", .{ image_data, 0, 0 });
diff --git a/src/font/face/web_canvas.zig b/src/font/face/web_canvas.zig
index 25dca9a19..8fd84edc2 100644
--- a/src/font/face/web_canvas.zig
+++ b/src/font/face/web_canvas.zig
@@ -126,6 +126,7 @@ pub const Face = struct {
         // Height is our ascender + descender for this char
         const asc = try metrics.get(f32, "actualBoundingBoxAscent");
         const desc = try metrics.get(f32, "actualBoundingBoxDescent");
+        const left = try metrics.get(f32, "actualBoundingBoxLeft");
         const height = @floatToInt(u32, @ceil(asc + desc));
 
         // Resize canvas to match the glyph size exactly
@@ -148,11 +149,6 @@ pub const Face = struct {
         const ctx = try self.context();
         defer ctx.deinit();
 
-        // We use top alignment because our renderer handles all the
-        // baseline and so on so we just want a top-left rendered glyph
-        // by itself.
-        try ctx.set("textBaseline", js.string("top"));
-
         // Draw background
         try ctx.set("fillStyle", js.string("transparent"));
         try ctx.call(void, "fillRect", .{
@@ -163,11 +159,12 @@ pub const Face = struct {
         });
 
         // Draw glyph
+        // TODO: may need a +1 on the left/asc here to avoid clipping
         try ctx.set("fillStyle", js.string("black"));
         try ctx.call(void, "fillText", .{
             glyph_str,
-            0,
-            0,
+            left,
+            asc,
         });
 
         // Read the image data and get it into a []u8 on our side