RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-26 06:27:45 +00:00
Code Issues Activity Actions

LibWeb: Implement the CanvasRenderingContext2D::rect path method

Browse source 
This method adds a rectangle to the current 2D path.
This commit is contained in:
Idan Horowitz 2021-04-14 23:29:14 +03:00 • committed by Andreas Kling
parent 4c0937225e
commit aab99d5945
5 changed files with 46 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

31
Base/res/html/misc/canvas-path-rect.html Normal file
View file

@ -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>

1
Base/res/html/misc/welcome.html
View file

@ -70,6 +70,7 @@ span#loadtime {
<li><a href="percent-css.html">CSS percentage values</a></li> <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="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-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_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_bas_png.html">pngsuite basic formats test</a></li>
<li><a href="pngsuite_int_png.html">pngsuite interlacing test</a></li> <li><a href="pngsuite_int_png.html">pngsuite interlacing test</a></li>

11
Userland/Libraries/LibWeb/HTML/CanvasRenderingContext2D.cpp
View file

@ -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 }); 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() void CanvasRenderingContext2D::stroke()
{ {
auto painter = this->painter(); auto painter = this->painter();

2
Userland/Libraries/LibWeb/HTML/CanvasRenderingContext2D.h
View file

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

1
Userland/Libraries/LibWeb/HTML/CanvasRenderingContext2D.idl
View file

@ -15,6 +15,7 @@ interface CanvasRenderingContext2D {
undefined moveTo(double x, double y); undefined moveTo(double x, double y);
undefined lineTo(double x, double y); undefined lineTo(double x, double y);
undefined quadraticCurveTo(double cpx, double cpy, 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); undefined drawImage(HTMLImageElement image, double dx, double dy);