LibWeb: Implement the CanvasRenderingContext2D::rect path method

This method adds a rectangle to the current 2D path.
abyesilyurt · Apr 14, 2021 · aab99d5 · aab99d5
1 parent 4c09372
commit aab99d5
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 0 deletions.
diff --git a/Base/res/html/misc/canvas-path-rect.html b/Base/res/html/misc/canvas-path-rect.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>canvas path - rect example</title>
+</head>
+<body>
+<canvas width=500 height=500></canvas>
+<script>
+
+ function drawRect() {
+ var canvas = document.querySelector("canvas");
+ var ctx = canvas.getContext("2d");
+ ctx.fillStyle = 'black';
+ ctx.fillRect(0, 0, 500, 500);
+
+ ctx.fillStyle = 'red';
+ ctx.beginPath();
+ ctx.rect(10, 20, 150, 100);
+ ctx.fill();
+
+ ctx.fillStyle = 'green';
+ ctx.beginPath();
+ ctx.rect(200, 210, 100, 100);
+ ctx.fill('evenodd');
+ }
+
+ drawRect();
+
+</script>
+</body>
+</html>
diff --git a/Base/res/html/misc/welcome.html b/Base/res/html/misc/welcome.html
@@ -70,6 +70,7 @@ <h1>Welcome to the Serenity Browser!</h1>
  <li><a href="percent-css.html">CSS percentage values</a></li>
  <li><a href="inline-block.html">display: inline-block; test</a></li>
  <li><a href="canvas-path-quadratic-curve.html">canvas path quadratic curve test</a></li>
+ <li><a href="canvas-path-rect.html">canvas path rect 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="pngsuite_int_png.html">pngsuite interlacing test</a></li>

diff --git a/Userland/Libraries/LibWeb/HTML/CanvasRenderingContext2D.cpp b/Userland/Libraries/LibWeb/HTML/CanvasRenderingContext2D.cpp
@@ -188,6 +188,17 @@ void CanvasRenderingContext2D::quadratic_curve_to(float cx, float cy, float x, f
  m_path.quadratic_bezier_curve_to({ cx, cy }, { x, y });
 }
 
+void CanvasRenderingContext2D::rect(float x, float y, float width, float height)
+{
+ m_path.move_to({ x, y });
+ if (width == 0 || height == 0)
+ return;
+ m_path.line_to({ x + width, y });
+ m_path.line_to({ x + width, y + height });
+ m_path.line_to({ x, y + height });
+ m_path.close();
+}
+
 void CanvasRenderingContext2D::stroke()
 {
  auto painter = this->painter();

diff --git a/Userland/Libraries/LibWeb/HTML/CanvasRenderingContext2D.h b/Userland/Libraries/LibWeb/HTML/CanvasRenderingContext2D.h
@@ -33,6 +33,7 @@
 #include <LibGfx/Painter.h>
 #include <LibGfx/Path.h>
 #include <LibWeb/Bindings/Wrappable.h>
+#include <LibWeb/DOM/ExceptionOr.h>
 
 namespace Web::HTML {
 
@@ -73,6 +74,7 @@ class CanvasRenderingContext2D
  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 rect(float x, float y, float width, float height);
  void stroke();
 
  // FIXME: We should only have one fill(), really. Fix the wrapper generator!

diff --git a/Userland/Libraries/LibWeb/HTML/CanvasRenderingContext2D.idl b/Userland/Libraries/LibWeb/HTML/CanvasRenderingContext2D.idl
@@ -15,6 +15,7 @@ interface CanvasRenderingContext2D {
  undefined moveTo(double x, double y);
  undefined lineTo(double x, double y);
  undefined quadraticCurveTo(double cpx, double cpy, double x, double y);
+ undefined rect(double x, double y, double width, double height);
 
  undefined drawImage(HTMLImageElement image, double dx, double dy);