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

Base: Add canvas clip path test page

Browse source
This commit is contained in:
MacDue 2023-04-06 21:18:26 +01:00 • committed by Linus Groh
parent 20e9213cc4
commit 67aceb6c67
2 changed files with 45 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

44
Base/res/html/misc/canvas-clip-path.html Normal file
View file

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