diff --git a/Userland/Libraries/LibWeb/HTML/Canvas/CanvasFillStrokeStyles.h b/Userland/Libraries/LibWeb/HTML/Canvas/CanvasFillStrokeStyles.h
new file mode 100644
index 0000000000..0f0e773256
--- /dev/null
+++ b/Userland/Libraries/LibWeb/HTML/Canvas/CanvasFillStrokeStyles.h
@@ -0,0 +1,52 @@
+/*
+ * Copyright (c) 2020-2022, Andreas Kling
+ * Copyright (c) 2021-2022, Linus Groh
+ * Copyright (c) 2022, Sam Atkins
+ *
+ * SPDX-License-Identifier: BSD-2-Clause
+ */
+
+#pragma once
+
+#include
+#include
+
+namespace Web::HTML {
+
+// https://html.spec.whatwg.org/multipage/canvas.html#canvasfillstrokestyles
+template
+class CanvasFillStrokeStyles {
+public:
+ ~CanvasFillStrokeStyles() = default;
+
+ void set_fill_style(String style)
+ {
+ // FIXME: 2. If the given value is a CanvasPattern object that is marked as not origin-clean, then set this's origin-clean flag to false.
+ my_drawing_state().fill_style = Gfx::Color::from_string(style).value_or(Color::Black);
+ }
+
+ String fill_style() const
+ {
+ return my_drawing_state().fill_style.to_string();
+ }
+
+ void set_stroke_style(String style)
+ {
+ // FIXME: 2. If the given value is a CanvasPattern object that is marked as not origin-clean, then set this's origin-clean flag to false.
+ my_drawing_state().stroke_style = Gfx::Color::from_string(style).value_or(Color::Black);
+ }
+
+ String stroke_style() const
+ {
+ return my_drawing_state().stroke_style.to_string();
+ }
+
+protected:
+ CanvasFillStrokeStyles() = default;
+
+private:
+ CanvasState::DrawingState& my_drawing_state() { return reinterpret_cast(*this).drawing_state(); }
+ CanvasState::DrawingState const& my_drawing_state() const { return reinterpret_cast(*this).drawing_state(); }
+};
+
+}
diff --git a/Userland/Libraries/LibWeb/HTML/Canvas/CanvasFillStrokeStyles.idl b/Userland/Libraries/LibWeb/HTML/Canvas/CanvasFillStrokeStyles.idl
new file mode 100644
index 0000000000..45b393c7cf
--- /dev/null
+++ b/Userland/Libraries/LibWeb/HTML/Canvas/CanvasFillStrokeStyles.idl
@@ -0,0 +1,13 @@
+#import
+
+// https://html.spec.whatwg.org/multipage/canvas.html#canvasfillstrokestyles
+interface mixin CanvasFillStrokeStyles {
+ // FIXME: Should be `(DOMString or CanvasGradient or CanvasPattern)`
+ attribute DOMString strokeStyle;
+ // FIXME: Should be `(DOMString or CanvasGradient or CanvasPattern)`
+ attribute DOMString fillStyle;
+ CanvasGradient createLinearGradient(double x0, double y0, double x1, double y1);
+ CanvasGradient createRadialGradient(double x0, double y0, double r0, double x1, double y1, double r1);
+ CanvasGradient createConicGradient(double startAngle, double x, double y);
+ // FIXME: CanvasPattern? createPattern(CanvasImageSource image, [LegacyNullToEmptyString] DOMString repetition);
+};
diff --git a/Userland/Libraries/LibWeb/HTML/CanvasRenderingContext2D.cpp b/Userland/Libraries/LibWeb/HTML/CanvasRenderingContext2D.cpp
index d20449d17e..98bb90d309 100644
--- a/Userland/Libraries/LibWeb/HTML/CanvasRenderingContext2D.cpp
+++ b/Userland/Libraries/LibWeb/HTML/CanvasRenderingContext2D.cpp
@@ -46,17 +46,6 @@ NonnullRefPtr CanvasRenderingContext2D::canvas_for_binding()
return canvas_element();
}
-void CanvasRenderingContext2D::set_fill_style(String style)
-{
- // FIXME: 2. If the given value is a CanvasPattern object that is marked as not origin-clean, then set this's origin-clean flag to false.
- drawing_state().fill_style = Gfx::Color::from_string(style).value_or(Color::Black);
-}
-
-String CanvasRenderingContext2D::fill_style() const
-{
- return drawing_state().fill_style.to_string();
-}
-
void CanvasRenderingContext2D::fill_rect(float x, float y, float width, float height)
{
auto painter = this->painter();
@@ -81,17 +70,6 @@ void CanvasRenderingContext2D::clear_rect(float x, float y, float width, float h
did_draw(rect);
}
-void CanvasRenderingContext2D::set_stroke_style(String style)
-{
- // FIXME: 2. If the given value is a CanvasPattern object that is marked as not origin-clean, then set this's origin-clean flag to false.
- drawing_state().stroke_style = Gfx::Color::from_string(style).value_or(Color::Black);
-}
-
-String CanvasRenderingContext2D::stroke_style() const
-{
- return drawing_state().stroke_style.to_string();
-}
-
void CanvasRenderingContext2D::stroke_rect(float x, float y, float width, float height)
{
auto painter = this->painter();
diff --git a/Userland/Libraries/LibWeb/HTML/CanvasRenderingContext2D.h b/Userland/Libraries/LibWeb/HTML/CanvasRenderingContext2D.h
index ee4c1f2b9c..e442a1ebcc 100644
--- a/Userland/Libraries/LibWeb/HTML/CanvasRenderingContext2D.h
+++ b/Userland/Libraries/LibWeb/HTML/CanvasRenderingContext2D.h
@@ -16,6 +16,7 @@
#include
#include
#include
+#include
#include
#include
#include
@@ -34,7 +35,8 @@ class CanvasRenderingContext2D
, public Bindings::Wrappable
, public CanvasPath
, public CanvasState
- , public CanvasTransform {
+ , public CanvasTransform
+ , public CanvasFillStrokeStyles {
AK_MAKE_NONCOPYABLE(CanvasRenderingContext2D);
AK_MAKE_NONMOVABLE(CanvasRenderingContext2D);
@@ -45,12 +47,6 @@ public:
static NonnullRefPtr create(HTMLCanvasElement& element) { return adopt_ref(*new CanvasRenderingContext2D(element)); }
~CanvasRenderingContext2D();
- void set_fill_style(String);
- String fill_style() const;
-
- void set_stroke_style(String);
- String stroke_style() const;
-
void fill_rect(float x, float y, float width, float height);
void stroke_rect(float x, float y, float width, float height);
void clear_rect(float x, float y, float width, float height);
diff --git a/Userland/Libraries/LibWeb/HTML/CanvasRenderingContext2D.idl b/Userland/Libraries/LibWeb/HTML/CanvasRenderingContext2D.idl
index 8191f524ae..2a7de9dffd 100644
--- a/Userland/Libraries/LibWeb/HTML/CanvasRenderingContext2D.idl
+++ b/Userland/Libraries/LibWeb/HTML/CanvasRenderingContext2D.idl
@@ -2,7 +2,7 @@
#import
#import
#import
-#import
+#import
#import
#import
#import
@@ -31,8 +31,6 @@ interface CanvasRenderingContext2D {
undefined drawImage((HTMLImageElement or HTMLCanvasElement) image, double dx, double dy, double dw, double dh);
undefined drawImage((HTMLImageElement or HTMLCanvasElement) image, double sx, double sy, double sw, double sh, double dx, double dy, double dw, double dh);
- attribute DOMString fillStyle;
- attribute DOMString strokeStyle;
attribute double lineWidth;
ImageData createImageData(long sw, long sh);
@@ -43,10 +41,6 @@ interface CanvasRenderingContext2D {
TextMetrics measureText(DOMString text);
- CanvasGradient createRadialGradient(double x0, double y0, double r0, double x1, double y1, double r1);
- CanvasGradient createLinearGradient(double x0, double y0, double x1, double y1);
- CanvasGradient createConicGradient(double startAngle, double x, double y);
-
// undefined clip(optional CanvasFillRule fillRule = "nonzero");
// undefined clip(Path2D path, optional CanvasFillRule fillRule = "nonzero");
// FIXME: Replace this with the two definitions above.
@@ -56,4 +50,5 @@ interface CanvasRenderingContext2D {
CanvasRenderingContext2D includes CanvasState;
CanvasRenderingContext2D includes CanvasTransform;
+CanvasRenderingContext2D includes CanvasFillStrokeStyles;
CanvasRenderingContext2D includes CanvasPath;