Fix blur on high DPI screens

js/mapdata.js

@@ -46,8 +46,9 @@ export let view = {
         const mapContainer = document.getElementById('mapContainer');
         let isLandscape = mapContainer.clientWidth > mapContainer.clientHeight;
         view.scale = Math.min(mapContainer.clientWidth/(matrix.width + Config.defaultMapPadding*2), mapContainer.clientHeight/(matrix.height + Config.defaultMapPadding*2));
+        view.pixelRatio = window.devicePixelRatio;
         if(isLandscape){
-            view.x = mapContainer.clientWidth*0.6 - (matrix.width * 0.5 + matrix.minX)*view.scale;
+            view.x = (mapContainer.clientWidth*0.6 - (matrix.width * 0.5 + matrix.minX)*view.scale);
             view.y = (matrix.minY - Config.defaultMapPadding) * view.scale;
         }else{
             view.x = -(matrix.minX - Config.defaultMapPadding) * view.scale;
@@ -56,10 +57,10 @@ export let view = {
         view.dirty = false;
 
         view.convertX = x => {
-            return x * view.scale + view.x;
+            return x * view.scale * view.pixelRatio + view.x * view.pixelRatio;
         }
         view.convertY = y => {
-            return (matrix.minY+matrix.maxY-y) * view.scale - view.y;
+            return (matrix.minY+matrix.maxY-y) * view.scale * view.pixelRatio - view.y * view.pixelRatio;
         }
 
         view.unconvertX = x => {

js/utillib.js

@@ -16,7 +16,7 @@ export const gradeIncrements = [
     0.001
 ];
 
-const gradeArrowDimensions = 64;
+const gradeArrowDimensions = 64 * window.devicePixelRatio;
 export const gradeArrows = new OffscreenCanvas(11*gradeArrowDimensions, 2*gradeArrowDimensions);
 
 export function generateGradeArrows(){