From 83e9d705cf7115b7ee7e0fec1d4d24fd06722b2f Mon Sep 17 00:00:00 2001 From: Halil Durak Date: Sun, 4 Jan 2026 21:23:25 +0300 Subject: [PATCH 1/4] backport dummy canvas APIs --- src/browser/color.zig | 282 ++++++++++++++++++ src/browser/js/bridge.zig | 2 + .../canvas/canvas_rendering_context_2d.html | 35 +++ .../tests/canvas/webgl_rendering_context.html | 83 ++++++ .../canvas/CanvasRenderingContext2D.zig | 79 +++++ .../webapi/canvas/WebGLRenderingContext.zig | 173 +++++++++++ .../webapi/css/CSSStyleDeclaration.zig | 18 ++ 7 files changed, 672 insertions(+) create mode 100644 src/browser/color.zig create mode 100644 src/browser/tests/canvas/canvas_rendering_context_2d.html create mode 100644 src/browser/tests/canvas/webgl_rendering_context.html create mode 100644 src/browser/webapi/canvas/CanvasRenderingContext2D.zig create mode 100644 src/browser/webapi/canvas/WebGLRenderingContext.zig diff --git a/src/browser/color.zig b/src/browser/color.zig new file mode 100644 index 00000000..610bd3ed --- /dev/null +++ b/src/browser/color.zig @@ -0,0 +1,282 @@ +// Copyright (C) 2023-2025 Lightpanda (Selecy SAS) +// +// Francis Bouvier +// Pierre Tachoire +// +// 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 . + +const std = @import("std"); +const Io = std.Io; + +const isHexColor = @import("webapi/css/CSSStyleDeclaration.zig").isHexColor; + +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; + } +}; diff --git a/src/browser/js/bridge.zig b/src/browser/js/bridge.zig index 01a87317..d24b07ac 100644 --- a/src/browser/js/bridge.zig +++ b/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"), }); diff --git a/src/browser/tests/canvas/canvas_rendering_context_2d.html b/src/browser/tests/canvas/canvas_rendering_context_2d.html new file mode 100644 index 00000000..22bcaa20 --- /dev/null +++ b/src/browser/tests/canvas/canvas_rendering_context_2d.html @@ -0,0 +1,35 @@ + + + + + + diff --git a/src/browser/tests/canvas/webgl_rendering_context.html b/src/browser/tests/canvas/webgl_rendering_context.html new file mode 100644 index 00000000..5858ee92 --- /dev/null +++ b/src/browser/tests/canvas/webgl_rendering_context.html @@ -0,0 +1,83 @@ + + + + + + diff --git a/src/browser/webapi/canvas/CanvasRenderingContext2D.zig b/src/browser/webapi/canvas/CanvasRenderingContext2D.zig new file mode 100644 index 00000000..e13c3d64 --- /dev/null +++ b/src/browser/webapi/canvas/CanvasRenderingContext2D.zig @@ -0,0 +1,79 @@ +// Copyright (C) 2023-2025 Lightpanda (Selecy SAS) +// +// Francis Bouvier +// Pierre Tachoire +// +// 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 . + +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 fillRect( + self: *const CanvasRenderingContext2D, + x: f64, + y: f64, + width: f64, + height: f64, +) void { + _ = self; + _ = x; + _ = y; + _ = width; + _ = height; +} + +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 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 fillStyle = bridge.accessor(CanvasRenderingContext2D.getFillStyle, CanvasRenderingContext2D.setFillStyle, .{}); + pub const fillRect = bridge.function(CanvasRenderingContext2D.fillRect, .{}); +}; + +const testing = @import("../../../testing.zig"); +test "WebApi: CanvasRenderingContext2D" { + try testing.htmlRunner("canvas/canvas_rendering_context_2d.html", .{}); +} diff --git a/src/browser/webapi/canvas/WebGLRenderingContext.zig b/src/browser/webapi/canvas/WebGLRenderingContext.zig new file mode 100644 index 00000000..bdafce3a --- /dev/null +++ b/src/browser/webapi/canvas/WebGLRenderingContext.zig @@ -0,0 +1,173 @@ +// Copyright (C) 2023-2025 Lightpanda (Selecy SAS) +// +// Francis Bouvier +// Pierre Tachoire +// +// 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 . + +const std = @import("std"); + +const js = @import("../../js/js.zig"); + +pub fn registerTypes() []const type { + return &.{ + WebGLRenderingContext, + //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 { + pub const UNMASKED_VENDOR_WEBGL: u64 = 0x9245; + pub const UNMASKED_RENDERER_WEBGL: u64 = 0x9246; + + pub fn get_UNMASKED_VENDOR_WEBGL() u64 { + return UNMASKED_VENDOR_WEBGL; + } + + pub fn get_UNMASKED_RENDERER_WEBGL() u64 { + return UNMASKED_RENDERER_WEBGL; + } + }; + + pub const WEBGL_lose_context = struct { + _: u8 = 0, + pub fn _loseContext(_: *const WEBGL_lose_context) void {} + pub fn _restoreContext(_: *const WEBGL_lose_context) void {} + }; + }; +}; + +/// Enables a WebGL extension. +pub fn getExtension(self: *const WebGLRenderingContext, name: []const u8) ?Extension { + _ = self; + + const tag = Extension.find(name) orelse return null; + + return switch (tag) { + .WEBGL_debug_renderer_info => @unionInit(Extension, "WEBGL_debug_renderer_info", .{}), + .WEBGL_lose_context => @unionInit(Extension, "WEBGL_lose_context", .{}), + 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 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", .{}); +} diff --git a/src/browser/webapi/css/CSSStyleDeclaration.zig b/src/browser/webapi/css/CSSStyleDeclaration.zig index d50aed32..ec986ea7 100644 --- a/src/browser/webapi/css/CSSStyleDeclaration.zig +++ b/src/browser/webapi/css/CSSStyleDeclaration.zig @@ -246,6 +246,24 @@ fn isInlineTag(tag_name: []const u8) bool { return false; } +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; +} + fn getDefaultColor(element: *const Element) []const u8 { switch (element._type) { .html => |html| { From 7184a91c950c96fa9847bef9c1a373090e572415 Mon Sep 17 00:00:00 2001 From: Halil Durak Date: Fri, 9 Jan 2026 19:46:11 +0300 Subject: [PATCH 2/4] finalize canvas backport --- .../tests/canvas/webgl_rendering_context.html | 8 +- .../canvas/CanvasRenderingContext2D.zig | 132 ++++++++++++-- .../webapi/canvas/WebGLRenderingContext.zig | 71 ++++++-- src/browser/webapi/element/html/Canvas.zig | 166 ++---------------- 4 files changed, 200 insertions(+), 177 deletions(-) diff --git a/src/browser/tests/canvas/webgl_rendering_context.html b/src/browser/tests/canvas/webgl_rendering_context.html index 5858ee92..24bad4fd 100644 --- a/src/browser/tests/canvas/webgl_rendering_context.html +++ b/src/browser/tests/canvas/webgl_rendering_context.html @@ -66,8 +66,12 @@ const rendererInfo = ctx.getExtension("WEBGL_debug_renderer_info"); testing.expectEqual(true, rendererInfo instanceof WEBGL_debug_renderer_info); - testing.expectEqual(rendererInfo.UNMASKED_VENDOR_WEBGL, 0x9245); - testing.expectEqual(rendererInfo.UNMASKED_RENDERER_WEBGL, 0x9246); + 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 diff --git a/src/browser/webapi/canvas/CanvasRenderingContext2D.zig b/src/browser/webapi/canvas/CanvasRenderingContext2D.zig index e13c3d64..c7b7bde6 100644 --- a/src/browser/webapi/canvas/CanvasRenderingContext2D.zig +++ b/src/browser/webapi/canvas/CanvasRenderingContext2D.zig @@ -31,20 +31,6 @@ const CanvasRenderingContext2D = @This(); /// TODO: Add support for `CanvasGradient` and `CanvasPattern`. fill_style: color.RGBA = color.RGBA.Named.black, -pub fn fillRect( - self: *const CanvasRenderingContext2D, - x: f64, - y: f64, - width: f64, - height: f64, -) void { - _ = self; - _ = x; - _ = y; - _ = width; - _ = height; -} - 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); @@ -59,6 +45,82 @@ pub fn setFillStyle( 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); @@ -69,8 +131,50 @@ pub const JsApi = struct { 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"); diff --git a/src/browser/webapi/canvas/WebGLRenderingContext.zig b/src/browser/webapi/canvas/WebGLRenderingContext.zig index bdafce3a..2e3ac485 100644 --- a/src/browser/webapi/canvas/WebGLRenderingContext.zig +++ b/src/browser/webapi/canvas/WebGLRenderingContext.zig @@ -19,12 +19,15 @@ const std = @import("std"); const js = @import("../../js/js.zig"); +const Page = @import("../../Page.zig"); pub fn registerTypes() []const type { return &.{ WebGLRenderingContext, - //Extension.Type.WEBGL_debug_renderer_info, - //Extension.Type.WEBGL_lose_context, + // Extension types should be runtime generated. We might want + // to revisit this. + Extension.Type.WEBGL_debug_renderer_info, + Extension.Type.WEBGL_lose_context, }; } @@ -66,11 +69,11 @@ pub const Extension = union(enum) { 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_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_lose_context: *Type.WEBGL_lose_context, WEBGL_multi_draw: void, WEBGL_polygon_mode: void, @@ -115,35 +118,76 @@ pub const Extension = union(enum) { /// 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 get_UNMASKED_VENDOR_WEBGL() u64 { + pub fn getUnmaskedVendorWebGL(_: *const WEBGL_debug_renderer_info) u64 { return UNMASKED_VENDOR_WEBGL; } - pub fn get_UNMASKED_RENDERER_WEBGL() u64 { + 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 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, .{}); + }; }; }; }; -/// Enables a WebGL extension. -pub fn getExtension(self: *const WebGLRenderingContext, name: []const u8) ?Extension { - _ = self; +/// 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 => @unionInit(Extension, "WEBGL_debug_renderer_info", .{}), - .WEBGL_lose_context => @unionInit(Extension, "WEBGL_lose_context", .{}), + .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), {}), }; } @@ -163,6 +207,7 @@ pub const JsApi = struct { 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, .{}); }; diff --git a/src/browser/webapi/element/html/Canvas.zig b/src/browser/webapi/element/html/Canvas.zig index eb60befd..8e973e09 100644 --- a/src/browser/webapi/element/html/Canvas.zig +++ b/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 { From 6ff6232316956d63b58a6239d9a50ad21109e6f7 Mon Sep 17 00:00:00 2001 From: Halil Durak Date: Sat, 10 Jan 2026 14:13:09 +0300 Subject: [PATCH 3/4] move `isHexColor` to `color.zig` --- src/browser/color.zig | 18 +++++++++++++++++- src/browser/webapi/css/CSSStyleDeclaration.zig | 18 ------------------ 2 files changed, 17 insertions(+), 19 deletions(-) diff --git a/src/browser/color.zig b/src/browser/color.zig index 610bd3ed..1b5c8293 100644 --- a/src/browser/color.zig +++ b/src/browser/color.zig @@ -19,7 +19,23 @@ const std = @import("std"); const Io = std.Io; -const isHexColor = @import("webapi/css/CSSStyleDeclaration.zig").isHexColor; +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, diff --git a/src/browser/webapi/css/CSSStyleDeclaration.zig b/src/browser/webapi/css/CSSStyleDeclaration.zig index ec986ea7..d50aed32 100644 --- a/src/browser/webapi/css/CSSStyleDeclaration.zig +++ b/src/browser/webapi/css/CSSStyleDeclaration.zig @@ -246,24 +246,6 @@ fn isInlineTag(tag_name: []const u8) bool { return false; } -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; -} - fn getDefaultColor(element: *const Element) []const u8 { switch (element._type) { .html => |html| { From ee4775eb1a314d65a7f6ec611a28feb5115f9981 Mon Sep 17 00:00:00 2001 From: Halil Durak Date: Sat, 10 Jan 2026 14:13:41 +0300 Subject: [PATCH 4/4] prefer underscore on fields --- src/browser/webapi/canvas/CanvasRenderingContext2D.zig | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/browser/webapi/canvas/CanvasRenderingContext2D.zig b/src/browser/webapi/canvas/CanvasRenderingContext2D.zig index c7b7bde6..0c5ca1e7 100644 --- a/src/browser/webapi/canvas/CanvasRenderingContext2D.zig +++ b/src/browser/webapi/canvas/CanvasRenderingContext2D.zig @@ -29,11 +29,11 @@ const Page = @import("../../Page.zig"); const CanvasRenderingContext2D = @This(); /// Fill color. /// TODO: Add support for `CanvasGradient` and `CanvasPattern`. -fill_style: color.RGBA = color.RGBA.Named.black, +_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); + try self._fill_style.format(&w.writer); return w.written(); } @@ -42,7 +42,7 @@ pub fn setFillStyle( value: []const u8, ) !void { // Prefer the same fill_style if fails. - self.fill_style = color.RGBA.parse(value) catch self.fill_style; + self._fill_style = color.RGBA.parse(value) catch self._fill_style; } pub fn getGlobalAlpha(_: *const CanvasRenderingContext2D) f64 {