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); +};