Browse Source

Add hidpi support

master
haskal 2 months ago
parent
commit
2d38d30784
2 changed files with 14 additions and 5 deletions
  1. 2
    0
      index.html
  2. 12
    5
      js-lib/view.js

+ 2
- 0
index.html View File

@@ -278,6 +278,8 @@ button.active, .info-icon {
278 278
   position: fixed;
279 279
   left: 0px;
280 280
   top: 0px;
281
+  width: 100%;
282
+  height: 100%;
281 283
 }
282 284
 
283 285
 textarea {

+ 12
- 5
js-lib/view.js View File

@@ -14,6 +14,7 @@ export default class View {
14 14
 
15 15
     /** @type {Element} */ this.canvas = document.getElementById('ascii-canvas');
16 16
     /** @type {Object} */ this.context = this.canvas.getContext('2d');
17
+    this.resizeCanvas();
17 18
 
18 19
     /** @type {number} */ this.zoom = 1;
19 20
     /** @type {Vector} */ this.offset = new Vector(
@@ -23,19 +24,21 @@ export default class View {
23 24
     /** @type {boolean} */ this.dirty = true;
24 25
     // TODO: Should probably save this setting in a cookie or something.
25 26
     /** @type {boolean} */ this.useLines = false;
26
-
27
-    this.resizeCanvas();
28 27
   }
29 28
 
30 29
   /**
31 30
    * Resizes the canvas, should be called if the viewport size changes.
32 31
    */
33 32
   resizeCanvas() {
34
-    this.canvas.width = document.documentElement.clientWidth;
35
-    this.canvas.height = document.documentElement.clientHeight;
33
+    let dpr = window.devicePixelRatio || 1;
34
+    this.canvas.width = document.documentElement.clientWidth * dpr;
35
+    this.canvas.height = document.documentElement.clientHeight * dpr;
36 36
     this.dirty = true;
37
+    this.context.setTransform(1, 0, 0, 1, 0, 0);
38
+    this.context.scale(dpr, dpr);
37 39
   }
38 40
 
41
+
39 42
   /**
40 43
    * Starts the animation loop for the canvas. Should only be called once.
41 44
    */
@@ -55,8 +58,10 @@ export default class View {
55 58
    */
56 59
   render() {
57 60
     var context = this.context;
61
+    let dpr = window.devicePixelRatio || 1;
62
+
63
+    context.save();
58 64
 
59
-    context.setTransform(1, 0, 0, 1, 0, 0);
60 65
     // Clear the visible area.
61 66
     context.clearRect(0, 0, this.canvas.width, this.canvas.height);
62 67
 
@@ -107,6 +112,8 @@ export default class View {
107 112
     if (this.useLines) {
108 113
       this.renderCellsAsLines(context, startOffset, endOffset);
109 114
     }
115
+
116
+    context.restore();
110 117
   }
111 118
 
112 119
   renderText(context, startOffset, endOffset, drawSpecials) {

Loading…
Cancel
Save