lightpanda-io · nikneym · Nov 5, 2025
diff --git a/src/browser/canvas/CanvasRenderingContext2D.zig b/src/browser/canvas/CanvasRenderingContext2D.zig
@@ -0,0 +1,35 @@
+// Copyright (C) 2023-2025  Lightpanda (Selecy SAS)
+//
+// Francis Bouvier <francis@lightpanda.io>
+// Pierre Tachoire <pierre@lightpanda.io>
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as
+// published by the Free Software Foundation, either version 3 of the
+// License, or (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+/// This class doesn't implement a `constructor`.
+/// It can be obtained with a call to `HTMLCanvasElement#getContext`.
+/// https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D
+const CanvasRenderingContext2D = @This();
+
+pub fn _fillRect(x: f64, y: f64, width: f64, height: f64) void {
+    _ = x;
+    _ = y;
+    _ = width;
+    _ = height;
+}
+
+pub fn get_fillStyle(_: *const CanvasRenderingContext2D) []const u8 {
+    return "";
+}
+
+pub fn set_fillStyle(_: *const CanvasRenderingContext2D, _: []const u8) void {}
diff --git a/src/browser/canvas/root.zig b/src/browser/canvas/root.zig
@@ -0,0 +1,6 @@
+//! Canvas API.
+//! https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API
+
+pub const Interfaces = .{
+    @import("./CanvasRenderingContext2D.zig"),
+};
diff --git a/src/browser/html/elements.zig b/src/browser/html/elements.zig
@@ -32,6 +32,7 @@ const DataSet = @import("DataSet.zig");
 
 const StyleSheet = @import("../cssom/StyleSheet.zig");
 const CSSStyleDeclaration = @import("../cssom/CSSStyleDeclaration.zig");
+const CanvasRenderingContext2D = @import("../canvas/CanvasRenderingContext2D.zig");
 
 // HTMLElement interfaces
 pub const Interfaces = .{
@@ -487,6 +488,23 @@ pub const HTMLCanvasElement = struct {
     pub const Self = parser.Canvas;
     pub const prototype = *HTMLElement;
     pub const subtype = .node;
+
+    /// This should be a union once we support other context types.
+    const ContextAttributes = struct {
+        alpha: bool,
+        color_space: []const u8 = "srgb",
+    };
+
+    pub fn _getContext(
+        ctx_type: []const u8,
+        _: ?ContextAttributes,
+    ) !CanvasRenderingContext2D {
+        if (!std.mem.eql(u8, ctx_type, "2d")) {
+            return error.NotSupported;
+        }
+
+        return .{};
+    }
 };
 
 pub const HTMLDListElement = struct {
@@ -1356,3 +1374,7 @@ test "Browser: HTML.HtmlScriptElement" {
 test "Browser: HTML.HtmlSlotElement" {
     try testing.htmlRunner("html/slot.html");
 }
+
+test "Browser: HTML.HTMLCanvasElement" {
+    try testing.htmlRunner("html/canvas.html");
+}
diff --git a/src/browser/js/types.zig b/src/browser/js/types.zig
@@ -18,6 +18,7 @@ const Interfaces = generate.Tuple(.{
     @import("../xhr/xhr.zig").Interfaces,
     @import("../navigation/root.zig").Interfaces,
     @import("../file/root.zig").Interfaces,
+    @import("../canvas/root.zig").Interfaces,
     @import("../xhr/form_data.zig").Interfaces,
     @import("../xmlserializer/xmlserializer.zig").Interfaces,
     @import("../fetch/fetch.zig").Interfaces,

diff --git a/src/tests/html/canvas.html b/src/tests/html/canvas.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<script src="../testing.js"></script>
+
+<script id=canvas>
+  const element = document.createElement("canvas");
+  const ctx = element.getContext("2d");
+  testing.expectEqual(true, ctx instanceof CanvasRenderingContext2D);
+  // We can't really test this but let's try to call it.
+  ctx.fillRect(0, 0, 0, 0);
+  testing.expectEqual("", ctx.fillStyle);
+</script>