mirror of
https://github.com/RGBCube/serenity
synced 2025-10-31 20:12:43 +00:00
9075dea3a8
Neither of the tests here actually passes properly right now. It's a little more aspirational... In the first one, the circle draws in the wrong place due apparently to existing bugs in `CanvasRenderingContext2D::ellipse()`. In the second, I just haven't yet implemented creating a Path2D from an SVG path string, because that's going to take a fair bit of untangling first.
40 lines
1.1 KiB
HTML
40 lines
1.1 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<title>Path2D test</title>
|
|
</head>
|
|
<body>
|
|
<h1>Path2D test</h1>
|
|
<p>These examples are taken from <a href="https://developer.mozilla.org/en-US/docs/Web/API/Path2D/Path2D">MDN</a>.</p>
|
|
|
|
<h2>Basic example</h2>
|
|
<p>Should be a square and a circle, both as outlines.</p>
|
|
<canvas id="canvas"></canvas>
|
|
|
|
<h2>SVG Path example</h2>
|
|
<p>Should display a filled black square.</p>
|
|
<canvas id="canvas-2"></canvas>
|
|
|
|
<script>
|
|
// Basic example
|
|
const canvas = document.getElementById('canvas');
|
|
const ctx = canvas.getContext('2d');
|
|
|
|
let path1 = new Path2D();
|
|
path1.rect(10, 10, 100,100);
|
|
|
|
let path2 = new Path2D(path1);
|
|
path2.moveTo(220, 60);
|
|
path2.arc(170, 60, 50, 0, 2 * Math.PI);
|
|
|
|
ctx.stroke(path2);
|
|
|
|
// SVG Path example
|
|
const canvas2 = document.getElementById('canvas-2');
|
|
const ctx2 = canvas2.getContext('2d');
|
|
let p = new Path2D('M10 10 h 80 v 80 h -80 Z');
|
|
ctx2.fill(p);
|
|
</script>
|
|
</body>
|
|
</html>
|