font: fix glyph offset calculations for render

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);

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 });

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