LibWeb: Add CanvasPath arcTo support

Adds initial CanvasPath arcTo support for 2D rendering contexts
https://html.spec.whatwg.org/multipage/canvas.html#dom-context-2d-arcto

Userland/Libraries/LibGfx/Path.cpp

@@ -72,11 +72,7 @@ void Path::elliptical_arc_to(FloatPoint point, FloatSize radii, float x_axis_rot
     double x_axis_rotation_s;
     double x_axis_rotation_c;
     AK::sincos(static_cast<double>(x_axis_rotation), x_axis_rotation_s, x_axis_rotation_c);
-
-    // Find the last point
-    FloatPoint last_point { 0, 0 };
-    if (!m_segments.is_empty())
-        last_point = m_segments.last()->point();
+    FloatPoint last_point = this->last_point();
 
     // Step 1 of out-of-range radii correction
     if (rx == 0.0 || ry == 0.0) {
@@ -160,6 +156,13 @@ void Path::elliptical_arc_to(FloatPoint point, FloatSize radii, float x_axis_rot
         theta_1,
         theta_delta);
 }
+FloatPoint Path::last_point()
+{
+    FloatPoint last_point { 0, 0 };
+    if (!m_segments.is_empty())
+        last_point = m_segments.last()->point();
+    return last_point;
+}
 
 void Path::close()
 {
@@ -383,6 +386,14 @@ void Path::add_path(Path const& other)
     invalidate_split_lines();
 }
 
+void Path::ensure_subpath(FloatPoint point)
+{
+    if (m_need_new_subpath && m_segments.is_empty()) {
+        move_to(point);
+        m_need_new_subpath = false;
+    }
+}
+
 template<typename T>
 struct RoundTrip {
     RoundTrip(ReadonlySpan<T> span)

Userland/Libraries/LibGfx/Path.h

@@ -153,6 +153,8 @@ public:
         elliptical_arc_to(point, { radius, radius }, 0, large_arc, sweep);
     }
 
+    FloatPoint last_point();
+
     void close();
     void close_all_subpaths();
 
@@ -192,7 +194,7 @@ public:
 
     Path copy_transformed(AffineTransform const&) const;
     void add_path(Path const&);
-
+    void ensure_subpath(FloatPoint point);
     DeprecatedString to_deprecated_string() const;
 
     Path stroke_to_fill(float thickness) const;
@@ -217,6 +219,7 @@ private:
 
     Optional<Vector<FloatLine>> m_split_lines {};
     Optional<Gfx::FloatRect> m_bounding_box;
+    bool m_need_new_subpath = { true };
 };
 
 }

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

@@ -120,6 +120,78 @@ WebIDL::ExceptionOr<void> CanvasPath::ellipse(float x, float y, float radius_x,
     return {};
 }
 
+// https://html.spec.whatwg.org/multipage/canvas.html#dom-context-2d-arcto
+WebIDL::ExceptionOr<void> CanvasPath::arc_to(double x1, double y1, double x2, double y2, double radius)
+{
+    // 1. If any of the arguments are infinite or NaN, then return.
+    if (!isfinite(x1) || !isfinite(y1) || !isfinite(x2) || !isfinite(y2) || !isfinite(radius))
+        return {};
+
+    // 2. Ensure there is a subpath for (x1, y1).
+    auto transform = active_transform();
+    m_path.ensure_subpath(transform.map(Gfx::FloatPoint { x1, y1 }));
+
+    // 3. If radius is negative, then throw an "IndexSizeError" DOMException.
+    if (radius < 0)
+        return WebIDL::IndexSizeError::create(m_self->realm(), MUST(String::formatted("The radius provided ({}) is negative.", radius)));
+
+    // 4. Let the point (x0, y0) be the last point in the subpath,
+    //    transformed by the inverse of the current transformation matrix
+    //    (so that it is in the same coordinate system as the points passed to the method).
+    // Point (x0, y0)
+    auto p0 = m_path.last_point();
+    // Point (x1, y1)
+    auto p1 = transform.map(Gfx::FloatPoint { x1, y1 });
+    // Point (x2, y2)
+    auto p2 = transform.map(Gfx::FloatPoint { x2, y2 });
+
+    // 5. If the point (x0, y0) is equal to the point (x1, y1),
+    //    or if the point (x1, y1) is equal to the point (x2, y2),
+    //    or if radius is zero, then add the point (x1, y1) to the subpath,
+    //    and connect that point to the previous point (x0, y0) by a straight line.
+    if (p0 == p1 || p1 == p2 || radius == 0) {
+        m_path.line_to(p1);
+        return {};
+    }
+
+    auto v1 = Gfx::FloatVector2 { p0.x() - p1.x(), p0.y() - p1.y() };
+    auto v2 = Gfx::FloatVector2 { p2.x() - p1.x(), p2.y() - p1.y() };
+    auto cos_theta = v1.dot(v2) / (v1.length() * v2.length());
+    // 6. Otherwise, if the points (x0, y0), (x1, y1), and (x2, y2) all lie on a single straight line,
+    //    then add the point (x1, y1) to the subpath,
+    //    and connect that point to the previous point (x0, y0) by a straight line.
+    if (-1 == cos_theta || 1 == cos_theta) {
+        m_path.line_to(p1);
+        return {};
+    }
+
+    // 7. Otherwise, let The Arc be the shortest arc given by circumference of the circle that has radius radius,
+    // and that has one point tangent to the half-infinite line that crosses the point (x0, y0) and ends at the point (x1, y1),
+    // and that has a different point tangent to the half-infinite line that ends at the point (x1, y1) and crosses the point (x2, y2).
+    // The points at which this circle touches these two lines are called the start and end tangent points respectively.
+    auto adjacent = radius / static_cast<double>(tan(acos(cos_theta) / 2));
+    auto factor1 = adjacent / static_cast<double>(v1.length());
+    auto x3 = static_cast<double>(p1.x()) + factor1 * static_cast<double>(p0.x() - p1.x());
+    auto y3 = static_cast<double>(p1.y()) + factor1 * static_cast<double>(p0.y() - p1.y());
+    auto start_tangent = Gfx::FloatPoint { x3, y3 };
+
+    auto factor2 = adjacent / static_cast<double>(v2.length());
+    auto x4 = static_cast<double>(p1.x()) + factor2 * static_cast<double>(p2.x() - p1.x());
+    auto y4 = static_cast<double>(p1.y()) + factor2 * static_cast<double>(p2.y() - p1.y());
+    auto end_tangent = Gfx::FloatPoint { x4, y4 };
+
+    // Connect the point (x0, y0) to the start tangent point by a straight line, adding the start tangent point to the subpath.
+    m_path.line_to(start_tangent);
+
+    bool const large_arc = false; // always small since tangent points define arc endpoints and lines meet at (x1, y1)
+    auto cross_product = v1.x() * v2.y() - v1.y() * v2.x();
+    bool const sweep = cross_product < 0; // right-hand rule, true means clockwise
+
+    // and then connect the start tangent point to the end tangent point by The Arc, adding the end tangent point to the subpath.
+    m_path.arc_to(end_tangent, radius, large_arc, sweep);
+    return {};
+}
+
 void CanvasPath::rect(float x, float y, float width, float height)
 {
     auto transform = active_transform();

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

@@ -23,6 +23,7 @@ public:
     void line_to(float x, float y);
     void quadratic_curve_to(float cx, float cy, float x, float y);
     void bezier_curve_to(double cp1x, double cp1y, double cp2x, double cp2y, double x, double y);
+    WebIDL::ExceptionOr<void> arc_to(double x1, double y1, double x2, double y2, double radius);
     void rect(float x, float y, float width, float height);
     WebIDL::ExceptionOr<void> arc(float x, float y, float radius, float start_angle, float end_angle, bool counter_clockwise);
     WebIDL::ExceptionOr<void> ellipse(float x, float y, float radius_x, float radius_y, float rotation, float start_angle, float end_angle, bool counter_clockwise);

Userland/Libraries/LibWeb/HTML/Canvas/CanvasPath.idl

@@ -5,7 +5,7 @@ interface mixin CanvasPath {
     undefined lineTo(unrestricted double x, unrestricted double y);
     undefined quadraticCurveTo(unrestricted double cpx, unrestricted double cpy, unrestricted double x, unrestricted double y);
     undefined bezierCurveTo(unrestricted double cp1x, unrestricted double cp1y, unrestricted double cp2x, unrestricted double cp2y, unrestricted double x, unrestricted double y);
-    // FIXME: undefined arcTo(unrestricted double x1, unrestricted double y1, unrestricted double x2, unrestricted double y2, unrestricted double radius);
+    undefined arcTo(unrestricted double x1, unrestricted double y1, unrestricted double x2, unrestricted double y2, unrestricted double radius);
     undefined rect(unrestricted double x, unrestricted double y, unrestricted double width, unrestricted double height);
     // FIXME: undefined roundRect(unrestricted double x, unrestricted double y, unrestricted double w, unrestricted double h, optional (unrestricted double or DOMPointInit or sequence<(unrestricted double or DOMPointInit)>) radii = 0);
     undefined arc(unrestricted double x, unrestricted double y, unrestricted double radius, unrestricted double startAngle, unrestricted double endAngle, optional boolean counterclockwise = false);