UX: Render wizard previews for high-DPI displays (#7371)

* UX: Render wizard previews for high-DPI displays

Sets up a canvas element of twice the required dimensions, scales all coordinates by 2x, then shrinks the display in css.

* Use window.devicePixelRatio to determine scale factor

app/assets/javascripts/wizard/lib/preview.js.es6

@@ -17,21 +17,27 @@ function canvasFor(image, w, h) {
   w = Math.ceil(w);
   h = Math.ceil(h);
 
+  const scale = window.devicePixelRatio;
+
   const can = document.createElement("canvas");
-  can.width = w;
-  can.height = h;
+  can.width = w * scale;
+  can.height = h * scale;
 
   const ctx = can.getContext("2d");
+  ctx.scale(scale, scale);
   ctx.drawImage(image, 0, 0, w, h);
   return can;
 }
 
 export function createPreviewComponent(width, height, obj) {
+  const scale = window.devicePixelRatio;
   return Ember.Component.extend(
     {
       layoutName: "components/theme-preview",
       width,
       height,
+      elementWidth: width * scale,
+      elementHeight: height * scale,
       ctx: null,
       loaded: false,
 
@@ -39,6 +45,7 @@ export function createPreviewComponent(width, height, obj) {
         this._super(...arguments);
         const c = this.$("canvas")[0];
         this.ctx = c.getContext("2d");
+        this.ctx.scale(2, 2);
         this.reload();
       },
 

app/assets/javascripts/wizard/templates/components/theme-preview.hbs

@@ -1,4 +1,4 @@
 <div class='preview-area'>
-  <canvas width={{width}} height={{height}}>
+  <canvas width={{elementWidth}} height={{elementHeight}} style={{concat "width:" width "; height:" height ";"}}>
   </canvas>
 </div>