From 065db26d7c54007d6bb2bdc9c7bd78a74d4396cd Mon Sep 17 00:00:00 2001
From: Andreas Kling <kling@serenityos.org>
Date: Sat, 21 Mar 2020 19:07:21 +0100
Subject: [PATCH] Base: Add a demo web page for canvas+setInterval+randomness

Click somewhere in the black area and drag for colorful effect! :^)
---
 Base/home/anon/www/demo.html    | 54 +++++++++++++++++++++++++++++++++
 Base/home/anon/www/welcome.html |  1 +
 2 files changed, 55 insertions(+)
 create mode 100644 Base/home/anon/www/demo.html
diff --git a/Base/home/anon/www/demo.html b/Base/home/anon/www/demo.html
new file mode 100644
index 00000000000..7c4c33b7e5f
--- /dev/null
+++ b/Base/home/anon/www/demo.html
@@ -0,0 +1,54 @@
+<!DOCTYPE>
+<html>
+<head>
+    <title>Canvas, timer, random and event demo</title>
+</head>
+<body>
+<canvas id=c width=400 height=300></canvas>
+<script>
+c = document.getElementById("c");
+ctx = c.getContext("2d");
+ctx.fillStyle = 'black';
+ctx.fillRect(0, 0, c.width, c.height);
+
+pressed = false;
+mouseX = 0;
+mouseY = 0;
+
+c.addEventListener("mousedown", function(e) {
+    // mousedown
+    pressed = true;
+    mouseX = e.offsetX;
+    mouseY = e.offsetY;
+});
+
+c.addEventListener("mouseup", function() {
+    // mouseup
+    pressed = false;
+});
+
+c.addEventListener("mousemove", function(e) {
+    // mousemove
+    mouseX = e.offsetX;
+    mouseY = e.offsetY;
+});
+
+function update() {
+    if (pressed) {
+        var r = Math.random() * 255;
+        var g = Math.random() * 255;
+        var b = Math.random() * 255;
+        var color = "rgb(" + r + "," + g + "," + b + ")";
+        ctx.fillStyle = color;
+        const spread = 35;
+        var x = mouseX + (Math.random() * spread) - (spread / 2);
+        var y = mouseY + (Math.random() * spread) - (spread / 2);
+        var size = Math.random() * 8;
+        ctx.fillRect(x, y, size, size);
+    }
+}
+
+setInterval(update, 20);
+</script>
+</body>
+</html>
diff --git a/Base/home/anon/www/welcome.html b/Base/home/anon/www/welcome.html
index 336345221c4..c2bb81c828e 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="demo.html">fun demo</a></li>
         <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>
