Use NaN for unavailable values and handle text creation separately

src/ol/render/canvas/Executor.js

@@ -669,21 +669,19 @@ class CanvasExecutor {
           let width = /** @type {number} */ (instruction[14]);
 
 
-          if (!image) {
+          if (!image && instruction.length >= 19) {
-            if (instruction.length < 19 || !instruction[18]) {
+            // create label images
-              continue;
-            }
             text = /** @type {string} */ (instruction[18]);
             textKey = /** @type {string} */ (instruction[19]);
             strokeKey = /** @type {string} */ (instruction[20]);
             fillKey = /** @type {string} */ (instruction[21]);
             const labelWithAnchor = this.drawTextImageWithPointPlacement_(text, textKey, strokeKey, fillKey);
-            const textOffsetX = /** @type {number} */ (instruction[22]);
-            const textOffsetY = /** @type {number} */ (instruction[23]);
             image = instruction[3] = labelWithAnchor.label;
+            const textOffsetX = /** @type {number} */ (instruction[22]);
             anchorX = instruction[4] = (labelWithAnchor.anchorX - textOffsetX) * this.pixelRatio;
+            const textOffsetY = /** @type {number} */ (instruction[23]);
             anchorY = instruction[5] = (labelWithAnchor.anchorY - textOffsetY) * this.pixelRatio;
-            height = instruction[8] = image.height;
+            height = instruction[7] = image.height;
             width = instruction[14] = image.width;
           }
 

src/ol/render/canvas/TextBuilder.js

@@ -256,11 +256,12 @@ class CanvasTextBuilder extends CanvasBuilder {
       this.beginGeometry(geometry, feature);
 
       // The image is unknown at this stage so we pass null; it will be computed at render time.
-      // For clarity, we pass Infinity for numerical values that will be computed at render time.
+      // For clarity, we pass NaN for offsetX, offsetY, width and height, which will be computed at
+      // render time.
       const pixelRatio = this.pixelRatio;
       this.instructions.push([CanvasInstruction.DRAW_IMAGE, begin, end,
-        null, Infinity, Infinity, this.declutterGroup_, Infinity, 1, 0, 0,
+        null, NaN, NaN, this.declutterGroup_, NaN, 1, 0, 0,
-        this.textRotateWithView_, this.textRotation_, 1, Infinity,
+        this.textRotateWithView_, this.textRotation_, 1, NaN,
         textState.padding == defaultPadding ?
           defaultPadding : textState.padding.map(function(p) {
             return p * pixelRatio;
@@ -270,8 +271,8 @@ class CanvasTextBuilder extends CanvasBuilder {
         this.textOffsetX_, this.textOffsetY_, geometryWidths
       ]);
       this.hitDetectionInstructions.push([CanvasInstruction.DRAW_IMAGE, begin, end,
-        null, Infinity, Infinity, this.declutterGroup_, Infinity, 1, 0, 0,
+        null, NaN, NaN, this.declutterGroup_, NaN, 1, 0, 0,
-        this.textRotateWithView_, this.textRotation_, 1 / this.pixelRatio, Infinity,
+        this.textRotateWithView_, this.textRotation_, 1 / this.pixelRatio, NaN,
         textState.padding,
         !!textState.backgroundFill, !!textState.backgroundStroke,
         this.text_, this.textKey_, this.strokeKey_, this.fillKey_,