fix: use background-color on inline element

niklasvh#2558
niklasvh#3092

Author: Benjamin Grand

README.md

@@ -1,4 +1,4 @@
-html2canvas with "skipClone"
+html2canvas enhanced
 ===========
 
 ## JavaScript HTML renderer ##
@@ -24,15 +24,15 @@ The library should work fine on the following browsers (with `Promise` polyfill)
 ## Installation ##
 
 ```shell
-npm install html2canvas-[email protected]
+npm install html2canvas-enhanced
 ```
 
 ### NPM package aliasing ###
 
 ```json
 {
     "dependencies": {
-        "html2canvas": "npm:html2canvas-[email protected]"
+        "html2canvas": "npm:html2canvas-enhanced"
     }
 }
 ```

package-lock.json

@@ -1,13 +1,13 @@
 {
-  "title": "html2canvas-skipclone",
-  "name": "html2canvas-skipclone",
+  "title": "html2canvas-enhanced",
+  "name": "html2canvas-enhanced",
   "description": "Screenshots with JavaScript",
+  "version": "1.0.0",
+  "license": "MIT",
   "main": "dist/html2canvas.js",
   "module": "dist/html2canvas.esm.js",
   "typings": "dist/types/index.d.ts",
   "browser": "dist/html2canvas.js",
-  "version": "1.0.0",
-  "license": "MIT",
   "scripts": {
     "prebuild": "rimraf dist/ && rimraf build/ && mkdirp dist && mkdirp build",
     "build": "tsc --module commonjs && rollup -c rollup.config.ts && npm run build:create-reftest-list && npm run build:testrunner && npm run build:minify",

package.json

@@ -714,7 +714,21 @@ export class CanvasRenderer extends Renderer {
 
             if (!isTransparent(styles.backgroundColor)) {
                 this.ctx.fillStyle = asString(styles.backgroundColor);
-                this.ctx.fill();
+
+                if (styles.display === DISPLAY.INLINE) {
+                    for (const textNode of paint.container.textNodes) {
+                        for (const textBound of textNode.textBounds) {
+                            this.ctx.fillRect(
+                                textBound.bounds.left,
+                                textBound.bounds.top,
+                                textBound.bounds.width,
+                                textBound.bounds.height
+                            );
+                        }
+                    }
+                } else {
+                    this.ctx.fill();
+                }
             }
 
             await this.renderBackgroundImage(paint.container);