From ed4e8c36b064e653499b2987cedbd8c47796f807 Mon Sep 17 00:00:00 2001 From: Mitchell Hashimoto Date: Mon, 5 Dec 2022 15:37:55 -0800 Subject: [PATCH] font: add 1 to the canvas glyph to avoid clipping --- example/app.ts | 4 ++-- src/font/face/web_canvas.zig | 12 ++++++++---- 2 files changed, 10 insertions(+), 6 deletions(-) diff --git a/example/app.ts b/example/app.ts index 966bb4224..696d1d17a 100644 --- a/example/app.ts +++ b/example/app.ts @@ -47,8 +47,8 @@ fetch(url.href).then(response => const font_ptr = malloc(font.byteLength); new Uint8Array(memory.buffer, font_ptr).set(font); - // Call whatever example you want: - const face = face_new(font_ptr, font.byteLength, 72); + // Initialize our font face + const face = face_new(font_ptr, font.byteLength, 72 /* size in px */); free(font_ptr); // Render a glyph diff --git a/src/font/face/web_canvas.zig b/src/font/face/web_canvas.zig index 8fd84edc2..addac8763 100644 --- a/src/font/face/web_canvas.zig +++ b/src/font/face/web_canvas.zig @@ -121,13 +121,17 @@ pub const Face = struct { const bounding_right = try metrics.get(f32, "actualBoundingBoxRight"); if (bounding_right > 0) break :width bounding_right; break :width try metrics.get(f32, "width"); - })); + })) + 1; // 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)); + const height = @floatToInt(u32, @ceil(asc + desc)) + 1; + + // Note: width and height both get "+ 1" added to them above. This + // is important so that there is a 1px border around the glyph to avoid + // any clipping in the atlas. // Resize canvas to match the glyph size exactly { @@ -163,8 +167,8 @@ pub const Face = struct { try ctx.set("fillStyle", js.string("black")); try ctx.call(void, "fillText", .{ glyph_str, - left, - asc, + left + 1, + asc + 1, }); // Read the image data and get it into a []u8 on our side