Merge pull request #2003 from lightpanda-io/nikneym/canvas-access-canvas

`CanvasRenderingContext2D`: make canvas able to access canvas element

src/browser/tests/canvas/canvas_rendering_context_2d.html

@@ -125,6 +125,19 @@
 </script>
 
 
+<script id="CanvasRenderingContext2D#canvas">
+{
+  const element = document.createElement("canvas");
+  const ctx = element.getContext("2d");
+  testing.expectEqual(ctx.canvas, element);
+  // Setting dimensions via ctx.canvas should update the element.
+  ctx.canvas.width = 40;
+  ctx.canvas.height = 25;
+  testing.expectEqual(element.width, 40);
+  testing.expectEqual(element.height, 25);
+}
+</script>
+
 <script id="getter">
 {
   const element = document.createElement("canvas");

src/browser/webapi/canvas/CanvasRenderingContext2D.zig

@@ -23,16 +23,24 @@ const js = @import("../../js/js.zig");
 const color = @import("../../color.zig");
 const Page = @import("../../Page.zig");
 
+const Canvas = @import("../element/html/Canvas.zig");
 const ImageData = @import("../ImageData.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();
+/// Reference to the parent canvas element.
+/// https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/canvas
+_canvas: *Canvas,
 /// Fill color.
 /// TODO: Add support for `CanvasGradient` and `CanvasPattern`.
 _fill_style: color.RGBA = color.RGBA.Named.black,
 
+pub fn getCanvas(self: *const CanvasRenderingContext2D) *Canvas {
+    return self._canvas;
+}
+
 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);
@@ -125,6 +133,7 @@ pub const JsApi = struct {
         pub var class_id: bridge.ClassId = undefined;
     };
 
+    pub const canvas = bridge.accessor(CanvasRenderingContext2D.getCanvas, null, .{});
     pub const font = bridge.property("10px sans-serif", .{ .template = false, .readonly = false });
     pub const globalAlpha = bridge.property(1.0, .{ .template = false, .readonly = false });
     pub const globalCompositeOperation = bridge.property("source-over", .{ .template = false, .readonly = false });

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

@@ -67,9 +67,9 @@ const DrawingContext = union(enum) {
     webgl: *WebGLRenderingContext,
 };
 
-pub fn getContext(_: *Canvas, context_type: []const u8, page: *Page) !?DrawingContext {
+pub fn getContext(self: *Canvas, context_type: []const u8, page: *Page) !?DrawingContext {
     if (std.mem.eql(u8, context_type, "2d")) {
-        const ctx = try page._factory.create(CanvasRenderingContext2D{});
+        const ctx = try page._factory.create(CanvasRenderingContext2D{ ._canvas = self });
         return .{ .@"2d" = ctx };
     }