Rotate tile images 180 degrees

drawImage(img, canvasX + TILE, canvasY + TILE, -TILE, -TILE)
flips the image both horizontally and vertically, so:
- Image north (high lat) ends up at canvas bottom (was top)
- Image south (low lat) ends up at canvas top
- Image east (high lon) ends up at canvas right
- Image west (low lon) ends up at canvas left

Combined with NO canvasY swap and the WebGL flip:
- North tiles drawn at canvas bottom -> after WebGL flip, still
  at screen bottom. Screen bottom has image north = high y. So
  y at screen bottom = high.
- Looking forward (close ground = screen bottom in cockpit) =
  high y. y increases in flight direction.

With NO canvasX swap:
- East tiles (high x) drawn at canvas left
- Image east at canvas right within each tile (high x)
- Image west at canvas left within each tile (low x)

So at screen left: east tiles with image x increasing left to
right (low to high within tile). At screen right: west tiles with
image x decreasing left to right. Overall: x at screen right (west
tiles, low x label) lower than at screen left (east tiles, high x
label). x decreases left to right.

vendor/clouds3d.js

@@ -339,7 +339,13 @@ function drawTileAt(lng, perp, dx, dz, centerTileX, centerTileY) {
         return Promise.resolve(false);
     }
     return fetchTileImage(tileX, tileY).then(function(img) {
-        groundCtx.drawImage(img, canvasX, canvasY);
+        // Rotate image 180 degrees: draw with negative width and
+        // negative height, anchored at the tile's bottom-right corner
+        // (canvasX + 256, canvasY + 256). After this, image north
+        // (high lat) is at canvas bottom and image south at canvas
+        // top; image east at canvas right, image west at canvas left.
+        groundCtx.drawImage(img, canvasX + GROUND_TILE_SIZE, canvasY + GROUND_TILE_SIZE,
+            -GROUND_TILE_SIZE, -GROUND_TILE_SIZE);
         groundLoadedTiles[tileX + '_' + tileY] = true;
 
         // Debug labels: 'N' at the image's north edge (top of canvas