js: Pay attention to the device pixel ratio

The CSS "px" unit isn't always a device pixel.  On devices with
high-DPI displays, there can often be multiple device pixels to a CSS
px, while in particularly low-resolution displays (like feature
phones), the user might zoom out to get several CSS px to a device
pixel.  And even on desktop browsers, text zooming controls can change
the ratio.

To make Puzzles' rendering look good on an arbitrary device pixel
ratio, we really want the pixels of the canvas to be device pixels,
not CSS px, so that the canvas doesn't have to be scaled by the
browser for display.  To correct this, we now control the CSS size of
the puzzle canvas, via its containing <div>, to be the canvas size
divided by the device pixel ratio.

There is a significant gap, which is that this doesn't yet track
changes to the device pixel ratio.  This is slightly complicated, so
I'll put it off to the next commit.

2 files changed, 2 insertions, 1 deletions

diff --git a/emcclib.js b/emcclib.js
index c145426..3d9db2f 100644
--- a/emcclib.js
+++ b/emcclib.js
@@ -546,7 +546,7 @@ mergeInto(LibraryManager.library, {
     js_canvas_set_size: function(w, h) {
         onscreen_canvas.width = w;
         offscreen_canvas.width = w;
-        resizable_div.style.width = w + "px";
+        resizable_div.style.width = w / (window.devicePixelRatio || 1) + "px";
 
         onscreen_canvas.height = h;
         offscreen_canvas.height = h;
diff --git a/html/jspage.pl b/html/jspage.pl
index e19c89a..b9e4249 100755
--- a/html/jspage.pl
+++ b/html/jspage.pl
@@ -257,6 +257,7 @@ EOF
 
 #puzzlecanvas {
     display: block;
+    width: 100%;
 }
 
 #statusbarholder {