Support retina displays

This commit is contained in:
Andras Schmelczer 2022-09-27 19:14:42 +02:00
parent 9d740b7dcf
commit 0a866387d1
No known key found for this signature in database
GPG key ID: 0EA1BC97D0AB076E

View file

@ -11,8 +11,8 @@ class CanvasHandler {
resize() { resize() {
const rect = this.canvas.getBoundingClientRect(); const rect = this.canvas.getBoundingClientRect();
this.canvas.width = rect.width; this.canvas.width = rect.width * window.devicePixelRatio;
this.canvas.height = rect.height; this.canvas.height = rect.height * window.devicePixelRatio;
} }
fillCanvas(color) { fillCanvas(color) {
@ -22,7 +22,14 @@ class CanvasHandler {
drawCircle([x, y], radius, color) { drawCircle([x, y], radius, color) {
this.context.beginPath(); this.context.beginPath();
this.context.arc(x, y, radius, 0, 2 * Math.PI, false); this.context.arc(
x * window.devicePixelRatio,
y * window.devicePixelRatio,
radius * window.devicePixelRatio,
0,
2 * Math.PI,
false
);
this.context.fillStyle = color; this.context.fillStyle = color;
this.context.fill(); this.context.fill();
} }
@ -32,9 +39,9 @@ class CanvasHandler {
} }
get width() { get width() {
return this.canvas.width; return this.canvas.width / window.devicePixelRatio;
} }
get height() { get height() {
return this.canvas.height; return this.canvas.height / window.devicePixelRatio;
} }
} }