diff options
| author | Andreas Kling <kling@serenityos.org> | 2020-04-16 21:06:03 +0200 |
|---|---|---|
| committer | Andreas Kling <kling@serenityos.org> | 2020-04-16 21:06:03 +0200 |
| commit | 0d93e249c3b9a0cdfc8d182e94b40fb8b8015f9f (patch) | |
| tree | 0af75501ec6f354361c9ab2f66ba12cb31f6b246 /Base | |
| parent | 60c2e41079c94ed30c53f8c1ba167d24247aa875 (diff) | |
| download | serenity-0d93e249c3b9a0cdfc8d182e94b40fb8b8015f9f.zip | |
LibWeb: Add some basic path drawing functionality to the canvas element
This patch adds the following methods to CanvasRenderingContext2D:
- beginPath()
- moveTo(x, y)
- lineTo(x, y)
- closePath()
- stroke()
We also add the lineWidth property. :^)
Diffstat (limited to 'Base')
| -rw-r--r-- | Base/home/anon/www/canvas-path.html | 40 | ||||
| -rw-r--r-- | Base/home/anon/www/welcome.html | 1 |
2 files changed, 41 insertions, 0 deletions
diff --git a/Base/home/anon/www/canvas-path.html b/Base/home/anon/www/canvas-path.html new file mode 100644 index 0000000000..76d4edc44e --- /dev/null +++ b/Base/home/anon/www/canvas-path.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<html> +<head></title> +<body> +<canvas width=300 height=300></canvas> +<script> + +function drawHouse() { + +var ctx = document.querySelectorAll("canvas")[0].getContext("2d"); +ctx.fillStyle = 'black'; +ctx.fillRect(0, 0, 300, 300); + +ctx.fillStyle = 'white'; +ctx.strokeStyle = 'red'; + +// Set line width +ctx.lineWidth = 10; + +// Wall +ctx.strokeRect(75, 140, 150, 110); + +// Door +ctx.fillRect(130, 190, 40, 60); + +// Roof +ctx.beginPath(); +ctx.moveTo(50, 140); +ctx.lineTo(150, 60); +ctx.lineTo(250, 140); +ctx.closePath(); +ctx.stroke(); + +} + +drawHouse(); + +</script> +</body> +</html> diff --git a/Base/home/anon/www/welcome.html b/Base/home/anon/www/welcome.html index 880fb86146..db445643f2 100644 --- a/Base/home/anon/www/welcome.html +++ b/Base/home/anon/www/welcome.html @@ -28,6 +28,7 @@ span#ua { <p>Your user agent is: <b><span id="ua"></span></b></p> <p>Some small test pages:</p> <ul> + <li><a href="canvas-path.html">canvas path house!</a></li> <li><a href="img-canvas.html">canvas drawImage() test</a></li> <li><a href="trigonometry.html">canvas + trigonometry functions</a></li> <li><a href="qsa.html">querySelectorAll test</a></li> |