Add a demo for WebInspector scanvas debugging.
authordrousso@apple.com <drousso@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 12 Oct 2018 23:54:17 +0000 (23:54 +0000)
committerdrousso@apple.com <drousso@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 12 Oct 2018 23:54:17 +0000 (23:54 +0000)
* demos/canvas-debugging/index.html: Added.

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@237091 268f45cc-cd09-0410-ab3c-d52691b4dbfc

Websites/webkit.org/ChangeLog
Websites/webkit.org/demos/canvas-debugging/demo.html [new file with mode: 0644]

index d53e57c..e924ff4 100644 (file)
@@ -1,3 +1,9 @@
+2018-10-12  Devin Rousso  <drousso@apple.com>
+
+        Add a demo for WebInspector scanvas debugging.
+
+        * demos/canvas-debugging/index.html: Added.
+
 2018-10-08  Justin Fan  <justin_fan@apple.com>
 
         WebGPU: Rename old WebGPU prototype to WebMetal
diff --git a/Websites/webkit.org/demos/canvas-debugging/demo.html b/Websites/webkit.org/demos/canvas-debugging/demo.html
new file mode 100644 (file)
index 0000000..7458514
--- /dev/null
@@ -0,0 +1,85 @@
+<html>
+<body>
+<style>
+canvas {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}
+</style>
+<script>
+"use strict";
+
+let context = document.body.appendChild(document.createElement("canvas")).getContext("2d");
+let canvasWidth = 0;
+let canvasHeight = 0;
+
+function handleResize() {
+    canvasWidth = context.canvas.width = context.canvas.offsetWidth;
+    canvasHeight = context.canvas.height = context.canvas.offsetHeight;
+}
+handleResize();
+window.addEventListener("resize", handleResize);
+
+class Star {
+    constructor()
+    {
+        this._initialize();
+    }
+
+    draw()
+    {
+        // if (this._x > -this._s && this._x < canvasWidth + this._s && this._y > -this._s && this._y < canvasHeight + this._s) {
+            context.moveTo(this._x, this._y);
+            context.arc(this._x, this._y, this._s, 0, 2 * Math.PI);
+        // }
+
+        this._x += this._vx;
+        this._y += this._vy;
+        if (this._x > canvasWidth + this._s || this._y < -this._s)
+            this._initialize();
+    }
+
+    _initialize()
+    {
+        this._s = this._randomFromInterval(0.5, 3);
+
+        this._x = this._randomFromInterval(-canvasWidth, 0);
+        this._y = this._randomFromInterval(canvasHeight, canvasHeight * 2);
+
+        this._vx = this._randomFromInterval(0.5, 3);
+        this._vy = this._randomFromInterval(-0.5, -3);
+    }
+
+    _randomFromInterval(min, max)
+    {
+        return Math.random() * (max - min + 1) + min;
+    }
+}
+
+let stars = [];
+for (let i = 0; i < 10000; ++i)
+    stars.push(new Star);
+
+window.requestAnimationFrame(function frame(timestamp) {
+    context.fillStyle = "hsla(0, 0%, 10%, 0.5)";
+    context.fillRect(0, 0, canvasWidth, canvasHeight);
+
+    for (let i = 0; i < 10; ++i) {
+        context.beginPath();
+
+        for (let j = 0; j < stars.length / 10; ++j)
+            stars[(i * stars.length / 10) + j].draw();
+
+        context.fillStyle = "white";
+        context.fill();
+    }
+
+    window.requestAnimationFrame(frame);
+});
+
+</script>