summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorAnotherTest <ali.mpfard@gmail.com>2020-05-05 06:54:26 +0430
committerAndreas Kling <kling@serenityos.org>2020-05-05 09:21:07 +0200
commit0a55679de465d770767de36da8fefb573644d86e (patch)
treec1ccec5b32f96b9373559306c9bbb35a36090e12
parent9f3f98d4c0c111496e35010ae3488dc172da56db (diff)
downloadserenity-0a55679de465d770767de36da8fefb573644d86e.zip
LibWeb: Add canvas.quadraticCurveTo()
Also adds a test, and removes debug spam :tm:
-rw-r--r--Base/home/anon/www/canvas-path-quadratic-curve.html44
-rw-r--r--Base/home/anon/www/welcome.html1
-rw-r--r--Libraries/LibGfx/Path.cpp4
-rw-r--r--Libraries/LibWeb/Bindings/CanvasRenderingContext2DWrapper.cpp14
-rw-r--r--Libraries/LibWeb/Bindings/CanvasRenderingContext2DWrapper.h1
-rw-r--r--Libraries/LibWeb/DOM/CanvasRenderingContext2D.cpp7
-rw-r--r--Libraries/LibWeb/DOM/CanvasRenderingContext2D.h1
7 files changed, 70 insertions, 2 deletions
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::stroke()
+void CanvasRenderingContext2D::quadratic_curve_to(float cx, float cy, float x, float y)
{
- dbg() << "stroke path " << m_path;
+ m_path.quadratic_bezier_curve_to({ cx, cy }, { x, y });
+}
+void CanvasRenderingContext2D::stroke()
+{
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;