mirror of
https://github.com/RGBCube/serenity
synced 2025-07-25 23:37:35 +00:00
Base: Add canvas clip path test page
This commit is contained in:
parent
20e9213cc4
commit
67aceb6c67
2 changed files with 45 additions and 0 deletions
44
Base/res/html/misc/canvas-clip-path.html
Normal file
44
Base/res/html/misc/canvas-clip-path.html
Normal 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>
|
Loading…
Add table
Add a link
Reference in a new issue