1 files changed, 54 insertions, 0 deletions
diff --git a/Base/res/html/misc/demo.html b/Base/res/html/misc/demo.html
new file mode 100644
index 0000000000..6fb53719e1
--- /dev/null
+++ b/Base/res/html/misc/demo.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<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>