fix: setup DPI for canvas element

Author: x1unix

raylib.js

@@ -11,6 +11,25 @@ function make_environment(env) {
     });
 }
 
+/**
+ * Setup correct DPI of canvas element for HiDPI screens.
+ * 
+ * @see: https://web.dev/articles/canvas-hidipi
+ */
+function setupCanvas(canvas) {
+    const dpr = window.devicePixelRatio || 1;
+    const { height, width } = canvas.getBoundingClientRect();
+    canvas.height = height * dpr;
+    canvas.width = width * dpr;
+
+    const ctx = canvas.getContext('2d');
+    if (!ctx) {
+        throw new Error("Could not create 2d canvas context")
+    }
+    ctx.scale(dpr, dpr);
+    return ctx;
+}
+
 let iota = 0;
 const LOG_ALL     = iota++; // Display all logs
 const LOG_TRACE   = iota++; // Trace logging, intended for internal use only
@@ -61,11 +80,11 @@ class RaylibJs {
         }
 
         const canvas = document.getElementById(canvasId);
-        this.ctx = canvas.getContext("2d");
-        if (this.ctx === null) {
-            throw new Error("Could not create 2d canvas context");
+        if (!canvas) {
+            throw new Error('Canvas element not found')
         }
 
+        this.ctx = setupCanvas(canvas);
         this.wasm = await WebAssembly.instantiateStreaming(fetch(wasmPath), {
             env: make_environment(this)
         });