Make the Stage fill the screen, and scale Canvas size to pixel units

Author: vmiura

MotionMark/resources/runner/motionmark.css

@@ -387,8 +387,10 @@ body.images-loaded #intro {
 .frame-container {
     position: absolute;
 
+    /*
     top: 50%;
     left: 50%;
+    */
 }
 
 .frame-container > iframe {
@@ -400,24 +402,36 @@ body.images-loaded #intro {
 }
 
 body.small .frame-container {
+    /*
     width: 568px;
     height: 320px;
     margin-left: -284px;
     margin-top: -160px;
+    */
+    width: 100%;
+    height: 100%;
 }
 
 body.medium .frame-container {
+    /*
     width: 900px;
     height: 600px;
     margin-left: -450px;
     margin-top: -300px;
+    */
+    width: 100%;
+    height: 100%;
 }
 
 body.large .frame-container {
+    /*
     width: 1600px;
     height: 800px;
     margin-left: -800px;
     margin-top: -400px;
+    */
+    width: 100%;
+    height: 100%;
 }
 
 /* Results section */

MotionMark/tests/bouncing-particles/resources/bouncing-canvas-particles.js

@@ -97,6 +97,7 @@ class BouncingCanvasParticlesStage extends BouncingParticlesStage {
     {
         await super.initialize(benchmark, options);
         this.context = this.element.getContext("2d");
+        this.context.scale(this.devicePixelRatio, this.devicePixelRatio);
     }
 
     animate(timeDelta)

MotionMark/tests/core/resources/canvas-stage.js

@@ -36,6 +36,7 @@ class CanvasStage extends Stage {
     {
         await super.initialize(benchmark, options);
         this.context = this.element.getContext("2d");
+        this.context.scale(this.devicePixelRatio, this.devicePixelRatio);
     }
 
     tune(count)

MotionMark/tests/core/resources/image-data.js

@@ -132,6 +132,7 @@ class ImageDataStage extends Stage {
         for (var i = 0; i < this._offsetIndex; ++i) {
             var element = this.testElements[i];
             var context = element.getContext("2d");
+            context.scale(this.devicePixelRatio, this.devicePixelRatio);
 
             // Get image data
             var imageData = context.getImageData(0, 0, ImageDataStage.imageWidth, ImageDataStage.imageHeight);
@@ -158,7 +159,9 @@ class ImageDataStage extends Stage {
                 context.putImageData(imageData, 0, 0);
             else {
                 this._refreshElement(element);
-                element.getContext("2d").drawImage(Stage.randomElementInArray(this.images), 0, 0, ImageDataStage.imageWidth, ImageDataStage.imageHeight);
+                const context = element.getContext("2d");
+                context.scale(this.devicePixelRatio, this.devicePixelRatio);
+                context.drawImage(Stage.randomElementInArray(this.images), 0, 0, ImageDataStage.imageWidth, ImageDataStage.imageHeight);
             }
         }
     }

MotionMark/tests/resources/stage.js

@@ -66,9 +66,13 @@ class Stage {
     {
         this._benchmark = benchmark;
         this._element = document.getElementById("stage");
-        this._element.setAttribute("width", document.body.offsetWidth);
-        this._element.setAttribute("height", document.body.offsetHeight);
+
+        const devicePixelRatio = window.devicePixelRatio || 1;
+        this._element.width = document.body.offsetWidth * devicePixelRatio;
+        this._element.height = document.body.offsetHeight * devicePixelRatio;
+
         this._size = GeometryHelpers.elementClientSize(this._element).subtract(Insets.elementPadding(this._element).size);
+        this.devicePixelRatio = devicePixelRatio;
     }
 
     get element()

MotionMark/tests/simple/resources/tiled-canvas-image.js

@@ -52,6 +52,7 @@ class TiledCanvasImageStage extends Stage {
     {
         await super.initialize(benchmark, options);
         this.context = this.element.getContext("2d");
+        this.context.scale(this.devicePixelRatio, this.devicePixelRatio);
         this._setupTiles();
     }
 

MotionMark/tests/template/resources/template-canvas.js

@@ -57,6 +57,7 @@ class TemplateCanvasStage extends Stage {
     {
         await super.initialize(benchmark, options);
         this.context = this.element.getContext("2d");
+        this.context.scale(this.devicePixelRatio, this.devicePixelRatio);
         // Define a collection for your objects.
         // await any async work (e.g. image loading).
     }