Add hidpi support

index.html

@@ -278,6 +278,8 @@ button.active, .info-icon {
   position: fixed;
   left: 0px;
   top: 0px;
+  width: 100%;
+  height: 100%;
 }
 
 textarea {

js-lib/view.js

@@ -14,6 +14,7 @@ export default class View {
 
     /** @type {Element} */ this.canvas = document.getElementById('ascii-canvas');
     /** @type {Object} */ this.context = this.canvas.getContext('2d');
+    this.resizeCanvas();
 
     /** @type {number} */ this.zoom = 1;
     /** @type {Vector} */ this.offset = new Vector(
@@ -23,19 +24,21 @@ export default class View {
     /** @type {boolean} */ this.dirty = true;
     // TODO: Should probably save this setting in a cookie or something.
     /** @type {boolean} */ this.useLines = false;
-
-    this.resizeCanvas();
   }
 
   /**
    * Resizes the canvas, should be called if the viewport size changes.
    */
   resizeCanvas() {
-    this.canvas.width = document.documentElement.clientWidth;
+    let dpr = window.devicePixelRatio || 1;
-    this.canvas.height = document.documentElement.clientHeight;
+    this.canvas.width = document.documentElement.clientWidth * dpr;
+    this.canvas.height = document.documentElement.clientHeight * dpr;
     this.dirty = true;
+    this.context.setTransform(1, 0, 0, 1, 0, 0);
+    this.context.scale(dpr, dpr);
   }
 
+
   /**
    * Starts the animation loop for the canvas. Should only be called once.
    */
@@ -55,8 +58,10 @@ export default class View {
    */
   render() {
     var context = this.context;
+    let dpr = window.devicePixelRatio || 1;
+
+    context.save();
 
-    context.setTransform(1, 0, 0, 1, 0, 0);
     // Clear the visible area.
     context.clearRect(0, 0, this.canvas.width, this.canvas.height);
 
@@ -107,6 +112,8 @@ export default class View {
     if (this.useLines) {
       this.renderCellsAsLines(context, startOffset, endOffset);
     }
+
+    context.restore();
   }
 
   renderText(context, startOffset, endOffset, drawSpecials) {