From 0f33bc7c34d91380437787e73a90668bc015a649 Mon Sep 17 00:00:00 2001
From: Emil Ernerfeldt <emil.ernerfeldt@gmail.com>
Date: Mon, 1 Feb 2021 20:44:39 +0100
Subject: [PATCH] Fix web blur (#151)

* [egui_web] Always use an even canvas size

Fixes https://github.com/emilk/egui/issues/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     |  6 +++---
 egui_web/src/lib.rs | 21 +++++++++++++++++----
 2 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/docs/index.html b/docs/index.html
index 1bbec85c..f7659c40 100644
--- a/docs/index.html
+++ b/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>
diff --git a/egui_web/src/lib.rs b/egui_web/src/lib.rs
index 1ea9dd69..95b92919 100644
--- a/egui_web/src/lib.rs
+++ b/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(())
 }