From 0a55679de465d770767de36da8fefb573644d86e Mon Sep 17 00:00:00 2001
From: AnotherTest <ali.mpfard@gmail.com>
Date: Tue, 5 May 2020 06:54:26 +0430
Subject: [PATCH] LibWeb: Add canvas.quadraticCurveTo()

Also adds a test, and removes debug spam :tm:
---
 .../anon/www/canvas-path-quadratic-curve.html | 44 +++++++++++++++++++
 Base/home/anon/www/welcome.html               |  1 +
 Libraries/LibGfx/Path.cpp                     |  4 ++
 .../CanvasRenderingContext2DWrapper.cpp       | 14 ++++++
 .../CanvasRenderingContext2DWrapper.h         |  1 +
 .../LibWeb/DOM/CanvasRenderingContext2D.cpp   |  7 ++-
 .../LibWeb/DOM/CanvasRenderingContext2D.h     |  1 +
 7 files changed, 70 insertions(+), 2 deletions(-)
 create mode 100644 Base/home/anon/www/canvas-path-quadratic-curve.html
diff --git a/Base/home/anon/www/canvas-path-quadratic-curve.html b/Base/home/anon/www/canvas-path-quadratic-curve.html
new file mode 100644
index 0000000000..88e05239c2
--- /dev/null
+++ b/Base/home/anon/www/canvas-path-quadratic-curve.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>canvas path - quadratic curve example</title>
+</head>
+<body>
+<canvas width=500 height=500></canvas>
+<script>
+
+function drawSomeCurves() {
+
+var canvas = document.querySelectorAll("canvas")[0];
+var ctx = canvas.getContext("2d");
+var x = 150;
+var y = 150;
+
+canvas.addEventListener("mousedown", function(e) {
+    x = e.offsetX;
+    y = e.offsetY;
+});
+
+canvas.addEventListener("mousemove", function(e) {
+    ctx.beginPath();
+    ctx.fillStyle = 'white';
+    ctx.fillRect(0, 0, 500, 500);
+
+    ctx.strokeStyle = 'red';
+
+    ctx.lineWidth = 1;
+
+    ctx.fillRect(0, 0, 500, 500);
+
+    ctx.moveTo(0, 0);
+    ctx.quadraticCurveTo(e.offsetX, e.offsetY, x, y);
+    ctx.stroke();
+});
+
+}
+
+drawSomeCurves();
+
+</script>
+</body>
+</html>
diff --git a/Base/home/anon/www/welcome.html b/Base/home/anon/www/welcome.html
index 77b1747388..d9ed0eb87a 100644
--- a/Base/home/anon/www/welcome.html
+++ b/Base/home/anon/www/welcome.html
@@ -28,6 +28,7 @@ span#ua {
     <p>Your user agent is: <b><span id="ua"></span></b></p>
     <p>Some small test pages:</p>
     <ul>
+        <li><a href="canvas-path-quadratic-curve.html">canvas path quadratic curve test</a></li>
         <li><a href="pngsuite_siz_png.html">pngsuite odd sizes test</a></li>
         <li><a href="pngsuite_bas_png.html">pngsuite basic formats test</a></li>
         <li><a href="canvas-path.html">canvas path house!</a></li>
diff --git a/Libraries/LibGfx/Path.cpp b/Libraries/LibGfx/Path.cpp
index da6c9358db..fa06b904f7 100644
--- a/Libraries/LibGfx/Path.cpp
+++ b/Libraries/LibGfx/Path.cpp
@@ -68,6 +68,10 @@ String Path::to_string() const
         }
         builder.append('(');
         builder.append(segment.point.to_string());
+        if (segment.through.has_value()) {
+            builder.append(", ");
+            builder.append(segment.through.value().to_string());
+        }
         builder.append(')');
 
         builder.append(' ');
diff --git a/Libraries/LibWeb/Bindings/CanvasRenderingContext2DWrapper.cpp b/Libraries/LibWeb/Bindings/CanvasRenderingContext2DWrapper.cpp
index 7bd496a139..bc3bfd4629 100644
--- a/Libraries/LibWeb/Bindings/CanvasRenderingContext2DWrapper.cpp
+++ b/Libraries/LibWeb/Bindings/CanvasRenderingContext2DWrapper.cpp
@@ -63,6 +63,7 @@ CanvasRenderingContext2DWrapper::CanvasRenderingContext2DWrapper(CanvasRendering
     put_native_function("stroke", stroke, 0);
     put_native_function("moveTo", move_to, 2);
     put_native_function("lineTo", line_to, 2);
+    put_native_function("quadraticCurveTo", quadratic_curve_to, 4);
 
     put_native_function("createImageData", create_image_data, 1);
     put_native_function("putImageData", put_image_data, 3);
@@ -240,6 +241,19 @@ JS::Value CanvasRenderingContext2DWrapper::line_to(JS::Interpreter& interpreter)
     return JS::js_undefined();
 }
 
+JS::Value CanvasRenderingContext2DWrapper::quadratic_curve_to(JS::Interpreter& interpreter)
+{
+    auto* impl = impl_from(interpreter);
+    if (!impl)
+        return {};
+    double cx = interpreter.argument(0).to_double();
+    double cy = interpreter.argument(1).to_double();
+    double x = interpreter.argument(2).to_double();
+    double y = interpreter.argument(3).to_double();
+    impl->quadratic_curve_to(cx, cy, x, y);
+    return JS::js_undefined();
+}
+
 JS::Value CanvasRenderingContext2DWrapper::create_image_data(JS::Interpreter& interpreter)
 {
     auto* impl = impl_from(interpreter);
diff --git a/Libraries/LibWeb/Bindings/CanvasRenderingContext2DWrapper.h b/Libraries/LibWeb/Bindings/CanvasRenderingContext2DWrapper.h
index 310f0c2588..c6872fc9a2 100644
--- a/Libraries/LibWeb/Bindings/CanvasRenderingContext2DWrapper.h
+++ b/Libraries/LibWeb/Bindings/CanvasRenderingContext2DWrapper.h
@@ -58,6 +58,7 @@ private:
     static JS::Value stroke(JS::Interpreter&);
     static JS::Value move_to(JS::Interpreter&);
     static JS::Value line_to(JS::Interpreter&);
+    static JS::Value quadratic_curve_to(JS::Interpreter&);
 
     static JS::Value create_image_data(JS::Interpreter&);
     static JS::Value put_image_data(JS::Interpreter&);
diff --git a/Libraries/LibWeb/DOM/CanvasRenderingContext2D.cpp b/Libraries/LibWeb/DOM/CanvasRenderingContext2D.cpp
index 8359cbaf44..12a2791482 100644
--- a/Libraries/LibWeb/DOM/CanvasRenderingContext2D.cpp
+++ b/Libraries/LibWeb/DOM/CanvasRenderingContext2D.cpp
@@ -165,10 +165,13 @@ void CanvasRenderingContext2D::line_to(float x, float y)
     m_path.line_to({ x, y });
 }
 
+void CanvasRenderingContext2D::quadratic_curve_to(float cx, float cy, float x, float y)
+{
+    m_path.quadratic_bezier_curve_to({ cx, cy }, { x, y });
+}
+
 void CanvasRenderingContext2D::stroke()
 {
-    dbg() << "stroke path " << m_path;
-
     auto painter = this->painter();
     if (!painter)
         return;
diff --git a/Libraries/LibWeb/DOM/CanvasRenderingContext2D.h b/Libraries/LibWeb/DOM/CanvasRenderingContext2D.h
index 2b46422d60..c3bb5a9d1f 100644
--- a/Libraries/LibWeb/DOM/CanvasRenderingContext2D.h
+++ b/Libraries/LibWeb/DOM/CanvasRenderingContext2D.h
@@ -69,6 +69,7 @@ public:
     void close_path();
     void move_to(float x, float y);
     void line_to(float x, float y);
+    void quadratic_curve_to(float cx, float cy, float x, float y);
     void stroke();
 
     RefPtr<ImageData> create_image_data(JS::GlobalObject&, int width, int height) const;
