[elpa] externals/firefox-javascript-repl 7c8f747bba 10/24: Add a JavaScript example with which to test

[Thomas Fitzsimmons]

branch: externals/firefox-javascript-repl
commit 7c8f747bbad02fa0554aabea1cfd8b2cc3bf6661
Author: Thomas Fitzsimmons <fitzsim@fitzsim.org>
Commit: Thomas Fitzsimmons <fitzsim@fitzsim.org>

    Add a JavaScript example with which to test
    
    * example.js: Import from developer.mozilla.org tutorial.
---
 example.js | 72 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 72 insertions(+)

diff --git a/example.js b/example.js
new file mode 100644
index 0000000000..a55b87d6fb
--- /dev/null
+++ b/example.js
@@ -0,0 +1,72 @@
+// From https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial
+// This work is licensed under the Creative Commons
+// Attribution-ShareAlike 2.5 Generic License. To view a copy of this
+// license, visit http://creativecommons.org/licenses/by-sa/2.5/ or
+// send a letter to Creative Commons, PO Box 1866, Mountain View, CA
+// 94042, USA.
+var canvas = document.createElement('canvas');
+canvas.width = 600;
+canvas.height = 300;
+canvas.style = "border: 1px solid";
+document.body.appendChild(canvas);
+const context = canvas.getContext("2d");
+let animation;
+let running = false;
+
+const ball = {
+    x: 100,
+    y: 100,
+    vx: 5,
+    vy: 1,
+    radius: 25,
+    color: "blue",
+    draw() {
+        context.beginPath();
+        context.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
+        context.closePath();
+        context.fillStyle = this.color;
+        context.fill();
+    },
+};
+
+function clear() {
+    context.fillStyle = "rgba(255, 255, 255, 0.3)";
+    context.fillRect(0, 0, canvas.width, canvas.height);
+}
+
+function draw() {
+    clear();
+    ball.draw();
+    ball.x += ball.vx;
+    ball.y += ball.vy;
+
+    if (ball.y + ball.vy > canvas.height || ball.y + ball.vy < 0) {
+        ball.vy = -ball.vy;
+    }
+    if (ball.x + ball.vx > canvas.width || ball.x + ball.vx < 0) {
+        ball.vx = -ball.vx;
+    }
+
+    animation = window.requestAnimationFrame(draw);
+}
+
+canvas.addEventListener("mousemove", (e) => {
+    if (!running) {
+        clear();
+        ball.x = e.clientX;
+        ball.y = e.clientY;
+        ball.draw();
+    }
+});
+
+canvas.addEventListener("click", (e) => {
+    if (!running) {
+        animation = window.requestAnimationFrame(draw);
+        running = true;
+    }
+});
+
+canvas.addEventListener("mouseout", (e) => {
+    window.cancelAnimationFrame(animation);
+    running = false;
+});