Fix web blur (#151)

* [egui_web] Always use an even canvas size

Fixes #103

* [egui_web] Position canvas at top of screen

This avoids jumpyness when resizing,
caused by rounding height to an even number

docs/index.html

@@ -27,15 +27,15 @@
             padding: 0 !important;
         }
 
-        /* Center canvas vertically and horizontally: */
+        /* Position canvas in center-top: */
         canvas {
             margin-right: auto;
             margin-left: auto;
             display: block;
             position: absolute;
-            top: 50%;
+            top: 0%;
             left: 50%;
-            transform: translate(-50%, -50%);
+            transform: translate(-50%, 0%);
         }
     </style>
 </head>

egui_web/src/lib.rs

@@ -135,16 +135,29 @@ pub fn resize_canvas_to_screen_size(canvas_id: &str) -> Option<()> {
     let canvas_size_pixels = canvas_size_pixels.min(max_size_pixels);
     let canvas_size_points = canvas_size_pixels / pixels_per_point;
 
+    // Make sure that the height and width are always even numbers.
+    // otherwise, the page renders blurry on some platforms.
+    // See https://github.com/emilk/egui/issues/103
+    fn round_to_even(v: f32) -> f32 {
+        (v / 2.0).round() * 2.0
+    }
+
     canvas
         .style()
-        .set_property("width", &format!("{}px", canvas_size_points.x))
+        .set_property(
+            "width",
+            &format!("{}px", round_to_even(canvas_size_points.x)),
+        )
         .ok()?;
     canvas
         .style()
-        .set_property("height", &format!("{}px", canvas_size_points.y))
+        .set_property(
+            "height",
+            &format!("{}px", round_to_even(canvas_size_points.y)),
+        )
         .ok()?;
-    canvas.set_width(canvas_size_pixels.x.round() as u32);
-    canvas.set_height(canvas_size_pixels.y.round() as u32);
+    canvas.set_width(round_to_even(canvas_size_pixels.x) as u32);
+    canvas.set_height(round_to_even(canvas_size_pixels.y) as u32);
 
     Some(())
 }