Disable interpolation to fix blurry rendeirng on non-retina. Fixes #75

auchenberg · Apr 9, 2019 · d4c7b0f · d4c7b0f
1 parent f5b003e
commit d4c7b0f
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 3 deletions.
diff --git a/src/components/screencast/screencast.css b/src/components/screencast/screencast.css
@@ -1,6 +1,7 @@
 .screencast {
   height: 100%;
   width: 100%;
+  image-rendering: pixelated; /* Disables interpolation. See https://stackoverflow.com/questions/7615009/disable-interpolation-when-scaling-a-canvas */
 }
 
 .img-hidden {

diff --git a/src/components/screencast/screencast.tsx b/src/components/screencast/screencast.tsx
@@ -104,15 +104,17 @@ class Screencast extends React.Component<any, any> {
       return;
     }
 
+    let devicePixelRatio = window.devicePixelRatio || 1;
+
     const canvasWidth = this.props.width;
     const canvasHeight = this.props.height;
     const checkerboardPattern = this.getCheckerboardPattern(canvasElement, this.canvasContext);
 
-    canvasElement.width = window.devicePixelRatio * canvasWidth;
-    canvasElement.height = window.devicePixelRatio * canvasHeight;
+    canvasElement.width = canvasWidth * devicePixelRatio;
+    canvasElement.height = canvasHeight * devicePixelRatio;
 
     this.canvasContext.save();
-    this.canvasContext.scale(window.devicePixelRatio, window.devicePixelRatio);
+    this.canvasContext.scale(devicePixelRatio, devicePixelRatio);
 
     this.canvasContext.save();
     this.canvasContext.fillStyle = checkerboardPattern;