From 2d38d30784d824ef5525fcc837f3bcc646d6da0f Mon Sep 17 00:00:00 2001
From: haskal <haskal@bepis.xyz>
Date: Mon, 24 Jun 2019 16:22:05 +0200
Subject: [PATCH] Add hidpi support

---
 index.html     |  2 ++
 js-lib/view.js | 17 ++++++++++++-----
 2 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/index.html b/index.html
index 78460d7..874577d 100755
--- a/index.html
+++ b/index.html
@@ -278,6 +278,8 @@ button.active, .info-icon {
   position: fixed;
   left: 0px;
   top: 0px;
+  width: 100%;
+  height: 100%;
 }
 
 textarea {
diff --git a/js-lib/view.js b/js-lib/view.js
index 632e11f..dbe5050 100644
--- a/js-lib/view.js
+++ b/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;
-    this.canvas.height = document.documentElement.clientHeight;
+    let dpr = window.devicePixelRatio || 1;
+    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) {