Merge pull request #1311 from lightpanda-io/nikneym/backport-canvas

Backport dummy canvas APIs

src/browser/color.zig

@@ -0,0 +1,298 @@
+// 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/>.
+
+const std = @import("std");
+const Io = std.Io;
+
+pub fn isHexColor(value: []const u8) bool {
+    if (value.len == 0) {
+        return false;
+    }
+
+    if (value[0] != '#') {
+        return false;
+    }
+
+    const hex_part = value[1..];
+    switch (hex_part.len) {
+        3, 4, 6, 8 => for (hex_part) |c| if (!std.ascii.isHex(c)) return false,
+        else => return false,
+    }
+
+    return true;
+}
+
+pub const RGBA = packed struct(u32) {
+    r: u8,
+    g: u8,
+    b: u8,
+    /// Opaque by default.
+    a: u8 = std.math.maxInt(u8),
+
+    pub const Named = struct {
+        // Basic colors (CSS Level 1)
+        pub const black: RGBA = .init(0, 0, 0, 1);
+        pub const silver: RGBA = .init(192, 192, 192, 1);
+        pub const gray: RGBA = .init(128, 128, 128, 1);
+        pub const white: RGBA = .init(255, 255, 255, 1);
+        pub const maroon: RGBA = .init(128, 0, 0, 1);
+        pub const red: RGBA = .init(255, 0, 0, 1);
+        pub const purple: RGBA = .init(128, 0, 128, 1);
+        pub const fuchsia: RGBA = .init(255, 0, 255, 1);
+        pub const green: RGBA = .init(0, 128, 0, 1);
+        pub const lime: RGBA = .init(0, 255, 0, 1);
+        pub const olive: RGBA = .init(128, 128, 0, 1);
+        pub const yellow: RGBA = .init(255, 255, 0, 1);
+        pub const navy: RGBA = .init(0, 0, 128, 1);
+        pub const blue: RGBA = .init(0, 0, 255, 1);
+        pub const teal: RGBA = .init(0, 128, 128, 1);
+        pub const aqua: RGBA = .init(0, 255, 255, 1);
+
+        // Extended colors (CSS Level 2+)
+        pub const aliceblue: RGBA = .init(240, 248, 255, 1);
+        pub const antiquewhite: RGBA = .init(250, 235, 215, 1);
+        pub const aquamarine: RGBA = .init(127, 255, 212, 1);
+        pub const azure: RGBA = .init(240, 255, 255, 1);
+        pub const beige: RGBA = .init(245, 245, 220, 1);
+        pub const bisque: RGBA = .init(255, 228, 196, 1);
+        pub const blanchedalmond: RGBA = .init(255, 235, 205, 1);
+        pub const blueviolet: RGBA = .init(138, 43, 226, 1);
+        pub const brown: RGBA = .init(165, 42, 42, 1);
+        pub const burlywood: RGBA = .init(222, 184, 135, 1);
+        pub const cadetblue: RGBA = .init(95, 158, 160, 1);
+        pub const chartreuse: RGBA = .init(127, 255, 0, 1);
+        pub const chocolate: RGBA = .init(210, 105, 30, 1);
+        pub const coral: RGBA = .init(255, 127, 80, 1);
+        pub const cornflowerblue: RGBA = .init(100, 149, 237, 1);
+        pub const cornsilk: RGBA = .init(255, 248, 220, 1);
+        pub const crimson: RGBA = .init(220, 20, 60, 1);
+        pub const cyan: RGBA = .init(0, 255, 255, 1); // Synonym of aqua
+        pub const darkblue: RGBA = .init(0, 0, 139, 1);
+        pub const darkcyan: RGBA = .init(0, 139, 139, 1);
+        pub const darkgoldenrod: RGBA = .init(184, 134, 11, 1);
+        pub const darkgray: RGBA = .init(169, 169, 169, 1);
+        pub const darkgreen: RGBA = .init(0, 100, 0, 1);
+        pub const darkgrey: RGBA = .init(169, 169, 169, 1); // Synonym of darkgray
+        pub const darkkhaki: RGBA = .init(189, 183, 107, 1);
+        pub const darkmagenta: RGBA = .init(139, 0, 139, 1);
+        pub const darkolivegreen: RGBA = .init(85, 107, 47, 1);
+        pub const darkorange: RGBA = .init(255, 140, 0, 1);
+        pub const darkorchid: RGBA = .init(153, 50, 204, 1);
+        pub const darkred: RGBA = .init(139, 0, 0, 1);
+        pub const darksalmon: RGBA = .init(233, 150, 122, 1);
+        pub const darkseagreen: RGBA = .init(143, 188, 143, 1);
+        pub const darkslateblue: RGBA = .init(72, 61, 139, 1);
+        pub const darkslategray: RGBA = .init(47, 79, 79, 1);
+        pub const darkslategrey: RGBA = .init(47, 79, 79, 1); // Synonym of darkslategray
+        pub const darkturquoise: RGBA = .init(0, 206, 209, 1);
+        pub const darkviolet: RGBA = .init(148, 0, 211, 1);
+        pub const deeppink: RGBA = .init(255, 20, 147, 1);
+        pub const deepskyblue: RGBA = .init(0, 191, 255, 1);
+        pub const dimgray: RGBA = .init(105, 105, 105, 1);
+        pub const dimgrey: RGBA = .init(105, 105, 105, 1); // Synonym of dimgray
+        pub const dodgerblue: RGBA = .init(30, 144, 255, 1);
+        pub const firebrick: RGBA = .init(178, 34, 34, 1);
+        pub const floralwhite: RGBA = .init(255, 250, 240, 1);
+        pub const forestgreen: RGBA = .init(34, 139, 34, 1);
+        pub const gainsboro: RGBA = .init(220, 220, 220, 1);
+        pub const ghostwhite: RGBA = .init(248, 248, 255, 1);
+        pub const gold: RGBA = .init(255, 215, 0, 1);
+        pub const goldenrod: RGBA = .init(218, 165, 32, 1);
+        pub const greenyellow: RGBA = .init(173, 255, 47, 1);
+        pub const grey: RGBA = .init(128, 128, 128, 1); // Synonym of gray
+        pub const honeydew: RGBA = .init(240, 255, 240, 1);
+        pub const hotpink: RGBA = .init(255, 105, 180, 1);
+        pub const indianred: RGBA = .init(205, 92, 92, 1);
+        pub const indigo: RGBA = .init(75, 0, 130, 1);
+        pub const ivory: RGBA = .init(255, 255, 240, 1);
+        pub const khaki: RGBA = .init(240, 230, 140, 1);
+        pub const lavender: RGBA = .init(230, 230, 250, 1);
+        pub const lavenderblush: RGBA = .init(255, 240, 245, 1);
+        pub const lawngreen: RGBA = .init(124, 252, 0, 1);
+        pub const lemonchiffon: RGBA = .init(255, 250, 205, 1);
+        pub const lightblue: RGBA = .init(173, 216, 230, 1);
+        pub const lightcoral: RGBA = .init(240, 128, 128, 1);
+        pub const lightcyan: RGBA = .init(224, 255, 255, 1);
+        pub const lightgoldenrodyellow: RGBA = .init(250, 250, 210, 1);
+        pub const lightgray: RGBA = .init(211, 211, 211, 1);
+        pub const lightgreen: RGBA = .init(144, 238, 144, 1);
+        pub const lightgrey: RGBA = .init(211, 211, 211, 1); // Synonym of lightgray
+        pub const lightpink: RGBA = .init(255, 182, 193, 1);
+        pub const lightsalmon: RGBA = .init(255, 160, 122, 1);
+        pub const lightseagreen: RGBA = .init(32, 178, 170, 1);
+        pub const lightskyblue: RGBA = .init(135, 206, 250, 1);
+        pub const lightslategray: RGBA = .init(119, 136, 153, 1);
+        pub const lightslategrey: RGBA = .init(119, 136, 153, 1); // Synonym of lightslategray
+        pub const lightsteelblue: RGBA = .init(176, 196, 222, 1);
+        pub const lightyellow: RGBA = .init(255, 255, 224, 1);
+        pub const limegreen: RGBA = .init(50, 205, 50, 1);
+        pub const linen: RGBA = .init(250, 240, 230, 1);
+        pub const magenta: RGBA = .init(255, 0, 255, 1); // Synonym of fuchsia
+        pub const mediumaquamarine: RGBA = .init(102, 205, 170, 1);
+        pub const mediumblue: RGBA = .init(0, 0, 205, 1);
+        pub const mediumorchid: RGBA = .init(186, 85, 211, 1);
+        pub const mediumpurple: RGBA = .init(147, 112, 219, 1);
+        pub const mediumseagreen: RGBA = .init(60, 179, 113, 1);
+        pub const mediumslateblue: RGBA = .init(123, 104, 238, 1);
+        pub const mediumspringgreen: RGBA = .init(0, 250, 154, 1);
+        pub const mediumturquoise: RGBA = .init(72, 209, 204, 1);
+        pub const mediumvioletred: RGBA = .init(199, 21, 133, 1);
+        pub const midnightblue: RGBA = .init(25, 25, 112, 1);
+        pub const mintcream: RGBA = .init(245, 255, 250, 1);
+        pub const mistyrose: RGBA = .init(255, 228, 225, 1);
+        pub const moccasin: RGBA = .init(255, 228, 181, 1);
+        pub const navajowhite: RGBA = .init(255, 222, 173, 1);
+        pub const oldlace: RGBA = .init(253, 245, 230, 1);
+        pub const olivedrab: RGBA = .init(107, 142, 35, 1);
+        pub const orange: RGBA = .init(255, 165, 0, 1);
+        pub const orangered: RGBA = .init(255, 69, 0, 1);
+        pub const orchid: RGBA = .init(218, 112, 214, 1);
+        pub const palegoldenrod: RGBA = .init(238, 232, 170, 1);
+        pub const palegreen: RGBA = .init(152, 251, 152, 1);
+        pub const paleturquoise: RGBA = .init(175, 238, 238, 1);
+        pub const palevioletred: RGBA = .init(219, 112, 147, 1);
+        pub const papayawhip: RGBA = .init(255, 239, 213, 1);
+        pub const peachpuff: RGBA = .init(255, 218, 185, 1);
+        pub const peru: RGBA = .init(205, 133, 63, 1);
+        pub const pink: RGBA = .init(255, 192, 203, 1);
+        pub const plum: RGBA = .init(221, 160, 221, 1);
+        pub const powderblue: RGBA = .init(176, 224, 230, 1);
+        pub const rebeccapurple: RGBA = .init(102, 51, 153, 1);
+        pub const rosybrown: RGBA = .init(188, 143, 143, 1);
+        pub const royalblue: RGBA = .init(65, 105, 225, 1);
+        pub const saddlebrown: RGBA = .init(139, 69, 19, 1);
+        pub const salmon: RGBA = .init(250, 128, 114, 1);
+        pub const sandybrown: RGBA = .init(244, 164, 96, 1);
+        pub const seagreen: RGBA = .init(46, 139, 87, 1);
+        pub const seashell: RGBA = .init(255, 245, 238, 1);
+        pub const sienna: RGBA = .init(160, 82, 45, 1);
+        pub const skyblue: RGBA = .init(135, 206, 235, 1);
+        pub const slateblue: RGBA = .init(106, 90, 205, 1);
+        pub const slategray: RGBA = .init(112, 128, 144, 1);
+        pub const slategrey: RGBA = .init(112, 128, 144, 1); // Synonym of slategray
+        pub const snow: RGBA = .init(255, 250, 250, 1);
+        pub const springgreen: RGBA = .init(0, 255, 127, 1);
+        pub const steelblue: RGBA = .init(70, 130, 180, 1);
+        pub const tan: RGBA = .init(210, 180, 140, 1);
+        pub const thistle: RGBA = .init(216, 191, 216, 1);
+        pub const tomato: RGBA = .init(255, 99, 71, 1);
+        pub const transparent: RGBA = .init(0, 0, 0, 0);
+        pub const turquoise: RGBA = .init(64, 224, 208, 1);
+        pub const violet: RGBA = .init(238, 130, 238, 1);
+        pub const wheat: RGBA = .init(245, 222, 179, 1);
+        pub const whitesmoke: RGBA = .init(245, 245, 245, 1);
+        pub const yellowgreen: RGBA = .init(154, 205, 50, 1);
+    };
+
+    pub fn init(r: u8, g: u8, b: u8, a: f32) RGBA {
+        const clamped = std.math.clamp(a, 0, 1);
+        return .{ .r = r, .g = g, .b = b, .a = @intFromFloat(clamped * 255) };
+    }
+
+    /// Finds a color by its name.
+    pub fn find(name: []const u8) ?RGBA {
+        const match = std.meta.stringToEnum(std.meta.DeclEnum(Named), name) orelse return null;
+
+        return switch (match) {
+            inline else => |comptime_enum| @field(Named, @tagName(comptime_enum)),
+        };
+    }
+
+    /// Parses the given color.
+    /// Currently we only parse hex colors and named colors; other variants
+    /// require CSS evaluation.
+    pub fn parse(input: []const u8) !RGBA {
+        if (!isHexColor(input)) {
+            // Try named colors.
+            return find(input) orelse return error.Invalid;
+        }
+
+        const slice = input[1..];
+        switch (slice.len) {
+            // This means the digit for a color is repeated.
+            // Given HEX is #f0c, its interpreted the same as #FF00CC.
+            3 => {
+                const r = try std.fmt.parseInt(u8, &.{ slice[0], slice[0] }, 16);
+                const g = try std.fmt.parseInt(u8, &.{ slice[1], slice[1] }, 16);
+                const b = try std.fmt.parseInt(u8, &.{ slice[2], slice[2] }, 16);
+                return .{ .r = r, .g = g, .b = b, .a = 255 };
+            },
+            4 => {
+                const r = try std.fmt.parseInt(u8, &.{ slice[0], slice[0] }, 16);
+                const g = try std.fmt.parseInt(u8, &.{ slice[1], slice[1] }, 16);
+                const b = try std.fmt.parseInt(u8, &.{ slice[2], slice[2] }, 16);
+                const a = try std.fmt.parseInt(u8, &.{ slice[3], slice[3] }, 16);
+                return .{ .r = r, .g = g, .b = b, .a = a };
+            },
+            // Regular HEX format.
+            6 => {
+                const r = try std.fmt.parseInt(u8, slice[0..2], 16);
+                const g = try std.fmt.parseInt(u8, slice[2..4], 16);
+                const b = try std.fmt.parseInt(u8, slice[4..6], 16);
+                return .{ .r = r, .g = g, .b = b, .a = 255 };
+            },
+            8 => {
+                const r = try std.fmt.parseInt(u8, slice[0..2], 16);
+                const g = try std.fmt.parseInt(u8, slice[2..4], 16);
+                const b = try std.fmt.parseInt(u8, slice[4..6], 16);
+                const a = try std.fmt.parseInt(u8, slice[6..8], 16);
+                return .{ .r = r, .g = g, .b = b, .a = a };
+            },
+            else => return error.Invalid,
+        }
+    }
+
+    /// By default, browsers prefer lowercase formatting.
+    const format_upper = false;
+
+    /// Formats the `Color` according to web expectations.
+    /// If color is opaque, HEX is preferred; RGBA otherwise.
+    pub fn format(self: *const RGBA, writer: *Io.Writer) Io.Writer.Error!void {
+        if (self.isOpaque()) {
+            // Convert RGB to HEX.
+            // https://gristle.tripod.com/hexconv.html
+            // Hexadecimal characters up to 15.
+            const char: []const u8 = "0123456789" ++ if (format_upper) "ABCDEF" else "abcdef";
+            // This variant always prefers 6 digit format, +1 is for hash char.
+            const buffer = [7]u8{
+                '#',
+                char[self.r >> 4],
+                char[self.r & 15],
+                char[self.g >> 4],
+                char[self.g & 15],
+                char[self.b >> 4],
+                char[self.b & 15],
+            };
+
+            return writer.writeAll(&buffer);
+        }
+
+        // Prefer RGBA format for everything else.
+        return writer.print("rgba({d}, {d}, {d}, {d:.2})", .{ self.r, self.g, self.b, self.normalizedAlpha() });
+    }
+
+    /// Returns true if `Color` is opaque.
+    pub inline fn isOpaque(self: *const RGBA) bool {
+        return self.a == std.math.maxInt(u8);
+    }
+
+    /// Returns the normalized alpha value.
+    pub inline fn normalizedAlpha(self: *const RGBA) f32 {
+        return @as(f32, @floatFromInt(self.a)) / 255;
+    }
+};

src/browser/js/bridge.zig

@@ -645,4 +645,6 @@ pub const JsApis = flattenTypes(&.{
     @import("../webapi/navigation/NavigationEventTarget.zig"),
     @import("../webapi/navigation/NavigationHistoryEntry.zig"),
     @import("../webapi/navigation/NavigationActivation.zig"),
+    @import("../webapi/canvas/CanvasRenderingContext2D.zig"),
+    @import("../webapi/canvas/WebGLRenderingContext.zig"),
 });

src/browser/tests/canvas/canvas_rendering_context_2d.html

@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<script src="../testing.js"></script>
+
+<script id=CanvasRenderingContext2D>
+{
+  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 at least.
+  ctx.fillRect(0, 0, 0, 0);
+}
+</script>
+
+<script id=CanvasRenderingContext2D#fillStyle>
+{
+  const element = document.createElement("canvas");
+  const ctx = element.getContext("2d");
+
+  // Black by default.
+  testing.expectEqual(ctx.fillStyle, "#000000");
+  ctx.fillStyle = "red";
+  testing.expectEqual(ctx.fillStyle, "#ff0000");
+  ctx.fillStyle = "rebeccapurple";
+  testing.expectEqual(ctx.fillStyle, "#663399");
+  // No changes made if color is invalid.
+  ctx.fillStyle = "invalid-color";
+  testing.expectEqual(ctx.fillStyle, "#663399");
+  ctx.fillStyle = "#fc0";
+  testing.expectEqual(ctx.fillStyle, "#ffcc00");
+  ctx.fillStyle = "#ff0000";
+  testing.expectEqual(ctx.fillStyle, "#ff0000");
+  ctx.fillStyle = "#fF00000F";
+  testing.expectEqual(ctx.fillStyle, "rgba(255, 0, 0, 0.06)");
+}
+</script>

src/browser/tests/canvas/webgl_rendering_context.html

@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<script src="../testing.js"></script>
+
+<script id=WebGLRenderingContext#getSupportedExtensions>
+{
+  const element = document.createElement("canvas");
+  const ctx = element.getContext("webgl");
+  testing.expectEqual(true, ctx instanceof WebGLRenderingContext);
+
+  const supportedExtensions = ctx.getSupportedExtensions();
+  // The order Chrome prefer.
+  const expectedExtensions = [
+      "ANGLE_instanced_arrays",
+      "EXT_blend_minmax",
+      "EXT_clip_control",
+      "EXT_color_buffer_half_float",
+      "EXT_depth_clamp",
+      "EXT_disjoint_timer_query",
+      "EXT_float_blend",
+      "EXT_frag_depth",
+      "EXT_polygon_offset_clamp",
+      "EXT_shader_texture_lod",
+      "EXT_texture_compression_bptc",
+      "EXT_texture_compression_rgtc",
+      "EXT_texture_filter_anisotropic",
+      "EXT_texture_mirror_clamp_to_edge",
+      "EXT_sRGB",
+      "KHR_parallel_shader_compile",
+      "OES_element_index_uint",
+      "OES_fbo_render_mipmap",
+      "OES_standard_derivatives",
+      "OES_texture_float",
+      "OES_texture_float_linear",
+      "OES_texture_half_float",
+      "OES_texture_half_float_linear",
+      "OES_vertex_array_object",
+      "WEBGL_blend_func_extended",
+      "WEBGL_color_buffer_float",
+      "WEBGL_compressed_texture_astc",
+      "WEBGL_compressed_texture_etc",
+      "WEBGL_compressed_texture_etc1",
+      "WEBGL_compressed_texture_pvrtc",
+      "WEBGL_compressed_texture_s3tc",
+      "WEBGL_compressed_texture_s3tc_srgb",
+      "WEBGL_debug_renderer_info",
+      "WEBGL_debug_shaders",
+      "WEBGL_depth_texture",
+      "WEBGL_draw_buffers",
+      "WEBGL_lose_context",
+      "WEBGL_multi_draw",
+      "WEBGL_polygon_mode"
+  ];
+
+  testing.expectEqual(expectedExtensions.length, supportedExtensions.length);
+  for (let i = 0; i < expectedExtensions.length; i++) {
+    testing.expectEqual(expectedExtensions[i], supportedExtensions[i]);
+  }
+}
+</script>
+
+<script id=WebGLRenderingCanvas#getExtension>
+// WEBGL_debug_renderer_info
+{
+  const element = document.createElement("canvas");
+  const ctx = element.getContext("webgl");
+  const rendererInfo = ctx.getExtension("WEBGL_debug_renderer_info");
+  testing.expectEqual(true, rendererInfo instanceof WEBGL_debug_renderer_info);
+
+  const { UNMASKED_VENDOR_WEBGL, UNMASKED_RENDERER_WEBGL } = rendererInfo;
+  testing.expectEqual(UNMASKED_VENDOR_WEBGL, 0x9245);
+  testing.expectEqual(UNMASKED_RENDERER_WEBGL, 0x9246);
+
+  testing.expectEqual("", ctx.getParameter(UNMASKED_VENDOR_WEBGL));
+  testing.expectEqual("", ctx.getParameter(UNMASKED_RENDERER_WEBGL));
+}
+
+// WEBGL_lose_context
+{
+  const element = document.createElement("canvas");
+  const ctx = element.getContext("webgl");
+  const loseContext = ctx.getExtension("WEBGL_lose_context");
+  testing.expectEqual(true, loseContext instanceof WEBGL_lose_context);
+
+  loseContext.loseContext();
+  loseContext.restoreContext();
+}
+</script>

src/browser/webapi/canvas/CanvasRenderingContext2D.zig

@@ -0,0 +1,183 @@
+// 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/>.
+
+const std = @import("std");
+
+const js = @import("../../js/js.zig");
+
+const color = @import("../../color.zig");
+const Page = @import("../../Page.zig");
+
+/// 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();
+/// Fill color.
+/// TODO: Add support for `CanvasGradient` and `CanvasPattern`.
+_fill_style: color.RGBA = color.RGBA.Named.black,
+
+pub fn getFillStyle(self: *const CanvasRenderingContext2D, page: *Page) ![]const u8 {
+    var w = std.Io.Writer.Allocating.init(page.call_arena);
+    try self._fill_style.format(&w.writer);
+    return w.written();
+}
+
+pub fn setFillStyle(
+    self: *CanvasRenderingContext2D,
+    value: []const u8,
+) !void {
+    // Prefer the same fill_style if fails.
+    self._fill_style = color.RGBA.parse(value) catch self._fill_style;
+}
+
+pub fn getGlobalAlpha(_: *const CanvasRenderingContext2D) f64 {
+    return 1.0;
+}
+
+pub fn getGlobalCompositeOperation(_: *const CanvasRenderingContext2D) []const u8 {
+    return "source-over";
+}
+
+pub fn getStrokeStyle(_: *const CanvasRenderingContext2D) []const u8 {
+    return "#000000";
+}
+
+pub fn getLineWidth(_: *const CanvasRenderingContext2D) f64 {
+    return 1.0;
+}
+
+pub fn getLineCap(_: *const CanvasRenderingContext2D) []const u8 {
+    return "butt";
+}
+
+pub fn getLineJoin(_: *const CanvasRenderingContext2D) []const u8 {
+    return "miter";
+}
+
+pub fn getMiterLimit(_: *const CanvasRenderingContext2D) f64 {
+    return 10.0;
+}
+
+pub fn getFont(_: *const CanvasRenderingContext2D) []const u8 {
+    return "10px sans-serif";
+}
+
+pub fn getTextAlign(_: *const CanvasRenderingContext2D) []const u8 {
+    return "start";
+}
+
+pub fn getTextBaseline(_: *const CanvasRenderingContext2D) []const u8 {
+    return "alphabetic";
+}
+
+pub fn save(_: *CanvasRenderingContext2D) void {}
+pub fn restore(_: *CanvasRenderingContext2D) void {}
+pub fn scale(_: *CanvasRenderingContext2D, _: f64, _: f64) void {}
+pub fn rotate(_: *CanvasRenderingContext2D, _: f64) void {}
+pub fn translate(_: *CanvasRenderingContext2D, _: f64, _: f64) void {}
+pub fn transform(_: *CanvasRenderingContext2D, _: f64, _: f64, _: f64, _: f64, _: f64, _: f64) void {}
+pub fn setTransform(_: *CanvasRenderingContext2D, _: f64, _: f64, _: f64, _: f64, _: f64, _: f64) void {}
+pub fn resetTransform(_: *CanvasRenderingContext2D) void {}
+pub fn setGlobalAlpha(_: *CanvasRenderingContext2D, _: f64) void {}
+pub fn setGlobalCompositeOperation(_: *CanvasRenderingContext2D, _: []const u8) void {}
+pub fn setStrokeStyle(_: *CanvasRenderingContext2D, _: []const u8) void {}
+pub fn setLineWidth(_: *CanvasRenderingContext2D, _: f64) void {}
+pub fn setLineCap(_: *CanvasRenderingContext2D, _: []const u8) void {}
+pub fn setLineJoin(_: *CanvasRenderingContext2D, _: []const u8) void {}
+pub fn setMiterLimit(_: *CanvasRenderingContext2D, _: f64) void {}
+pub fn clearRect(_: *CanvasRenderingContext2D, _: f64, _: f64, _: f64, _: f64) void {}
+pub fn fillRect(_: *CanvasRenderingContext2D, _: f64, _: f64, _: f64, _: f64) void {}
+pub fn strokeRect(_: *CanvasRenderingContext2D, _: f64, _: f64, _: f64, _: f64) void {}
+pub fn beginPath(_: *CanvasRenderingContext2D) void {}
+pub fn closePath(_: *CanvasRenderingContext2D) void {}
+pub fn moveTo(_: *CanvasRenderingContext2D, _: f64, _: f64) void {}
+pub fn lineTo(_: *CanvasRenderingContext2D, _: f64, _: f64) void {}
+pub fn quadraticCurveTo(_: *CanvasRenderingContext2D, _: f64, _: f64, _: f64, _: f64) void {}
+pub fn bezierCurveTo(_: *CanvasRenderingContext2D, _: f64, _: f64, _: f64, _: f64, _: f64, _: f64) void {}
+pub fn arc(_: *CanvasRenderingContext2D, _: f64, _: f64, _: f64, _: f64, _: f64, _: ?bool) void {}
+pub fn arcTo(_: *CanvasRenderingContext2D, _: f64, _: f64, _: f64, _: f64, _: f64) void {}
+pub fn rect(_: *CanvasRenderingContext2D, _: f64, _: f64, _: f64, _: f64) void {}
+pub fn fill(_: *CanvasRenderingContext2D) void {}
+pub fn stroke(_: *CanvasRenderingContext2D) void {}
+pub fn clip(_: *CanvasRenderingContext2D) void {}
+pub fn setFont(_: *CanvasRenderingContext2D, _: []const u8) void {}
+pub fn setTextAlign(_: *CanvasRenderingContext2D, _: []const u8) void {}
+pub fn setTextBaseline(_: *CanvasRenderingContext2D, _: []const u8) void {}
+pub fn fillText(_: *CanvasRenderingContext2D, _: []const u8, _: f64, _: f64, _: ?f64) void {}
+pub fn strokeText(_: *CanvasRenderingContext2D, _: []const u8, _: f64, _: f64, _: ?f64) void {}
+
+pub const JsApi = struct {
+    pub const bridge = js.Bridge(CanvasRenderingContext2D);
+
+    pub const Meta = struct {
+        pub const name = "CanvasRenderingContext2D";
+
+        pub const prototype_chain = bridge.prototypeChain();
+        pub var class_id: bridge.ClassId = undefined;
+    };
+
+    pub const save = bridge.function(CanvasRenderingContext2D.save, .{});
+    pub const restore = bridge.function(CanvasRenderingContext2D.restore, .{});
+
+    pub const scale = bridge.function(CanvasRenderingContext2D.scale, .{});
+    pub const rotate = bridge.function(CanvasRenderingContext2D.rotate, .{});
+    pub const translate = bridge.function(CanvasRenderingContext2D.translate, .{});
+    pub const transform = bridge.function(CanvasRenderingContext2D.transform, .{});
+    pub const setTransform = bridge.function(CanvasRenderingContext2D.setTransform, .{});
+    pub const resetTransform = bridge.function(CanvasRenderingContext2D.resetTransform, .{});
+
+    pub const globalAlpha = bridge.accessor(CanvasRenderingContext2D.getGlobalAlpha, CanvasRenderingContext2D.setGlobalAlpha, .{});
+    pub const globalCompositeOperation = bridge.accessor(CanvasRenderingContext2D.getGlobalCompositeOperation, CanvasRenderingContext2D.setGlobalCompositeOperation, .{});
+
+    pub const fillStyle = bridge.accessor(CanvasRenderingContext2D.getFillStyle, CanvasRenderingContext2D.setFillStyle, .{});
+    pub const strokeStyle = bridge.accessor(CanvasRenderingContext2D.getStrokeStyle, CanvasRenderingContext2D.setStrokeStyle, .{});
+
+    pub const lineWidth = bridge.accessor(CanvasRenderingContext2D.getLineWidth, CanvasRenderingContext2D.setLineWidth, .{});
+    pub const lineCap = bridge.accessor(CanvasRenderingContext2D.getLineCap, CanvasRenderingContext2D.setLineCap, .{});
+    pub const lineJoin = bridge.accessor(CanvasRenderingContext2D.getLineJoin, CanvasRenderingContext2D.setLineJoin, .{});
+    pub const miterLimit = bridge.accessor(CanvasRenderingContext2D.getMiterLimit, CanvasRenderingContext2D.setMiterLimit, .{});
+
+    pub const clearRect = bridge.function(CanvasRenderingContext2D.clearRect, .{});
+    pub const fillRect = bridge.function(CanvasRenderingContext2D.fillRect, .{});
+    pub const strokeRect = bridge.function(CanvasRenderingContext2D.strokeRect, .{});
+
+    pub const beginPath = bridge.function(CanvasRenderingContext2D.beginPath, .{});
+    pub const closePath = bridge.function(CanvasRenderingContext2D.closePath, .{});
+    pub const moveTo = bridge.function(CanvasRenderingContext2D.moveTo, .{});
+    pub const lineTo = bridge.function(CanvasRenderingContext2D.lineTo, .{});
+    pub const quadraticCurveTo = bridge.function(CanvasRenderingContext2D.quadraticCurveTo, .{});
+    pub const bezierCurveTo = bridge.function(CanvasRenderingContext2D.bezierCurveTo, .{});
+    pub const arc = bridge.function(CanvasRenderingContext2D.arc, .{});
+    pub const arcTo = bridge.function(CanvasRenderingContext2D.arcTo, .{});
+    pub const rect = bridge.function(CanvasRenderingContext2D.rect, .{});
+
+    pub const fill = bridge.function(CanvasRenderingContext2D.fill, .{});
+    pub const stroke = bridge.function(CanvasRenderingContext2D.stroke, .{});
+    pub const clip = bridge.function(CanvasRenderingContext2D.clip, .{});
+
+    pub const font = bridge.accessor(CanvasRenderingContext2D.getFont, CanvasRenderingContext2D.setFont, .{});
+    pub const textAlign = bridge.accessor(CanvasRenderingContext2D.getTextAlign, CanvasRenderingContext2D.setTextAlign, .{});
+    pub const textBaseline = bridge.accessor(CanvasRenderingContext2D.getTextBaseline, CanvasRenderingContext2D.setTextBaseline, .{});
+    pub const fillText = bridge.function(CanvasRenderingContext2D.fillText, .{});
+    pub const strokeText = bridge.function(CanvasRenderingContext2D.strokeText, .{});
+};
+
+const testing = @import("../../../testing.zig");
+test "WebApi: CanvasRenderingContext2D" {
+    try testing.htmlRunner("canvas/canvas_rendering_context_2d.html", .{});
+}

src/browser/webapi/canvas/WebGLRenderingContext.zig

@@ -0,0 +1,218 @@
+// 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/>.
+
+const std = @import("std");
+
+const js = @import("../../js/js.zig");
+const Page = @import("../../Page.zig");
+
+pub fn registerTypes() []const type {
+    return &.{
+        WebGLRenderingContext,
+        // Extension types should be runtime generated. We might want
+        // to revisit this.
+        Extension.Type.WEBGL_debug_renderer_info,
+        Extension.Type.WEBGL_lose_context,
+    };
+}
+
+const WebGLRenderingContext = @This();
+
+/// On Chrome and Safari, a call to `getSupportedExtensions` returns total of 39.
+/// The reference for it lists lesser number of extensions:
+/// https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/Using_Extensions#extension_list
+pub const Extension = union(enum) {
+    ANGLE_instanced_arrays: void,
+    EXT_blend_minmax: void,
+    EXT_clip_control: void,
+    EXT_color_buffer_half_float: void,
+    EXT_depth_clamp: void,
+    EXT_disjoint_timer_query: void,
+    EXT_float_blend: void,
+    EXT_frag_depth: void,
+    EXT_polygon_offset_clamp: void,
+    EXT_shader_texture_lod: void,
+    EXT_texture_compression_bptc: void,
+    EXT_texture_compression_rgtc: void,
+    EXT_texture_filter_anisotropic: void,
+    EXT_texture_mirror_clamp_to_edge: void,
+    EXT_sRGB: void,
+    KHR_parallel_shader_compile: void,
+    OES_element_index_uint: void,
+    OES_fbo_render_mipmap: void,
+    OES_standard_derivatives: void,
+    OES_texture_float: void,
+    OES_texture_float_linear: void,
+    OES_texture_half_float: void,
+    OES_texture_half_float_linear: void,
+    OES_vertex_array_object: void,
+    WEBGL_blend_func_extended: void,
+    WEBGL_color_buffer_float: void,
+    WEBGL_compressed_texture_astc: void,
+    WEBGL_compressed_texture_etc: void,
+    WEBGL_compressed_texture_etc1: void,
+    WEBGL_compressed_texture_pvrtc: void,
+    WEBGL_compressed_texture_s3tc: void,
+    WEBGL_compressed_texture_s3tc_srgb: void,
+    WEBGL_debug_renderer_info: *Type.WEBGL_debug_renderer_info,
+    WEBGL_debug_shaders: void,
+    WEBGL_depth_texture: void,
+    WEBGL_draw_buffers: void,
+    WEBGL_lose_context: *Type.WEBGL_lose_context,
+    WEBGL_multi_draw: void,
+    WEBGL_polygon_mode: void,
+
+    /// Reified enum type from the fields of this union.
+    const Kind = blk: {
+        const info = @typeInfo(Extension).@"union";
+        const fields = info.fields;
+        var items: [fields.len]std.builtin.Type.EnumField = undefined;
+        for (fields, 0..) |field, i| {
+            items[i] = .{ .name = field.name, .value = i };
+        }
+
+        break :blk @Type(.{
+            .@"enum" = .{
+                .tag_type = std.math.IntFittingRange(0, if (fields.len == 0) 0 else fields.len - 1),
+                .fields = &items,
+                .decls = &.{},
+                .is_exhaustive = true,
+            },
+        });
+    };
+
+    /// Returns the `Extension.Kind` by its name.
+    fn find(name: []const u8) ?Kind {
+        // Just to make you really sad, this function has to be case-insensitive.
+        // So here we copy what's being done in `std.meta.stringToEnum` but replace
+        // the comparison function.
+        const kvs = comptime build_kvs: {
+            const T = Extension.Kind;
+            const EnumKV = struct { []const u8, T };
+            var kvs_array: [@typeInfo(T).@"enum".fields.len]EnumKV = undefined;
+            for (@typeInfo(T).@"enum".fields, 0..) |enumField, i| {
+                kvs_array[i] = .{ enumField.name, @field(T, enumField.name) };
+            }
+            break :build_kvs kvs_array[0..];
+        };
+        const Map = std.StaticStringMapWithEql(Extension.Kind, std.static_string_map.eqlAsciiIgnoreCase);
+        const map = Map.initComptime(kvs);
+        return map.get(name);
+    }
+
+    /// Extension types.
+    pub const Type = struct {
+        pub const WEBGL_debug_renderer_info = struct {
+            _: u8 = 0,
+            pub const UNMASKED_VENDOR_WEBGL: u64 = 0x9245;
+            pub const UNMASKED_RENDERER_WEBGL: u64 = 0x9246;
+
+            pub fn getUnmaskedVendorWebGL(_: *const WEBGL_debug_renderer_info) u64 {
+                return UNMASKED_VENDOR_WEBGL;
+            }
+
+            pub fn getUnmaskedRendererWebGL(_: *const WEBGL_debug_renderer_info) u64 {
+                return UNMASKED_RENDERER_WEBGL;
+            }
+
+            pub const JsApi = struct {
+                pub const bridge = js.Bridge(WEBGL_debug_renderer_info);
+
+                pub const Meta = struct {
+                    pub const name = "WEBGL_debug_renderer_info";
+
+                    pub const prototype_chain = bridge.prototypeChain();
+                    pub var class_id: bridge.ClassId = undefined;
+                };
+
+                pub const UNMASKED_VENDOR_WEBGL = bridge.accessor(WEBGL_debug_renderer_info.getUnmaskedVendorWebGL, null, .{});
+                pub const UNMASKED_RENDERER_WEBGL = bridge.accessor(WEBGL_debug_renderer_info.getUnmaskedRendererWebGL, null, .{});
+            };
+        };
+
+        pub const WEBGL_lose_context = struct {
+            _: u8 = 0,
+            pub fn loseContext(_: *const WEBGL_lose_context) void {}
+            pub fn restoreContext(_: *const WEBGL_lose_context) void {}
+
+            pub const JsApi = struct {
+                pub const bridge = js.Bridge(WEBGL_lose_context);
+
+                pub const Meta = struct {
+                    pub const name = "WEBGL_lose_context";
+
+                    pub const prototype_chain = bridge.prototypeChain();
+                    pub var class_id: bridge.ClassId = undefined;
+                };
+
+                pub const loseContext = bridge.function(WEBGL_lose_context.loseContext, .{});
+                pub const restoreContext = bridge.function(WEBGL_lose_context.restoreContext, .{});
+            };
+        };
+    };
+};
+
+/// This actually takes "GLenum" which, in fact, is a fancy way to say number.
+/// Return value also depends on what's being passed as `pname`; we don't really
+/// support any though.
+pub fn getParameter(_: *const WebGLRenderingContext, pname: u32) []const u8 {
+    _ = pname;
+    return "";
+}
+
+/// Enables a WebGL extension.
+pub fn getExtension(_: *const WebGLRenderingContext, name: []const u8, page: *Page) !?Extension {
+    const tag = Extension.find(name) orelse return null;
+
+    return switch (tag) {
+        .WEBGL_debug_renderer_info => {
+            const info = try page._factory.create(Extension.Type.WEBGL_debug_renderer_info{});
+            return .{ .WEBGL_debug_renderer_info = info };
+        },
+        .WEBGL_lose_context => {
+            const ctx = try page._factory.create(Extension.Type.WEBGL_lose_context{});
+            return .{ .WEBGL_lose_context = ctx };
+        },
+        inline else => |comptime_enum| @unionInit(Extension, @tagName(comptime_enum), {}),
+    };
+}
+
+/// Returns a list of all the supported WebGL extensions.
+pub fn getSupportedExtensions(_: *const WebGLRenderingContext) []const []const u8 {
+    return std.meta.fieldNames(Extension.Kind);
+}
+
+pub const JsApi = struct {
+    pub const bridge = js.Bridge(WebGLRenderingContext);
+
+    pub const Meta = struct {
+        pub const name = "WebGLRenderingContext";
+
+        pub const prototype_chain = bridge.prototypeChain();
+        pub var class_id: bridge.ClassId = undefined;
+    };
+
+    pub const getParameter = bridge.function(WebGLRenderingContext.getParameter, .{});
+    pub const getExtension = bridge.function(WebGLRenderingContext.getExtension, .{});
+    pub const getSupportedExtensions = bridge.function(WebGLRenderingContext.getSupportedExtensions, .{});
+};
+
+const testing = @import("../../../testing.zig");
+test "WebApi: WebGLRenderingContext" {
+    try testing.htmlRunner("canvas/webgl_rendering_context.html", .{});
+}

src/browser/webapi/element/html/Canvas.zig

@@ -23,151 +23,12 @@ const Node = @import("../../Node.zig");
 const Element = @import("../../Element.zig");
 const HtmlElement = @import("../Html.zig");
 
-pub fn registerTypes() []const type {
-    return &.{
-        Canvas,
-        RenderingContext2D,
-    };
-}
+const CanvasRenderingContext2D = @import("../../canvas/CanvasRenderingContext2D.zig");
+const WebGLRenderingContext = @import("../../canvas/WebGLRenderingContext.zig");
 
 const Canvas = @This();
 _proto: *HtmlElement,
 
-pub const RenderingContext2D = struct {
-    pub fn save(_: *RenderingContext2D) void {}
-    pub fn restore(_: *RenderingContext2D) void {}
-
-    pub fn scale(_: *RenderingContext2D, _: f64, _: f64) void {}
-    pub fn rotate(_: *RenderingContext2D, _: f64) void {}
-    pub fn translate(_: *RenderingContext2D, _: f64, _: f64) void {}
-    pub fn transform(_: *RenderingContext2D, _: f64, _: f64, _: f64, _: f64, _: f64, _: f64) void {}
-    pub fn setTransform(_: *RenderingContext2D, _: f64, _: f64, _: f64, _: f64, _: f64, _: f64) void {}
-    pub fn resetTransform(_: *RenderingContext2D) void {}
-
-    pub fn getGlobalAlpha(_: *const RenderingContext2D) f64 {
-        return 1.0;
-    }
-    pub fn setGlobalAlpha(_: *RenderingContext2D, _: f64) void {}
-    pub fn getGlobalCompositeOperation(_: *const RenderingContext2D) []const u8 {
-        return "source-over";
-    }
-    pub fn setGlobalCompositeOperation(_: *RenderingContext2D, _: []const u8) void {}
-
-    pub fn getFillStyle(_: *const RenderingContext2D) []const u8 {
-        return "#000000";
-    }
-    pub fn setFillStyle(_: *RenderingContext2D, _: []const u8) void {}
-    pub fn getStrokeStyle(_: *const RenderingContext2D) []const u8 {
-        return "#000000";
-    }
-    pub fn setStrokeStyle(_: *RenderingContext2D, _: []const u8) void {}
-
-    pub fn getLineWidth(_: *const RenderingContext2D) f64 {
-        return 1.0;
-    }
-    pub fn setLineWidth(_: *RenderingContext2D, _: f64) void {}
-    pub fn getLineCap(_: *const RenderingContext2D) []const u8 {
-        return "butt";
-    }
-    pub fn setLineCap(_: *RenderingContext2D, _: []const u8) void {}
-    pub fn getLineJoin(_: *const RenderingContext2D) []const u8 {
-        return "miter";
-    }
-    pub fn setLineJoin(_: *RenderingContext2D, _: []const u8) void {}
-    pub fn getMiterLimit(_: *const RenderingContext2D) f64 {
-        return 10.0;
-    }
-    pub fn setMiterLimit(_: *RenderingContext2D, _: f64) void {}
-
-    pub fn clearRect(_: *RenderingContext2D, _: f64, _: f64, _: f64, _: f64) void {}
-    pub fn fillRect(_: *RenderingContext2D, _: f64, _: f64, _: f64, _: f64) void {}
-    pub fn strokeRect(_: *RenderingContext2D, _: f64, _: f64, _: f64, _: f64) void {}
-
-    pub fn beginPath(_: *RenderingContext2D) void {}
-    pub fn closePath(_: *RenderingContext2D) void {}
-    pub fn moveTo(_: *RenderingContext2D, _: f64, _: f64) void {}
-    pub fn lineTo(_: *RenderingContext2D, _: f64, _: f64) void {}
-    pub fn quadraticCurveTo(_: *RenderingContext2D, _: f64, _: f64, _: f64, _: f64) void {}
-    pub fn bezierCurveTo(_: *RenderingContext2D, _: f64, _: f64, _: f64, _: f64, _: f64, _: f64) void {}
-    pub fn arc(_: *RenderingContext2D, _: f64, _: f64, _: f64, _: f64, _: f64, _: ?bool) void {}
-    pub fn arcTo(_: *RenderingContext2D, _: f64, _: f64, _: f64, _: f64, _: f64) void {}
-    pub fn rect(_: *RenderingContext2D, _: f64, _: f64, _: f64, _: f64) void {}
-
-    pub fn fill(_: *RenderingContext2D) void {}
-    pub fn stroke(_: *RenderingContext2D) void {}
-    pub fn clip(_: *RenderingContext2D) void {}
-
-    pub fn getFont(_: *const RenderingContext2D) []const u8 {
-        return "10px sans-serif";
-    }
-    pub fn setFont(_: *RenderingContext2D, _: []const u8) void {}
-    pub fn getTextAlign(_: *const RenderingContext2D) []const u8 {
-        return "start";
-    }
-    pub fn setTextAlign(_: *RenderingContext2D, _: []const u8) void {}
-    pub fn getTextBaseline(_: *const RenderingContext2D) []const u8 {
-        return "alphabetic";
-    }
-    pub fn setTextBaseline(_: *RenderingContext2D, _: []const u8) void {}
-    pub fn fillText(_: *RenderingContext2D, _: []const u8, _: f64, _: f64, _: ?f64) void {}
-    pub fn strokeText(_: *RenderingContext2D, _: []const u8, _: f64, _: f64, _: ?f64) void {}
-
-    pub const JsApi = struct {
-        pub const bridge = js.Bridge(RenderingContext2D);
-
-        pub const Meta = struct {
-            pub const name = "CanvasRenderingContext2D";
-            pub const prototype_chain = bridge.prototypeChain();
-            pub var class_id: bridge.ClassId = undefined;
-        };
-
-        pub const save = bridge.function(RenderingContext2D.save, .{});
-        pub const restore = bridge.function(RenderingContext2D.restore, .{});
-
-        pub const scale = bridge.function(RenderingContext2D.scale, .{});
-        pub const rotate = bridge.function(RenderingContext2D.rotate, .{});
-        pub const translate = bridge.function(RenderingContext2D.translate, .{});
-        pub const transform = bridge.function(RenderingContext2D.transform, .{});
-        pub const setTransform = bridge.function(RenderingContext2D.setTransform, .{});
-        pub const resetTransform = bridge.function(RenderingContext2D.resetTransform, .{});
-
-        pub const globalAlpha = bridge.accessor(RenderingContext2D.getGlobalAlpha, RenderingContext2D.setGlobalAlpha, .{});
-        pub const globalCompositeOperation = bridge.accessor(RenderingContext2D.getGlobalCompositeOperation, RenderingContext2D.setGlobalCompositeOperation, .{});
-
-        pub const fillStyle = bridge.accessor(RenderingContext2D.getFillStyle, RenderingContext2D.setFillStyle, .{});
-        pub const strokeStyle = bridge.accessor(RenderingContext2D.getStrokeStyle, RenderingContext2D.setStrokeStyle, .{});
-
-        pub const lineWidth = bridge.accessor(RenderingContext2D.getLineWidth, RenderingContext2D.setLineWidth, .{});
-        pub const lineCap = bridge.accessor(RenderingContext2D.getLineCap, RenderingContext2D.setLineCap, .{});
-        pub const lineJoin = bridge.accessor(RenderingContext2D.getLineJoin, RenderingContext2D.setLineJoin, .{});
-        pub const miterLimit = bridge.accessor(RenderingContext2D.getMiterLimit, RenderingContext2D.setMiterLimit, .{});
-
-        pub const clearRect = bridge.function(RenderingContext2D.clearRect, .{});
-        pub const fillRect = bridge.function(RenderingContext2D.fillRect, .{});
-        pub const strokeRect = bridge.function(RenderingContext2D.strokeRect, .{});
-
-        pub const beginPath = bridge.function(RenderingContext2D.beginPath, .{});
-        pub const closePath = bridge.function(RenderingContext2D.closePath, .{});
-        pub const moveTo = bridge.function(RenderingContext2D.moveTo, .{});
-        pub const lineTo = bridge.function(RenderingContext2D.lineTo, .{});
-        pub const quadraticCurveTo = bridge.function(RenderingContext2D.quadraticCurveTo, .{});
-        pub const bezierCurveTo = bridge.function(RenderingContext2D.bezierCurveTo, .{});
-        pub const arc = bridge.function(RenderingContext2D.arc, .{});
-        pub const arcTo = bridge.function(RenderingContext2D.arcTo, .{});
-        pub const rect = bridge.function(RenderingContext2D.rect, .{});
-
-        pub const fill = bridge.function(RenderingContext2D.fill, .{});
-        pub const stroke = bridge.function(RenderingContext2D.stroke, .{});
-        pub const clip = bridge.function(RenderingContext2D.clip, .{});
-
-        pub const font = bridge.accessor(RenderingContext2D.getFont, RenderingContext2D.setFont, .{});
-        pub const textAlign = bridge.accessor(RenderingContext2D.getTextAlign, RenderingContext2D.setTextAlign, .{});
-        pub const textBaseline = bridge.accessor(RenderingContext2D.getTextBaseline, RenderingContext2D.setTextBaseline, .{});
-        pub const fillText = bridge.function(RenderingContext2D.fillText, .{});
-        pub const strokeText = bridge.function(RenderingContext2D.strokeText, .{});
-    };
-};
-
 pub fn asElement(self: *Canvas) *Element {
     return self._proto._proto;
 }
@@ -198,16 +59,25 @@ pub fn setHeight(self: *Canvas, value: u32, page: *Page) !void {
     try self.asElement().setAttributeSafe("height", str, page);
 }
 
-pub fn getContext(self: *Canvas, context_type: []const u8, page: *Page) !?*RenderingContext2D {
-    _ = self;
+/// Since there's no base class rendering contextes inherit from,
+/// we're using tagged union.
+const DrawingContext = union(enum) {
+    @"2d": *CanvasRenderingContext2D,
+    webgl: *WebGLRenderingContext,
+};
 
-    if (!std.mem.eql(u8, context_type, "2d")) {
-        return null;
+pub fn getContext(_: *Canvas, context_type: []const u8, page: *Page) !?DrawingContext {
+    if (std.mem.eql(u8, context_type, "2d")) {
+        const ctx = try page._factory.create(CanvasRenderingContext2D{});
+        return .{ .@"2d" = ctx };
     }
 
-    const ctx = try page.arena.create(RenderingContext2D);
-    ctx.* = .{};
-    return ctx;
+    if (std.mem.eql(u8, context_type, "webgl") or std.mem.eql(u8, context_type, "experimental-webgl")) {
+        const ctx = try page._factory.create(WebGLRenderingContext{});
+        return .{ .webgl = ctx };
+    }
+
+    return null;
 }
 
 pub const JsApi = struct {