benchmarking improvement, static can be called multiple times [#12]

protomaps · Jul 9, 2021 · 7a778b8 · 7a778b8
1 parent 405ea36
commit 7a778b8
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 13 deletions.
diff --git a/examples/performance.html b/examples/performance.html
@@ -8,34 +8,38 @@
         <script src="https://unpkg.com/protomaps@latest/dist/protomaps.min.js"></script>
         <!-- <script src="../dist/protomaps.js"></script> -->
         <style>
-            #map {
-                width: 1024px;
+            #example_1 {
+                width: 512px;
                 height: 512px;
                 background-color:#eee;
                 display: block;
             }
         </style>
     </head>
     <body>
-       <canvas id="map"></canvas>
-       <script>
-        let canvas = document.getElementById("map")
-        let map = new protomaps.Static({url:"tpe_sample.pmtiles"})
+        <div>
+            <canvas id="example_1"></canvas>
+            <span><span id="example_1_elapsed"></span> ms</span>
+        </div>
+        <script>
+        let RUNS = 20
+        let canvas = document.getElementById("example_1")
+        let map = new protomaps.Static({url:"https://api.protomaps.com/tiles/v2/{z}/{x}/{y}.pbf?key=1003762824b9687f"})
 
         async function run() {
-            return await map.drawCanvas(canvas,[25.0412,121.5177],17)
+            return await map.drawCanvas(canvas,[42.3238,-83.0512],11)
         }
 
         async function benchmark() {
             await run() // first run is irrelevant
             var total = 0
-            for (var i = 0; i < 20; i++) {
+            for (var i = 0; i < RUNS; i++) {
                 total += await run()
             }
-            console.log(total/20)
+            document.getElementById("example_1_elapsed").innerHTML = total/RUNS
         }
 
         benchmark()
-       </script>
+        </script>
     </body>
 </html>
diff --git a/src/frontends/static.ts b/src/frontends/static.ts
@@ -76,11 +76,14 @@ export class Static {
         let dpr = window.devicePixelRatio
         let width = canvas.clientWidth
         let height = canvas.clientHeight
-        canvas.width = width * dpr
-        canvas.height = height * dpr
+        if (!canvas.sizeSet) {
+            canvas.width = width * dpr
+            canvas.height = height * dpr
+            canvas.sizeSet = true
+        }
         canvas.lang = options.lang
         let ctx = canvas.getContext('2d')
-        ctx.scale(dpr,dpr)
+        ctx.setTransform(dpr,0,0,dpr,0,0)
         return this.drawContext(ctx,width,height,latlng,display_zoom)
     }
 }