diff options
author | MacDue <macdue@dueutil.tech> | 2023-04-06 21:18:26 +0100 |
---|---|---|
committer | Linus Groh <mail@linusgroh.de> | 2023-04-09 18:42:45 +0200 |
commit | 67aceb6c67cb06b1b8607fa74a4fb6180a151fd1 (patch) | |
tree | 2170835e21166bb0d2211b402d7344d9a27ca000 | |
parent | 20e9213cc4e8e8c528bd7f817a05751c804c2e56 (diff) | |
download | serenity-67aceb6c67cb06b1b8607fa74a4fb6180a151fd1.zip |
Base: Add canvas clip path test page
-rw-r--r-- | Base/res/html/misc/canvas-clip-path.html | 44 | ||||
-rw-r--r-- | Base/res/html/misc/welcome.html | 1 |
2 files changed, 45 insertions, 0 deletions
diff --git a/Base/res/html/misc/canvas-clip-path.html b/Base/res/html/misc/canvas-clip-path.html new file mode 100644 index 0000000000..8c698ee272 --- /dev/null +++ b/Base/res/html/misc/canvas-clip-path.html @@ -0,0 +1,44 @@ +<style> + canvas { + border: 1px solid black; + } +</style> +<!-- Examples taken from MDN --> +<b>(nonzero) path clipping:</b><br> +<canvas id="canvas1" width="200" height="160"></canvas> +<br> +<b>evenodd path clipping:</b><br> +<canvas id="canvas2" width="200" height="160"></canvas> +<script> +{ + const canvas = document.getElementById("canvas1"); + const ctx = canvas.getContext("2d"); + + // Create circular clipping region + ctx.beginPath(); + ctx.arc(0/*FIMXE: Should be 100, but ctx.arc() is currently broken*/, 75, 50, 0, Math.PI * 2); + ctx.clip(); + + // Draw stuff that gets clipped + ctx.fillStyle = "blue"; + ctx.fillRect(0, 0, canvas.width, canvas.height); + ctx.fillStyle = "orange"; + ctx.fillRect(0, 0, 100, 100); +} +</script> +<script> +{ + const canvas = document.getElementById("canvas2"); + const ctx = canvas.getContext("2d"); + + // Create clipping path + let region = new Path2D(); + region.rect(80, 10, 20, 130); + region.rect(40, 50, 100, 50); + ctx.clip(region, "evenodd"); + + // Draw stuff that gets clipped + ctx.fillStyle = "blue"; + ctx.fillRect(0, 0, canvas.width, canvas.height); +} +</script> diff --git a/Base/res/html/misc/welcome.html b/Base/res/html/misc/welcome.html index 8dd0f24eea..bc01e6bf28 100644 --- a/Base/res/html/misc/welcome.html +++ b/Base/res/html/misc/welcome.html @@ -194,6 +194,7 @@ <li><a href="canvas-path-quadratic-curve.html">canvas path quadratic curve test</a></li> <li><a href="img-canvas.html">canvas drawImage() test</a></li> <li><a href="canvas-path.html">canvas path house!</a></li> + <li><a href="canvas-clip-path.html">canvas clip paths</a></li> <li><a href="trigonometry.html">canvas + trigonometry functions</a></li> <li><a href="canvas-path2d.html">Path2D</a></li> <li><a href="webgl-clear-color-and-multiple-contexts.html">WebGL Demo - Multiple Contexts and glClear(Color)</a></li> |