RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-05-30 23:28:12 +00:00
Code Issues Activity Actions

LibWeb: Add some basic path drawing functionality to the canvas element

Browse source 
This patch adds the following methods to CanvasRenderingContext2D:

- beginPath()
- moveTo(x, y)
- lineTo(x, y)
- closePath()
- stroke()

We also add the lineWidth property. :^)
This commit is contained in:
Andreas Kling 2020-04-16 21:06:03 +02:00
parent 60c2e41079
commit 0d93e249c3
6 changed files with 163 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

40
Base/home/anon/www/canvas-path.html Normal file
View file

@ -0,0 +1,40 @@
<!DOCTYPE html>
<html>
<head></title>
<body>
<canvas width=300 height=300></canvas>
<script>
function drawHouse() {
var ctx = document.querySelectorAll("canvas")[0].getContext("2d");
ctx.fillStyle = 'black';
ctx.fillRect(0, 0, 300, 300);
ctx.fillStyle = 'white';
ctx.strokeStyle = 'red';
// Set line width
ctx.lineWidth = 10;
// Wall
ctx.strokeRect(75, 140, 150, 110);
// Door
ctx.fillRect(130, 190, 40, 60);
// Roof
ctx.beginPath();
ctx.moveTo(50, 140);
ctx.lineTo(150, 60);
ctx.lineTo(250, 140);
ctx.closePath();
ctx.stroke();
}
drawHouse();
</script>
</body>
</html>

1
Base/home/anon/www/welcome.html
View file

@ -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.html">canvas path house!</a></li>
<li><a href="img-canvas.html">canvas drawImage() test</a></li>
<li><a href="trigonometry.html">canvas + trigonometry functions</a></li>
<li><a href="qsa.html">querySelectorAll test</a></li>

71
Libraries/LibWeb/Bindings/CanvasRenderingContext2DWrapper.cpp
View file

@ -53,6 +53,14 @@ CanvasRenderingContext2DWrapper::CanvasRenderingContext2DWrapper(CanvasRendering
put_native_property("strokeStyle", stroke_style_getter, stroke_style_setter);
put_native_function("strokeRect", stroke_rect, 4);
put_native_function("drawImage", draw_image, 3);
put_native_function("beginPath", begin_path, 0);
put_native_function("closePath", close_path, 0);
put_native_function("stroke", stroke, 0);
put_native_function("moveTo", move_to, 0);
put_native_function("lineTo", line_to, 0);
put_native_property("lineWidth", line_width_getter, line_width_setter);
}
CanvasRenderingContext2DWrapper::~CanvasRenderingContext2DWrapper()
@ -162,5 +170,68 @@ void CanvasRenderingContext2DWrapper::stroke_style_setter(JS::Interpreter& inter
impl->set_stroke_style(value.to_string());
}
JS::Value CanvasRenderingContext2DWrapper::line_width_getter(JS::Interpreter& interpreter)
{
auto* impl = impl_from(interpreter);
if (!impl)
return {};
return JS::Value(impl->line_width());
}
void CanvasRenderingContext2DWrapper::line_width_setter(JS::Interpreter& interpreter, JS::Value value)
{
if (auto* impl = impl_from(interpreter))
impl->set_line_width(value.to_double());
}
JS::Value CanvasRenderingContext2DWrapper::begin_path(JS::Interpreter& interpreter)
{
auto* impl = impl_from(interpreter);
if (!impl)
return {};
impl->begin_path();
return JS::js_undefined();
}
JS::Value CanvasRenderingContext2DWrapper::close_path(JS::Interpreter& interpreter)
{
auto* impl = impl_from(interpreter);
if (!impl)
return {};
impl->close_path();
return JS::js_undefined();
}
JS::Value CanvasRenderingContext2DWrapper::stroke(JS::Interpreter& interpreter)
{
auto* impl = impl_from(interpreter);
if (!impl)
return {};
impl->stroke();
return JS::js_undefined();
}
JS::Value CanvasRenderingContext2DWrapper::move_to(JS::Interpreter& interpreter)
{
auto* impl = impl_from(interpreter);
if (!impl)
return {};
double x = interpreter.argument(0).to_double();
double y = interpreter.argument(1).to_double();
impl->move_to(x, y);
return JS::js_undefined();
}
JS::Value CanvasRenderingContext2DWrapper::line_to(JS::Interpreter& interpreter)
{
auto* impl = impl_from(interpreter);
if (!impl)
return {};
double x = interpreter.argument(0).to_double();
double y = interpreter.argument(1).to_double();
impl->line_to(x, y);
return JS::js_undefined();
}
}
}

7
Libraries/LibWeb/Bindings/CanvasRenderingContext2DWrapper.h
View file

@ -51,6 +51,13 @@ private:
static void fill_style_setter(JS::Interpreter&, JS::Value);
static JS::Value stroke_style_getter(JS::Interpreter&);
static void stroke_style_setter(JS::Interpreter&, JS::Value);
static JS::Value line_width_getter(JS::Interpreter&);
static void line_width_setter(JS::Interpreter&, JS::Value);
static JS::Value begin_path(JS::Interpreter&);
static JS::Value close_path(JS::Interpreter&);
static JS::Value stroke(JS::Interpreter&);
static JS::Value move_to(JS::Interpreter&);
static JS::Value line_to(JS::Interpreter&);
NonnullRefPtr<CanvasRenderingContext2D> m_impl;
};

31
Libraries/LibWeb/DOM/CanvasRenderingContext2D.cpp
View file

@ -134,4 +134,35 @@ OwnPtr<Gfx::Painter> CanvasRenderingContext2D::painter()
return make<Gfx::Painter>(*m_element->bitmap());
}
void CanvasRenderingContext2D::begin_path()
{
m_path = Gfx::Path();
}
void CanvasRenderingContext2D::close_path()
{
m_path.close();
}
void CanvasRenderingContext2D::move_to(float x, float y)
{
m_path.move_to({ x, y });
}
void CanvasRenderingContext2D::line_to(float x, float y)
{
m_path.line_to({ x, y });
}
void CanvasRenderingContext2D::stroke()
{
dbg() << "stroke path " << m_path;
auto painter = this->painter();
if (!painter)
return;
painter->stroke_path(m_path, m_stroke_style, m_line_width);
}
}

13
Libraries/LibWeb/DOM/CanvasRenderingContext2D.h
View file

@ -30,6 +30,7 @@
#include <LibGfx/AffineTransform.h>
#include <LibGfx/Color.h>
#include <LibGfx/Forward.h>
#include <LibGfx/Path.h>
#include <LibWeb/Bindings/Wrappable.h>
namespace Web {
@ -61,6 +62,15 @@ public:
void scale(float sx, float sy);
void translate(float x, float y);
void set_line_width(float line_width) { m_line_width = line_width; }
float line_width() const { return m_line_width; }
void begin_path();
void close_path();
void move_to(float x, float y);
void line_to(float x, float y);
void stroke();
private:
explicit CanvasRenderingContext2D(HTMLCanvasElement&);
@ -73,6 +83,9 @@ private:
Gfx::AffineTransform m_transform;
Gfx::Color m_fill_style;
Gfx::Color m_stroke_style;
float m_line_width { 1 };
Gfx::Path m_path;
};
}