diff options
| author | Sam Atkins <atkinssj@serenityos.org> | 2022-08-11 17:44:58 +0100 |
|---|---|---|
| committer | Andreas Kling <kling@serenityos.org> | 2022-08-14 11:30:40 +0200 |
| commit | 9075dea3a8c054dbc03d56ccecbfb2bd3fa54e5e (patch) | |
| tree | 2e0213f667293b78bf8199034009bc9dc059a6c1 /Base | |
| parent | 6644f3ab440e4a5b13536a812acffd5dce1d9ba8 (diff) | |
| download | serenity-9075dea3a8c054dbc03d56ccecbfb2bd3fa54e5e.zip | |
Base: Add a test page for Path2D
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.
Diffstat (limited to 'Base')
| -rw-r--r-- | Base/res/html/misc/canvas-path2d.html | 40 | ||||
| -rw-r--r-- | Base/res/html/misc/welcome.html | 1 |
2 files changed, 41 insertions, 0 deletions
diff --git a/Base/res/html/misc/canvas-path2d.html b/Base/res/html/misc/canvas-path2d.html new file mode 100644 index 0000000000..3531e5dde9 --- /dev/null +++ b/Base/res/html/misc/canvas-path2d.html @@ -0,0 +1,40 @@ +<!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> diff --git a/Base/res/html/misc/welcome.html b/Base/res/html/misc/welcome.html index fd5a83e861..0ff3d086e8 100644 --- a/Base/res/html/misc/welcome.html +++ b/Base/res/html/misc/welcome.html @@ -178,6 +178,7 @@ <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="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> <li><h3>Wasm</h3></li> <li><a href="mandelbrot-wasm.html">WebAssembly Mandelbrot Rendering Demo</a></li> |