diff --git a/build.zig b/build.zig
index cc914dca2..4b2c52712 100644
--- a/build.zig
+++ b/build.zig
@@ -714,6 +714,7 @@ fn addDeps(
     step.addModule("freetype", freetype_dep.module("freetype"));
     step.addModule("harfbuzz", harfbuzz_dep.module("harfbuzz"));
     step.addModule("xev", libxev_dep.module("xev"));
+    step.addModule("zig-js", js_dep.module("zig-js"));
     step.addModule("pixman", pixman_dep.module("pixman"));
     step.addModule("utf8proc", utf8proc_dep.module("utf8proc"));
 
diff --git a/src/font/sprite/canvas.zig b/src/font/sprite/canvas.zig
index 08e80210b..93551335e 100644
--- a/src/font/sprite/canvas.zig
+++ b/src/font/sprite/canvas.zig
@@ -140,6 +140,12 @@ const WebCanvasImpl = struct {
         self.* = undefined;
     }
 
+    pub fn pixel(self: *WebCanvasImpl, x: u32, y: u32, color: Color) void {
+        const ctx = self.context(color) catch return;
+        defer ctx.deinit();
+        ctx.call(void, "fillRect", .{ x, y, 1, 1 }) catch return;
+    }
+
     pub fn rect(self: *WebCanvasImpl, v: Rect, color: Color) void {
         const ctx = self.context(color) catch return;
         defer ctx.deinit();
@@ -401,6 +407,20 @@ const PixmanImpl = struct {
         return region;
     }
 
+    /// Draw and fill a single pixel
+    pub fn pixel(self: *Canvas, x: u32, y: u32, color: Color) void {
+        const boxes = &[_]pixman.Box32{
+            .{
+                .x1 = @intCast(x),
+                .y1 = @intCast(y),
+                .x2 = @intCast(x + 1),
+                .y2 = @intCast(y + 1),
+            },
+        };
+
+        self.image.fillBoxes(.src, color.pixmanColor(), boxes) catch {};
+    }
+
     /// Draw and fill a rectangle. This is the main primitive for drawing
     /// lines as well (which are just generally skinny rectangles...)
     pub fn rect(self: *Canvas, v: Rect, color: Color) void {
diff --git a/src/font/sprite/underline.zig b/src/font/sprite/underline.zig
index 5317667e8..0a0d127d9 100644
--- a/src/font/sprite/underline.zig
+++ b/src/font/sprite/underline.zig
@@ -165,12 +165,13 @@ const Draw = struct {
     fn drawCurly(self: Draw, canvas: *font.sprite.Canvas) void {
         // This is the lowest that the curl can go.
         const y_max = self.height - 1;
+        const x_factor = 2 * std.math.pi / @as(f64, @floatFromInt(self.width - 1));
 
         // Some fonts put the underline too close to the bottom of the
         // cell height and this doesn't allow us to make a high enough
         // wave. This constant is arbitrary, change it for aesthetics.
         const pos = pos: {
-            const MIN_HEIGHT = 7;
+            const MIN_HEIGHT = 5;
             const clamped_pos = @min(y_max, self.pos);
             const height = y_max - clamped_pos;
             break :pos if (height < MIN_HEIGHT) clamped_pos -| MIN_HEIGHT else clamped_pos;
@@ -180,26 +181,26 @@ const Draw = struct {
         // underline position. We also calculate our starting y which is
         // slightly below our descender since our wave will move about that.
         const wave_height = @as(f64, @floatFromInt(y_max - pos));
-        const half_height = wave_height / 4;
-        const y = pos + @as(u32, @intFromFloat(half_height));
+        //const wave_height = @as(f64, @floatFromInt(y_max - (pos - self.thickness / 2)));
+        const half_height = @max(1, wave_height / 4);
+        const y_pos = @as(i32, @intCast(pos)) + @as(i32, @intFromFloat(2 * half_height));
 
-        const x_factor = (2 * std.math.pi) / @as(f64, @floatFromInt(self.width));
+        // follow Xiaolin Wu's antialias algorithm to draw the curve
         var x: u32 = 0;
         while (x < self.width) : (x += 1) {
-            const vertical = @as(
-                u32,
-                @intFromFloat((-1 * half_height) * @sin(@as(f64, @floatFromInt(x)) * x_factor) + half_height),
-            );
+            const y0 = half_height * @cos(@as(f64, @floatFromInt(x)) * x_factor);
+            const y1 = y_pos + @as(i32, @intFromFloat(@floor(y0)));
+            const y3 = y1 - 1 + @as(i32, @intCast(self.thickness));
+            const alpha = @as(u8, @intFromFloat(255 * @abs(y0 - @floor(y0))));
 
-            var row: u32 = 0;
-            while (row < self.thickness) : (row += 1) {
-                const y1 = @min(row + y + vertical, y_max);
-                canvas.rect(.{
-                    .x = @intCast(x),
-                    .y = @intCast(y1),
-                    .width = 1,
-                    .height = 1,
-                }, .on);
+            // upper and lower bounds
+            canvas.pixel(x, @min(@as(u32, @intCast(y1)), y_max), @enumFromInt(255 - alpha));
+            canvas.pixel(x, @min(@as(u32, @intCast(y3)), y_max), @enumFromInt(alpha));
+
+            // fill between upper and lower bound
+            var y2: u32 = @as(u32, @intCast(y1)) + 1;
+            while (y2 < y3) : (y2 += 1) {
+                canvas.pixel(x, @min(y2, y_max), .on);
             }
         }
     }