Browse Source

Add hidpi support

master
haskal 3 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 {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
}

textarea {

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

@@ -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) {

Loading…
Cancel
Save