Emscripten: Added full screen canvas (close #127)

Author: MikhailGorobets

SampleBase/src/Emscripten/InputControllerEmscripten.cpp

@@ -1,5 +1,5 @@
 /*
- *  Copyright 2019-2022 Diligent Graphics LLC
+ *  Copyright 2019-2024 Diligent Graphics LLC
  *
  *  Licensed under the Apache License, Version 2.0 (the "License");
  *  you may not use this file except in compliance with the License.
@@ -23,15 +23,18 @@
  */
 
 #include <emscripten/key_codes.h>
+#include <emscripten/emscripten.h>
 #include "InputController.hpp"
 
 namespace Diligent
 {
 
 void InputControllerEmscripten::OnMouseMove(int32_t MouseX, int32_t MouseY)
 {
-    m_MouseState.PosX = static_cast<float>(MouseX);
-    m_MouseState.PosY = static_cast<float>(MouseY);
+    auto DevicePixelRatio = emscripten_get_device_pixel_ratio();
+
+    m_MouseState.PosX = DevicePixelRatio * static_cast<float>(MouseX);
+    m_MouseState.PosY = DevicePixelRatio * static_cast<float>(MouseY);
 }
 
 void InputControllerEmscripten::OnMouseButtonEvent(MouseButton Button, bool IsPressed)

SampleBase/src/Emscripten/resources/emscripten_template.html

@@ -12,14 +12,12 @@
 
         .emscripten {
             position: absolute;
-            top: 0;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            padding: 0;
-            margin: auto;
-            width: 1280;
-            height: 720;
+            top: 0px;
+            left: 0px;
+            margin: 0px;
+            border: 0;
+            width: 100%;
+            height: 100%;
             overflow: hidden;
             display: block;
             image-rendering: optimizeSpeed;
@@ -50,9 +48,14 @@
                 console.error(text);
             },
             canvas: (function () {
+                var dpr = window.devicePixelRatio;
                 var canvas = document.getElementById('canvas');
-                canvas.width  = 1280;
-                canvas.height = 720;
+                canvas.width = Math.ceil(dpr * window.innerWidth);
+                canvas.height = Math.ceil(dpr * window.innerHeight);
+                window.addEventListener("resize", function () {
+                    canvas.width = Math.ceil(dpr * window.innerWidth);
+                    canvas.height = Math.ceil(dpr * window.innerHeight);
+                });
                 canvas.addEventListener("webglcontextlost", function(e) { alert('FIXME: WebGL context lost, please reload the page'); e.preventDefault(); }, false);
                 return canvas;
             })(),