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

LibWeb: Allow paint style fills for CRC2D strokes

Browse source
This commit is contained in:
MacDue 2023-06-07 23:07:06 +01:00 • committed by Andreas Kling
parent 727ff6cf59
commit d259421b69
2 changed files with 30 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

15
Base/res/html/misc/canvas-gradients.html
View file

@ -18,7 +18,7 @@
<canvas id="conic" width="200" height="200"></canvas> <canvas id="conic" width="200" height="200"></canvas>
<h2>Linear Gradients</h2> <h2>Linear Gradients</h2>
<em>This time in a path to spice things up!</em><br> <em>This time in a path to spice things up!</em><br>
<canvas id="linear" width="200" height="200"></canvas> <canvas id="linear" width="400" height="200"></canvas>
<script> <script>
{ {
@ -137,7 +137,6 @@ makeMouseDemo("radialHell2", (canvas, ctx, mX, mY) => {
const ctx = canvas.getContext("2d"); const ctx = canvas.getContext("2d");
const gradient = ctx.createLinearGradient(20, 20, 220, 120); const gradient = ctx.createLinearGradient(20, 20, 220, 120);
ctx.createLinearGradient(0,0,200,50);
gradient.addColorStop(0,"red"); gradient.addColorStop(0,"red");
gradient.addColorStop(0.15,"yellow"); gradient.addColorStop(0.15,"yellow");
gradient.addColorStop(0.3,"green"); gradient.addColorStop(0.3,"green");
@ -148,6 +147,12 @@ makeMouseDemo("radialHell2", (canvas, ctx, mX, mY) => {
ctx.fillStyle = gradient; ctx.fillStyle = gradient;
const gradient2 = ctx.createLinearGradient(200,0,400,50);
gradient2.addColorStop(0,"cyan");
gradient2.addColorStop(1,"fuchsia");
ctx.strokeStyle = gradient2;
const starPath = (cx, cy, spikes, outerRadius, innerRadius) => { const starPath = (cx, cy, spikes, outerRadius, innerRadius) => {
let x = cx; let x = cx;
let y = cy; let y = cy;
@ -171,7 +176,11 @@ makeMouseDemo("radialHell2", (canvas, ctx, mX, mY) => {
ctx.closePath(); ctx.closePath();
} }
starPath(canvas.width/2,canvas.height/2,5,100,60); starPath(canvas.width/4,canvas.height/2,5,100,60);
ctx.fill(); ctx.fill();
starPath(canvas.width/4 + 200 ,canvas.height/2,5,80,40);
ctx.lineWidth = 5;
ctx.stroke();
} }
</script> </script>

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

@ -95,26 +95,22 @@ void CanvasRenderingContext2D::clear_rect(float x, float y, float width, float h
void CanvasRenderingContext2D::stroke_rect(float x, float y, float width, float height) void CanvasRenderingContext2D::stroke_rect(float x, float y, float width, float height)
{ {
draw_clipped([&](auto& painter) { auto& drawing_state = this->drawing_state();
auto& drawing_state = this->drawing_state();
auto rect = drawing_state.transform.map(Gfx::FloatRect(x, y, width, height)); // We could remove the rounding here, but the lines look better when they have whole number pixel endpoints.
// We could remove the rounding here, but the lines look better when they have whole number pixel endpoints. auto top_left = drawing_state.transform.map(Gfx::FloatPoint(x, y)).to_rounded<float>();
auto top_left = drawing_state.transform.map(Gfx::FloatPoint(x, y)).to_rounded<float>(); auto top_right = drawing_state.transform.map(Gfx::FloatPoint(x + width - 1, y)).to_rounded<float>();
auto top_right = drawing_state.transform.map(Gfx::FloatPoint(x + width - 1, y)).to_rounded<float>(); auto bottom_left = drawing_state.transform.map(Gfx::FloatPoint(x, y + height - 1)).to_rounded<float>();
auto bottom_left = drawing_state.transform.map(Gfx::FloatPoint(x, y + height - 1)).to_rounded<float>(); auto bottom_right = drawing_state.transform.map(Gfx::FloatPoint(x + width - 1, y + height - 1)).to_rounded<float>();
auto bottom_right = drawing_state.transform.map(Gfx::FloatPoint(x + width - 1, y + height - 1)).to_rounded<float>();
Gfx::Path path; Gfx::Path path;
path.move_to(top_left); path.move_to(top_left);
path.line_to(top_right); path.line_to(top_right);
path.line_to(bottom_right); path.line_to(bottom_right);
path.line_to(bottom_left); path.line_to(bottom_left);
path.line_to(top_left); path.line_to(top_left);
painter.stroke_path(path, drawing_state.stroke_style.to_color_but_fixme_should_accept_any_paint_style(), drawing_state.line_width);
return rect; stroke_internal(path);
});
} }
// 4.12.5.1.14 Drawing images, https://html.spec.whatwg.org/multipage/canvas.html#drawing-images // 4.12.5.1.14 Drawing images, https://html.spec.whatwg.org/multipage/canvas.html#drawing-images
@ -237,8 +233,11 @@ void CanvasRenderingContext2D::stroke_internal(Gfx::Path const& path)
{ {
draw_clipped([&](auto& painter) { draw_clipped([&](auto& painter) {
auto& drawing_state = this->drawing_state(); auto& drawing_state = this->drawing_state();
if (auto color = drawing_state.stroke_style.as_color(); color.has_value()) {
painter.stroke_path(path, drawing_state.stroke_style.to_color_but_fixme_should_accept_any_paint_style(), drawing_state.line_width); painter.stroke_path(path, *color, drawing_state.line_width);
} else {
painter.stroke_path(path, drawing_state.stroke_style.to_gfx_paint_style(), drawing_state.line_width);
}
return path.bounding_box(); return path.bounding_box();
}); });
} }