diff --git a/addons/xterm-addon-webgl/src/atlas/WebglCharAtlas.ts b/addons/xterm-addon-webgl/src/atlas/WebglCharAtlas.ts
index 9ba83de6..092cf2e5 100644
--- a/addons/xterm-addon-webgl/src/atlas/WebglCharAtlas.ts
+++ b/addons/xterm-addon-webgl/src/atlas/WebglCharAtlas.ts
@@ -110,7 +110,10 @@ export class WebglCharAtlas implements IDisposable {
     this._tmpCanvas = document.createElement('canvas');
     this._tmpCanvas.width = this._config.scaledCellWidth * 4 + TMP_CANVAS_GLYPH_PADDING * 2;
     this._tmpCanvas.height = this._config.scaledCellHeight + TMP_CANVAS_GLYPH_PADDING * 2;
-    this._tmpCtx = throwIfFalsy(this._tmpCanvas.getContext('2d', { alpha: this._config.allowTransparency }));
+    this._tmpCtx = throwIfFalsy(this._tmpCanvas.getContext('2d', {
+      alpha: this._config.allowTransparency,
+      willReadFrequently: true
+    }));
   }
 
   public dispose(): void {
diff --git a/src/common/Color.ts b/src/common/Color.ts
index 35bcdb88..6e70671b 100644
--- a/src/common/Color.ts
+++ b/src/common/Color.ts
@@ -110,7 +110,9 @@ export namespace css {
     const canvas = document.createElement('canvas');
     canvas.width = 1;
     canvas.height = 1;
-    const ctx = canvas.getContext('2d');
+    const ctx = canvas.getContext('2d', {
+      willReadFrequently: true
+    });
     if (ctx) {
       $ctx = ctx;
       $ctx.globalCompositeOperation = 'copy';