From ac813207904254e2b84ebecabeb5a3ba7df4ca46 Mon Sep 17 00:00:00 2001
From: paireks <w.radaczynski@gmail.com>
Date: Thu, 16 Jul 2026 15:47:38 +0200
Subject: [PATCH] XCD-505 Add example of manipulating canvas.resolutionScale

---
 viewer/canvasResolution.html | 64 ++++++++++++++++++++++++++++++++++++
 viewer/index.html            |  5 +++
 2 files changed, 69 insertions(+)
 create mode 100644 viewer/canvasResolution.html
diff --git a/viewer/canvasResolution.html b/viewer/canvasResolution.html
new file mode 100644
index 0000000..ed0e352
--- /dev/null
+++ b/viewer/canvasResolution.html
@@ -0,0 +1,64 @@
+<!doctype html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>xeokit Example</title>
+    <link href="../css/pageStyle.css" rel="stylesheet"/>
+    <style>
+        #sliderContainer {
+            height: 100%;
+            position: absolute;
+            background-color: rgba(255, 255, 255, 0.3);
+            padding: 10px;
+            right: 0;
+        }
+        input {
+            vertical-align: middle;
+        }
+    </style>
+</head>
+<body>
+<canvas id="myCanvas"></canvas>
+<div id="sliderContainer">
+    <p>Sliders</p>
+    <label>
+        Canvas resolution
+        <input id="canvasResolution" type="range" min="0.00" max="2.00" value="1.00" step="0.01">
+        <a id="canvasResolutionValue">1.00</a>
+    </label>
+</div>
+</body>
+<script type="module">
+    import {Viewer, XKTLoaderPlugin} from "../dist/xeokit-sdk.js";
+
+    const viewer = new Viewer({
+        canvasId: "myCanvas",
+        transparent: true,
+    });
+
+    const xktLoader = new XKTLoaderPlugin(viewer);
+    const sceneModel = xktLoader.load({
+        id: "myId",
+        src: "../../assets/models/xkt/v10/glTF-Embedded/Duplex_A_20110505.glTFEmbedded.xkt",
+        edges: true,
+    });
+
+    sceneModel.on("loaded", function () {
+        viewer.cameraFlight.jumpTo({
+            aabb: sceneModel.aabb
+        });
+    });
+
+    let canvasResolution = 1.0;
+    const canvasResolutionDisplay = document.getElementById('canvasResolutionValue')
+    document.getElementById("canvasResolution").oninput = function() {
+        canvasResolution = Number(document.getElementById("canvasResolution").value);
+        viewer.scene.canvas.resolutionScale = canvasResolution;
+        canvasResolutionDisplay.textContent = canvasResolution.toFixed(2);
+    };
+
+    window.viewer = viewer;
+</script>
+</html>
diff --git a/viewer/index.html b/viewer/index.html
index 5956cdd..28c0627 100644
--- a/viewer/index.html
+++ b/viewer/index.html
@@ -264,6 +264,11 @@
             ["sao_ConferenceCenter", "Scalable Ambient Obscurrence - open right panel to play with parameters"]
         ],
 
+        "Canvas": [
+            "#Canvas settings",
+            ["canvasResolution", "Control the canvas resolution scale to see the effect"]
+        ],
+
         "Localization": [
             "#Localizing xeokit components for different languages",
             ["localization_NavCubePlugin", "NavCubePlugin Localization"],
