From 22dd8054973e5513c549d3ab07a7d0675442e39c Mon Sep 17 00:00:00 2001
From: anderoonies <andrewbayer2016@u.northwestern.edu>
Date: Wed, 9 Feb 2022 11:01:47 -0800
Subject: [PATCH] Perform context scaling according to devicePixelRatio when
 setting fullscreen with setFullscreen()

---
 .../graphics/setfullscreen/setfullscreen.js   | 50 +++++++++++++++++++
 .../graphics/setfullscreen/setfullscreen.md   |  7 +++
 site/examples/index.html                      |  3 ++
 src/graphics/index.js                         | 28 +++++++----
 4 files changed, 78 insertions(+), 10 deletions(-)
 create mode 100644 site/examples/graphics/setfullscreen/setfullscreen.js
 create mode 100644 site/examples/graphics/setfullscreen/setfullscreen.md

diff --git a/site/examples/graphics/setfullscreen/setfullscreen.js b/site/examples/graphics/setfullscreen/setfullscreen.js
new file mode 100644
index 00000000..63ebd86e
--- /dev/null
+++ b/site/examples/graphics/setfullscreen/setfullscreen.js
@@ -0,0 +1,50 @@
+function circleAt(radius, color, x, y) {
+    var circle = new Circle(radius);
+    circle.setColor(color);
+    circle.setPosition(x, y);
+    return circle;
+}
+
+function rectAt(width, height, color, x, y) {
+    var rect = new Rectangle(width, height);
+    rect.setColor(color);
+    rect.setPosition(x, y);
+    return rect;
+}
+function drawGhost(cx, cy, color) {
+    var HEAD_RADIUS = 35;
+    var BODY_WIDTH = HEAD_RADIUS * 2;
+    var BODY_HEIGHT = 60;
+    var NUM_FEET = 3;
+    var FOOT_RADIUS = BODY_WIDTH / (NUM_FEET * 2);
+    var PUPIL_RADIUS = 4;
+    var PUPIL_LEFT_OFFSET = 8;
+    var PUPIL_RIGHT_OFFSET = 20;
+    var EYE_RADIUS = 10;
+    var EYE_OFFSET = 14;
+    const parts = [];
+    parts.push(circleAt(HEAD_RADIUS, color, cx, cy));
+    parts.push(rectAt(BODY_WIDTH, BODY_HEIGHT, color, cx - BODY_WIDTH / 2, cy));
+    for (let i = 0; i < NUM_FEET; i++) {
+        var start = -NUM_FEET + 1 + i * 2;
+        parts.push(circleAt(FOOT_RADIUS, color, cx + start * FOOT_RADIUS, cy + BODY_HEIGHT));
+    }
+    const leftEyeGroup = new Group();
+    leftEyeGroup.add(circleAt(EYE_RADIUS, Color.white, cx - EYE_OFFSET, cy));
+    leftEyeGroup.add(circleAt(PUPIL_RADIUS, Color.blue, cx - PUPIL_LEFT_OFFSET, cy));
+    const rightEyeGroup = new Group();
+    rightEyeGroup.add(circleAt(EYE_RADIUS, Color.white, cx + EYE_OFFSET, cy));
+    rightEyeGroup.add(circleAt(PUPIL_RADIUS, Color.blue, cx + PUPIL_RIGHT_OFFSET, cy));
+    parts.push(leftEyeGroup);
+    parts.push(rightEyeGroup);
+    setTimer(() => {
+        leftEyeGroup.rotate(3);
+        rightEyeGroup.rotate(3);
+    }, 50);
+    return parts;
+}
+const g = new Group(...drawGhost(100, 100, Randomizer.nextColor()));
+add(g);
+
+setFullscreen();
+document.querySelector('canvas').style.border = '1px solid white';
diff --git a/site/examples/graphics/setfullscreen/setfullscreen.md b/site/examples/graphics/setfullscreen/setfullscreen.md
new file mode 100644
index 00000000..a52a9ffa
--- /dev/null
+++ b/site/examples/graphics/setfullscreen/setfullscreen.md
@@ -0,0 +1,7 @@
+---
+title: setFullscreen
+layout: example
+code: setfullscreen.js
+---
+
+<code>setFullscreen()</code> can be used to set the canvas to fill the entire parent and automatically scale to fill the parent whenever it resizes.
diff --git a/site/examples/index.html b/site/examples/index.html
index 58a42395..7da09dbe 100644
--- a/site/examples/index.html
+++ b/site/examples/index.html
@@ -33,6 +33,9 @@ <h2>Graphics</h2>
         <li>
             <a href="graphics/setsize">setSize()</a>
         </li>
+        <li>
+            <a href="graphics/setfullscreen">setFullscreen()</a>
+        </li>
     </ul>
     <section>
         <h3>Accessibility</h3>
diff --git a/src/graphics/index.js b/src/graphics/index.js
index f7bf7f78..044935de 100644
--- a/src/graphics/index.js
+++ b/src/graphics/index.js
@@ -472,15 +472,16 @@ class GraphicsManager extends Manager {
             elem._hasAccessibleDOMElement = false;
         }
     }
+
     /**
-     * Set the size of the canvas.
-     * @param {number} w - Desired width of the canvas.
-     * @param {number} h - Desired height of the canvas.
+     * Resizes the canvas, creating a temporary canvas to prevent flickering and
+     * perform size adjustments based on the devices's devicePixelRatio.
+     * @param {number} w
+     * @param {number} h
      */
-    setSize(w, h) {
+    _resize(w, h) {
         w = Math.floor(w);
         h = Math.floor(h);
-        this.fullscreenMode = false;
         const canvas = this.getCanvas();
         // prevent flickering effect by saving the canvas and immediately drawing back.
         // this will be cleared in redraw(), but it prevents a jarring
@@ -503,18 +504,25 @@ class GraphicsManager extends Manager {
         temporaryCanvas.remove();
     }
 
+    /**
+     * Set the size of the canvas.
+     * @param {number} w - Desired width of the canvas.
+     * @param {number} h - Desired height of the canvas.
+     */
+    setSize(w, h) {
+        this.fullscreenMode = false;
+        this._resize(w, h);
+    }
+
     /**
      * Set the canvas to take up the entire parent element
      */
     setFullscreen() {
         this.fullscreenMode = true; // when this is true, canvas will resize with parent
-        var canvas = this.getCanvas();
+        const canvas = this.getCanvas();
         const width = canvas.parentElement.offsetWidth - FULLSCREEN_PADDING;
         const height = canvas.parentElement.offsetHeight - FULLSCREEN_PADDING;
-        canvas.width = this.devicePixelRatio * width;
-        canvas.height = this.devicePixelRatio * height;
-        canvas.style.width = `${width}px`;
-        canvas.style.height = `${height}px`;
+        this._resize(width, height);
     }
 
     /**