diff options
| author | Andreas Kling <kling@serenityos.org> | 2020-03-19 19:07:56 +0100 |
|---|---|---|
| committer | Andreas Kling <kling@serenityos.org> | 2020-03-19 19:07:56 +0100 |
| commit | a37c29e35381bc2560515b384b442dab81a35fee (patch) | |
| tree | e78428625be546f078e08132bebc2afbd98ada50 /Base/home | |
| parent | 73d28a0551e75958270445efa67aca150621c8b9 (diff) | |
| download | serenity-a37c29e35381bc2560515b384b442dab81a35fee.zip | |
LibWeb: Add <canvas> element and start fleshing out CRC2D
This patch adds HTMLCanvasElement along with a LayoutCanvas object.
The DOM and layout parts are very similar to <img> elements.
The <canvas> element holds a Gfx::Bitmap which is sized according to
the "width" and "height" attributes on the element.
Calling .getContext("2d") on a <canvas> element gives you a context
object that draws into the underlying Gfx::Bitmap of the <canvas>.
The context weakly points to the <canvas> which allows it to outlive
the canvas element if needed.
This is really quite cool. :^)
Diffstat (limited to 'Base/home')
| -rw-r--r-- | Base/home/anon/www/canvas.html | 27 | ||||
| -rw-r--r-- | Base/home/anon/www/welcome.html | 1 |
2 files changed, 28 insertions, 0 deletions
diff --git a/Base/home/anon/www/canvas.html b/Base/home/anon/www/canvas.html new file mode 100644 index 0000000000..b82f553315 --- /dev/null +++ b/Base/home/anon/www/canvas.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> +<head> +<title>Canvas 2D test!</title> +<style type="text/css"> +body { + background-color: #000; + color: #fff; /* another css comment */ +} +canvas { + border-width: 1px; + border-style: solid; + border-color: #fff; +} +</style> +<script> + document.addEventListener("DOMContentLoaded", function() { + ctx = document.getElementById("foo").getContext("2d"); + ctx.fillStyle = 'red'; + ctx.fillRect(10, 10, 200, 100); + }); +</script> +</head> +<body link="#44f" vlink="#c4c" background="90s-bg.png"> + <canvas id="foo" width="300" height="200"></canvas> +</body> +</html> diff --git a/Base/home/anon/www/welcome.html b/Base/home/anon/www/welcome.html index f611edb944..336345221c 100644 --- a/Base/home/anon/www/welcome.html +++ b/Base/home/anon/www/welcome.html @@ -23,6 +23,7 @@ h1 { <p>This is a very simple browser built on the LibWeb engine.</p> <p>Some small test pages:</p> <ul> + <li><a href="canvas.html">canvas 2D test</a></li> <li><a href="events.html">simple DOM events test</a></li> <li><a href="dom.html">simple DOM JS test</a></li> <li><a href="alert.html">alert() test</a></li> |