Add support for background images in renderer

js/term/screen_renderer.js

@@ -180,8 +180,9 @@ module.exports = class ScreenRenderer {
    * @param {number} options.cellWidth - cell width in pixels
    * @param {number} options.cellHeight - cell height in pixels
    * @param {number} options.bg - the background color
+   * @param {number} options.isDefaultBG - if true, will draw image background if available
    */
-  drawBackground ({ x, y, cellWidth, cellHeight, bg }) {
+  drawBackground ({ x, y, cellWidth, cellHeight, bg, isDefaultBG }) {
     const ctx = this.ctx
     const { width, height } = this.screen.window
     const padding = Math.round(this.screen._padding)
@@ -189,6 +190,8 @@ module.exports = class ScreenRenderer {
     let screenX = x * cellWidth + padding
     let screenY = y * cellHeight + padding
     let isBorderCell = x === 0 || y === 0 || x === width - 1 || y === height - 1
+
+    let fillX, fillY, fillWidth, fillHeight
     if (isBorderCell) {
       let left = screenX
       let top = screenY
@@ -198,11 +201,25 @@ module.exports = class ScreenRenderer {
       else if (x === width - 1) right += padding
       if (y === 0) top -= padding
       else if (y === height - 1) bottom += padding
-      ctx.clearRect(left, top, right - left, bottom - top)
+
-      ctx.fillRect(left, top, right - left, bottom - top)
+      fillX = left
+      fillY = top
+      fillWidth = right - left
+      fillHeight = bottom - top
+    } else {
+      fillX = screenX
+      fillY = screenY
+      fillWidth = cellWidth
+      fillHeight = cellHeight
+    }
+
+    ctx.clearRect(fillX, fillY, fillWidth, fillHeight)
+
+    if (isDefaultBG && bg >= 0 && this.backgroundImage) {
+      ctx.drawImage(this.backgroundImage, fillX, fillY, fillWidth, fillHeight,
+        fillX, fillY, fillWidth, fillHeight)
     } else {
-      ctx.clearRect(screenX, screenY, cellWidth, cellHeight)
+      ctx.fillRect(fillX, fillY, fillWidth, fillHeight)
-      ctx.fillRect(screenX, screenY, cellWidth, cellHeight)
     }
   }
 
@@ -497,8 +514,13 @@ module.exports = class ScreenRenderer {
       let bg = this.screen.screenBG[cell] | 0
       let attrs = this.screen.screenAttrs[cell] | 0
 
+      let isDefaultBG = false
+
       if (!(attrs & ATTR_FG)) fg = this.defaultFgNum
-      if (!(attrs & ATTR_BG)) bg = this.defaultBgNum
+      if (!(attrs & ATTR_BG)) {
+        bg = this.defaultBgNum
+        isDefaultBG = true
+      }
 
       if (attrs & ATTR_INVERSE) [fg, bg] = [bg, fg] // swap - reversed character colors
       if (this.screen.reverseVideo) [fg, bg] = [bg, fg] // swap - reversed all screen
@@ -525,7 +547,7 @@ module.exports = class ScreenRenderer {
       let font = attrs & FONT_MASK
       if (!fontGroups.has(font)) fontGroups.set(font, [])
 
-      fontGroups.get(font).push({ cell, x, y, text, fg, bg, attrs, isCursor, inSelection })
+      fontGroups.get(font).push({ cell, x, y, text, fg, bg, attrs, isCursor, inSelection, isDefaultBG })
       updateMap.set(cell, didUpdate)
     }
 
@@ -595,10 +617,10 @@ module.exports = class ScreenRenderer {
     // pass 1: backgrounds
     for (let font of fontGroups.keys()) {
       for (let data of fontGroups.get(font)) {
-        let { cell, x, y, text, bg } = data
+        let { cell, x, y, text, bg, isDefaultBG } = data
 
         if (redrawMap.get(cell)) {
-          this.drawBackground({ x, y, cellWidth, cellHeight, bg })
+          this.drawBackground({ x, y, cellWidth, cellHeight, bg, isDefaultBG })
 
           if (this.screen.window.debug && this.screen._debug) {
             // set cell flags