riki/rkgk
riki/rkgk
1
Fork 0
Code Issues 57 Pull requests Projects 1 Activity

HiDPI support

Browse source 
the main canvas is now DPI-aware; it should no longer be pixelated on 4k
this couldn't be done for the brush preview, so it's just kinda pixelated
also fixed the horrendous scrollbar that could appear on HiDPI for some reason
This commit is contained in:
りき萌 2024-10-25 23:37:01 +02:00 • committed by リキ萌
parent 273eaa6ce3
commit 39886291cf
2 changed files with 39 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

26
static/canvas-renderer.js
View file

@ -34,16 +34,25 @@ class CanvasRenderer extends HTMLElement {
// Rendering
#updateSize() {
this.canvas.width = this.clientWidth;
this.canvas.height = this.clientHeight;
let { width, height } = this.getBoundingClientRect();
this.width = width;
this.height = height;
// To properly handle DPI scaling, we want the canvas's layout size to be equal to that of
// its parent container,
this.style.width = `${width}px`;
this.style.height = `${height}px`;
this.canvas.width = width * window.devicePixelRatio;
this.canvas.height = height * window.devicePixelRatio;
// Rerender immediately after the canvas is resized, as its contents have now been invalidated.
this.#render();
}
getWindowSize() {
return {
width: this.clientWidth,
height: this.clientHeight,
width: this.width,
height: this.height,
};
}
@ -250,10 +259,15 @@ class CanvasRenderer extends HTMLElement {
this.gl.useProgram(this.renderChunksProgram.id);
let translationX = this.canvas.width / 2 - this.viewport.panX * this.viewport.zoom;
let translationY = this.canvas.height / 2 - this.viewport.panY * this.viewport.zoom;
let translationX = this.width / 2 - this.viewport.panX * this.viewport.zoom;
let translationY = this.height / 2 - this.viewport.panY * this.viewport.zoom;
let scale = this.viewport.zoom;
let dpiScale = window.devicePixelRatio;
translationX *= dpiScale;
translationY *= dpiScale;
scale *= dpiScale;
this.gl.uniformMatrix4fv(
this.renderChunksProgram.u_projection,
false,