LibWeb: Implement the canvas gradients

This gets:

- CanvasRenderingContext2D.createLinearGradient()
- CanvasRenderingContext2D.createConicGradient()
- CanvasRenderingContext2D.createRadialGradient()

Actually working as fill styles for paths and rectangles :^)
Getting them working for strokes is left as an exercise is
left as an exercise for the reader.

Userland/Libraries/LibWeb/HTML/Canvas/CanvasState.cpp

@@ -42,7 +42,15 @@ bool CanvasState::is_context_lost()
 
 NonnullRefPtr<Gfx::PaintStyle> CanvasState::FillOrStrokeStyle::to_gfx_paint_style()
 {
- VERIFY_NOT_REACHED();
+ return m_fill_or_stoke_style.visit(
+ [&](Gfx::Color color) -> NonnullRefPtr<Gfx::PaintStyle> {
+ if (!m_color_paint_style)
+ m_color_paint_style = Gfx::SolidColorPaintStyle::create(color);
+ return m_color_paint_style.release_nonnull();
+ },
+ [&](JS::Handle<CanvasGradient> gradient) {
+ return gradient->to_gfx_paint_style();
+ });
 }
 
 Gfx::Color CanvasState::FillOrStrokeStyle::to_color_but_fixme_should_accept_any_paint_style() const

Userland/Libraries/LibWeb/HTML/Canvas/CanvasState.h

@@ -53,7 +53,7 @@ class CanvasState {
 
  private:
  FillOrStrokeVariant m_fill_or_stoke_style;
- RefPtr<Gfx::PaintStyle> m_color_fill_style { nullptr };
+ RefPtr<Gfx::PaintStyle> m_color_paint_style { nullptr };
  };
 
  // https://html.spec.whatwg.org/multipage/canvas.html#drawing-state

Userland/Libraries/LibWeb/HTML/CanvasGradient.cpp

@@ -1,5 +1,6 @@
 /*
  * Copyright (c) 2022, Andreas Kling <[email protected]>
+ * Copyright (c) 2023, MacDue <[email protected]>
  *
  * SPDX-License-Identifier: BSD-2-Clause
  */
@@ -13,35 +14,25 @@ namespace Web::HTML {
 
 JS::NonnullGCPtr<CanvasGradient> CanvasGradient::create_radial(JS::Realm& realm, double x0, double y0, double r0, double x1, double y1, double r1)
 {
- (void)x0;
- (void)y0;
- (void)r0;
- (void)x1;
- (void)y1;
- (void)r1;
- return realm.heap().allocate<CanvasGradient>(realm, realm, Type::Radial);
+ auto radial_gradient = Gfx::CanvasRadialGradientPaintStyle::create(Gfx::FloatPoint { x0, y0 }, r0, Gfx::FloatPoint { x1, y1 }, r1);
+ return realm.heap().allocate<CanvasGradient>(realm, realm, *radial_gradient);
 }
 
 JS::NonnullGCPtr<CanvasGradient> CanvasGradient::create_linear(JS::Realm& realm, double x0, double y0, double x1, double y1)
 {
- (void)x0;
- (void)y0;
- (void)x1;
- (void)y1;
- return realm.heap().allocate<CanvasGradient>(realm, realm, Type::Linear);
+ auto linear_gradient = Gfx::CanvasLinearGradientPaintStyle::create(Gfx::FloatPoint { x0, y0 }, Gfx::FloatPoint { x1, y1 });
+ return realm.heap().allocate<CanvasGradient>(realm, realm, *linear_gradient);
 }
 
 JS::NonnullGCPtr<CanvasGradient> CanvasGradient::create_conic(JS::Realm& realm, double start_angle, double x, double y)
 {
- (void)start_angle;
- (void)x;
- (void)y;
- return realm.heap().allocate<CanvasGradient>(realm, realm, Type::Conic);
+ auto conic_gradient = Gfx::CanvasConicGradientPaintStyle::create(Gfx::FloatPoint { x, y }, start_angle);
+ return realm.heap().allocate<CanvasGradient>(realm, realm, *conic_gradient);
 }
 
-CanvasGradient::CanvasGradient(JS::Realm& realm, Type type)
+CanvasGradient::CanvasGradient(JS::Realm& realm, Gfx::GradientPaintStyle& gradient)
  : PlatformObject(realm)
- , m_type(type)
+ , m_gradient(gradient)
 {
 }
 
@@ -68,12 +59,11 @@ WebIDL::ExceptionOr<void> CanvasGradient::add_color_stop(double offset, Deprecat
  return WebIDL::SyntaxError::create(realm(), "Could not parse color for CanvasGradient");
 
  // 4. Place a new stop on the gradient, at offset offset relative to the whole gradient, and with the color parsed color.
- m_color_stops.append(ColorStop { offset, parsed_color.value() });
+ m_gradient->add_color_stop(offset, parsed_color.value());
 
  // FIXME: If multiple stops are added at the same offset on a gradient, then they must be placed in the order added,
  // with the first one closest to the start of the gradient, and each subsequent one infinitesimally further along
  // towards the end point (in effect causing all but the first and last stop added at each point to be ignored).
- quick_sort(m_color_stops, [](auto& a, auto& b) { return a.offset < b.offset; });
 
  return {};
 }

Userland/Libraries/LibWeb/HTML/CanvasGradient.h

@@ -1,12 +1,13 @@
 /*
  * Copyright (c) 2022, Andreas Kling <[email protected]>
+ * Copyright (c) 2023, MacDue <[email protected]>
  *
  * SPDX-License-Identifier: BSD-2-Clause
  */
 
 #pragma once
 
-#include <LibGfx/Color.h>
+#include <LibGfx/PaintStyle.h>
 #include <LibWeb/Bindings/PlatformObject.h>
 
 namespace Web::HTML {
@@ -15,12 +16,6 @@ class CanvasGradient final : public Bindings::PlatformObject {
  WEB_PLATFORM_OBJECT(CanvasGradient, Bindings::PlatformObject);
 
 public:
- enum class Type {
- Linear,
- Radial,
- Conic,
- };
-
  static JS::NonnullGCPtr<CanvasGradient> create_radial(JS::Realm&, double x0, double y0, double r0, double x1, double y1, double r1);
  static JS::NonnullGCPtr<CanvasGradient> create_linear(JS::Realm&, double x0, double y0, double x1, double y1);
  static JS::NonnullGCPtr<CanvasGradient> create_conic(JS::Realm&, double start_angle, double x, double y);
@@ -29,19 +24,14 @@ class CanvasGradient final : public Bindings::PlatformObject {
 
  ~CanvasGradient();
 
+ NonnullRefPtr<Gfx::PaintStyle> to_gfx_paint_style() { return m_gradient; }
+
 private:
- CanvasGradient(JS::Realm&, Type);
+ CanvasGradient(JS::Realm&, Gfx::GradientPaintStyle& gradient);
 
  virtual void initialize(JS::Realm&) override;
 
- Type m_type {};
-
- struct ColorStop {
- double offset { 0 };
- Gfx::Color color;
- };
-
- Vector<ColorStop> m_color_stops;
+ NonnullRefPtr<Gfx::GradientPaintStyle> m_gradient;
 };
 
 }