From b21d95bbe32f7519db60a2b4abce7fe82194240d Mon Sep 17 00:00:00 2001 From: MacDue Date: Mon, 4 Jul 2022 21:10:19 +0100 Subject: [PATCH] Base: Move fun canvas demo JavaScript to seperate file This will allow this demo to be reused for other tests. --- Base/res/html/misc/demo.html | 45 ++----------------------------- Base/res/html/misc/fun-canvas.js | 46 ++++++++++++++++++++++++++++++++ 2 files changed, 48 insertions(+), 43 deletions(-) create mode 100644 Base/res/html/misc/fun-canvas.js diff --git a/Base/res/html/misc/demo.html b/Base/res/html/misc/demo.html index 6fb53719e1..5a7ca5ed01 100644 --- a/Base/res/html/misc/demo.html +++ b/Base/res/html/misc/demo.html @@ -5,50 +5,9 @@ + diff --git a/Base/res/html/misc/fun-canvas.js b/Base/res/html/misc/fun-canvas.js new file mode 100644 index 0000000000..1a26f185d4 --- /dev/null +++ b/Base/res/html/misc/fun-canvas.js @@ -0,0 +1,46 @@ +const makeFunCanvas = canvasId => { + c = document.getElementById(canvasId); + + 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); +};