[egui_web] Always use an even canvas size

Reportedly fixes #103

Author: emilk

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(())
 }