From c9755f5fd1a70552bd33d2ee9b5e2ee0c0d9325c Mon Sep 17 00:00:00 2001
From: Mitchell Hashimoto <mitchell.hashimoto@gmail.com>
Date: Tue, 13 Dec 2022 21:19:40 -0800
Subject: [PATCH] font: mostly empty web canvas sprite renderer, but compiles

---
 src/font/Group.zig         | 17 ++++------
 src/font/sprite/canvas.zig | 66 +++++++++++++++++++++++++++++++++++++-
 2 files changed, 72 insertions(+), 11 deletions(-)

diff --git a/src/font/Group.zig b/src/font/Group.zig
index ae4bc54bd..71e99efdf 100644
--- a/src/font/Group.zig
+++ b/src/font/Group.zig
@@ -272,16 +272,13 @@ pub fn renderGlyph(
     max_height: ?u16,
 ) !Glyph {
     // Special-case fonts are rendered directly.
-    // TODO: web_canvas
-    if (options.backend != .web_canvas) {
-        if (index.special()) |sp| switch (sp) {
-            .sprite => return try self.sprite.?.renderGlyph(
-                alloc,
-                atlas,
-                glyph_index,
-            ),
-        };
-    }
+    if (index.special()) |sp| switch (sp) {
+        .sprite => return try self.sprite.?.renderGlyph(
+            alloc,
+            atlas,
+            glyph_index,
+        ),
+    };
 
     const face = &self.faces.get(index.style).items[@intCast(usize, index.idx)];
     try face.load(self.lib, self.size);
diff --git a/src/font/sprite/canvas.zig b/src/font/sprite/canvas.zig
index ef9735a33..00654f96d 100644
--- a/src/font/sprite/canvas.zig
+++ b/src/font/sprite/canvas.zig
@@ -3,6 +3,7 @@
 const std = @import("std");
 const assert = std.debug.assert;
 const Allocator = std.mem.Allocator;
+const js = @import("zig-js");
 const pixman = @import("pixman");
 const font = @import("../main.zig");
 
@@ -91,7 +92,70 @@ pub const Canvas = switch (font.options.backend) {
     else => PixmanImpl,
 };
 
-const WebCanvasImpl = struct {};
+const WebCanvasImpl = struct {
+    /// The canvas element that is our final image.
+    canvas: js.Object,
+
+    pub fn init(alloc: Allocator, width: u32, height: u32) !WebCanvasImpl {
+        _ = alloc;
+
+        // Create our canvas that we're going to continue to reuse.
+        const doc = try js.global.get(js.Object, "document");
+        defer doc.deinit();
+        const canvas = try doc.call(js.Object, "createElement", .{js.string("canvas")});
+        errdefer canvas.deinit();
+
+        // Set our dimensions.
+        try canvas.set("width", width);
+        try canvas.set("height", height);
+
+        return WebCanvasImpl{
+            .canvas = canvas,
+        };
+    }
+
+    pub fn deinit(self: *WebCanvasImpl, alloc: Allocator) void {
+        _ = alloc;
+        self.canvas.deinit();
+        self.* = undefined;
+    }
+
+    pub fn rect(self: *WebCanvasImpl, v: Rect, color: Color) void {
+        _ = self;
+        _ = v;
+        _ = color;
+    }
+
+    pub fn trapezoid(self: *WebCanvasImpl, t: Trapezoid) void {
+        _ = self;
+        _ = t;
+    }
+
+    pub fn triangle(self: *WebCanvasImpl, t: Triangle, color: Color) void {
+        _ = self;
+        _ = t;
+        _ = color;
+    }
+
+    pub fn composite(
+        self: *WebCanvasImpl,
+        op: CompositionOp,
+        src: *const WebCanvasImpl,
+        dest: Rect,
+    ) void {
+        _ = self;
+        _ = op;
+        _ = src;
+        _ = dest;
+    }
+
+    pub fn writeAtlas(self: *WebCanvasImpl, alloc: Allocator, atlas: *font.Atlas) !font.Atlas.Region {
+        _ = self;
+        _ = alloc;
+        _ = atlas;
+        return error.Unimplemented;
+    }
+};
 
 const PixmanImpl = struct {
     /// The underlying image.