From 33b5f5288875435b2ceebad2fcd26261ccc0df7c Mon Sep 17 00:00:00 2001
From: Jonathan Olson <jonathan.olson@colorado.edu>
Date: Tue, 6 Oct 2020 15:02:01 -0600
Subject: [PATCH] Apply backing scales to screenshots, so we get the same
 resolution as viewed on-screen, see
 https://github.com/phetsims/joist/issues/664

---
 js/ScreenshotGenerator.js | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/js/ScreenshotGenerator.js b/js/ScreenshotGenerator.js
index e72cdab7..edbe5a5d 100644
--- a/js/ScreenshotGenerator.js
+++ b/js/ScreenshotGenerator.js
@@ -7,7 +7,9 @@
  * @author Sam Reid (PhET Interactive Simulations)
  */
 
+import Matrix3 from '../../dot/js/Matrix3.js';
 import CanvasContextWrapper from '../../scenery/js/util/CanvasContextWrapper.js';
+import Utils from '../../scenery/js/util/Utils.js';
 import joist from './joist.js';
 
 class ScreenshotGenerator {
@@ -26,14 +28,18 @@ class ScreenshotGenerator {
 
     // set up our Canvas with the correct background color
     const canvas = document.createElement( 'canvas' );
-    canvas.width = sim.display.width;
-    canvas.height = sim.display.height;
     const context = canvas.getContext( '2d' );
+
+    const backingScale = Utils.backingScale( context );
+    canvas.width = sim.display.width * backingScale;
+    canvas.height = sim.display.height * backingScale;
+
+    context.scale( backingScale, backingScale );
     context.fillStyle = sim.display.domElement.style.backgroundColor;
     context.fillRect( 0, 0, canvas.width, canvas.height );
     const wrapper = new CanvasContextWrapper( canvas, context );
 
-    sim.rootNode.renderToCanvasSubtree( wrapper );
+    sim.rootNode.renderToCanvasSubtree( wrapper, Matrix3.scaling( backingScale ) );
 
     // get the data URL in PNG format
     return canvas.toDataURL( mimeType );