diff --git a/src/display/canvas.js b/src/display/canvas.js
index b98d0598c..2e4137eac 100644
--- a/src/display/canvas.js
+++ b/src/display/canvas.js
@@ -33,18 +33,18 @@ import { getShadingPatternFromIR, TilingPattern } from "./pattern_helper.js";
 // However, PDF needs a bit more state, which we store here.
 
 // Minimal font size that would be used during canvas fillText operations.
-var MIN_FONT_SIZE = 16;
+const MIN_FONT_SIZE = 16;
 // Maximum font size that would be used during canvas fillText operations.
-var MAX_FONT_SIZE = 100;
-var MAX_GROUP_SIZE = 4096;
+const MAX_FONT_SIZE = 100;
+const MAX_GROUP_SIZE = 4096;
 
 // Heuristic value used when enforcing minimum line widths.
-var MIN_WIDTH_FACTOR = 0.65;
+const MIN_WIDTH_FACTOR = 0.65;
 
-var COMPILE_TYPE3_GLYPHS = true;
-var MAX_SIZE_TO_COMPILE = 1000;
+const COMPILE_TYPE3_GLYPHS = true;
+const MAX_SIZE_TO_COMPILE = 1000;
 
-var FULL_CHUNK_HEIGHT = 16;
+const FULL_CHUNK_HEIGHT = 16;
 
 function addContextCurrentTransform(ctx) {
   // If the context doesn't expose a `mozCurrentTransform`, add a JS based one.
@@ -72,16 +72,16 @@ function addContextCurrentTransform(ctx) {
         // http://www.wolframalpha.com/input/?
         //   i=Inverse+{{a%2C+c%2C+e}%2C+{b%2C+d%2C+f}%2C+{0%2C+0%2C+1}}
 
-        var m = this._transformMatrix;
-        var a = m[0],
+        const m = this._transformMatrix;
+        const a = m[0],
           b = m[1],
           c = m[2],
           d = m[3],
           e = m[4],
           f = m[5];
 
-        var ad_bc = a * d - b * c;
-        var bc_ad = b * c - a * d;
+        const ad_bc = a * d - b * c;
+        const bc_ad = b * c - a * d;
 
         return [
           d / ad_bc,
@@ -95,7 +95,7 @@ function addContextCurrentTransform(ctx) {
     });
 
     ctx.save = function ctxSave() {
-      var old = this._transformMatrix;
+      const old = this._transformMatrix;
       this._transformStack.push(old);
       this._transformMatrix = old.slice(0, 6);
 
@@ -103,7 +103,7 @@ function addContextCurrentTransform(ctx) {
     };
 
     ctx.restore = function ctxRestore() {
-      var prev = this._transformStack.pop();
+      const prev = this._transformStack.pop();
       if (prev) {
         this._transformMatrix = prev;
         this._originalRestore();
@@ -111,7 +111,7 @@ function addContextCurrentTransform(ctx) {
     };
 
     ctx.translate = function ctxTranslate(x, y) {
-      var m = this._transformMatrix;
+      const m = this._transformMatrix;
       m[4] = m[0] * x + m[2] * y + m[4];
       m[5] = m[1] * x + m[3] * y + m[5];
 
@@ -119,7 +119,7 @@ function addContextCurrentTransform(ctx) {
     };
 
     ctx.scale = function ctxScale(x, y) {
-      var m = this._transformMatrix;
+      const m = this._transformMatrix;
       m[0] = m[0] * x;
       m[1] = m[1] * x;
       m[2] = m[2] * y;
@@ -129,7 +129,7 @@ function addContextCurrentTransform(ctx) {
     };
 
     ctx.transform = function ctxTransform(a, b, c, d, e, f) {
-      var m = this._transformMatrix;
+      const m = this._transformMatrix;
       this._transformMatrix = [
         m[0] * a + m[2] * b,
         m[1] * a + m[3] * b,
@@ -149,10 +149,10 @@ function addContextCurrentTransform(ctx) {
     };
 
     ctx.rotate = function ctxRotate(angle) {
-      var cosValue = Math.cos(angle);
-      var sinValue = Math.sin(angle);
+      const cosValue = Math.cos(angle);
+      const sinValue = Math.sin(angle);
 
-      var m = this._transformMatrix;
+      const m = this._transformMatrix;
       this._transformMatrix = [
         m[0] * cosValue + m[2] * sinValue,
         m[1] * cosValue + m[3] * sinValue,
@@ -167,7 +167,7 @@ function addContextCurrentTransform(ctx) {
   }
 }
 
-var CachedCanvases = (function CachedCanvasesClosure() {
+const CachedCanvases = (function CachedCanvasesClosure() {
   // eslint-disable-next-line no-shadow
   function CachedCanvases(canvasFactory) {
     this.canvasFactory = canvasFactory;
@@ -180,7 +180,7 @@ var CachedCanvases = (function CachedCanvasesClosure() {
       height,
       trackTransform
     ) {
-      var canvasEntry;
+      let canvasEntry;
       if (this.cache[id] !== undefined) {
         canvasEntry = this.cache[id];
         this.canvasFactory.reset(canvasEntry, width, height);
@@ -196,8 +196,8 @@ var CachedCanvases = (function CachedCanvasesClosure() {
       return canvasEntry;
     },
     clear() {
-      for (var id in this.cache) {
-        var canvasEntry = this.cache[id];
+      for (const id in this.cache) {
+        const canvasEntry = this.cache[id];
         this.canvasFactory.destroy(canvasEntry);
         delete this.cache[id];
       }
@@ -207,27 +207,27 @@ var CachedCanvases = (function CachedCanvasesClosure() {
 })();
 
 function compileType3Glyph(imgData) {
-  var POINT_TO_PROCESS_LIMIT = 1000;
+  const POINT_TO_PROCESS_LIMIT = 1000;
 
-  var width = imgData.width,
+  const width = imgData.width,
     height = imgData.height;
-  var i,
+  let i,
     j,
     j0,
     width1 = width + 1;
-  var points = new Uint8Array(width1 * (height + 1));
+  const points = new Uint8Array(width1 * (height + 1));
   // prettier-ignore
-  var POINT_TYPES =
+  const POINT_TYPES =
       new Uint8Array([0, 2, 4, 0, 1, 0, 5, 4, 8, 10, 0, 8, 0, 2, 1, 0]);
 
   // decodes bit-packed mask data
-  var lineSize = (width + 7) & ~7,
+  const lineSize = (width + 7) & ~7,
     data0 = imgData.data;
-  var data = new Uint8Array(lineSize * height),
+  let data = new Uint8Array(lineSize * height),
     pos = 0,
     ii;
   for (i = 0, ii = data0.length; i < ii; i++) {
-    var mask = 128,
+    let mask = 128,
       elem = data0[i];
     while (mask > 0) {
       data[pos++] = elem & mask ? 0 : 255;
@@ -245,7 +245,7 @@ function compileType3Glyph(imgData) {
   //   - outside corners: 1, 2, 4, 8;
   //   - inside corners: 7, 11, 13, 14;
   //   - and, intersections: 5, 10.
-  var count = 0;
+  let count = 0;
   pos = 0;
   if (data[pos] !== 0) {
     points[0] = 1;
@@ -271,7 +271,7 @@ function compileType3Glyph(imgData) {
     }
     // 'sum' is the position of the current pixel configuration in the 'TYPES'
     // array (in order 8-1-2-4, so we can use '>>2' to shift the column).
-    var sum = (data[pos] ? 4 : 0) + (data[pos - lineSize] ? 8 : 0);
+    let sum = (data[pos] ? 4 : 0) + (data[pos - lineSize] ? 8 : 0);
     for (j = 1; j < width; j++) {
       sum =
         (sum >> 2) +
@@ -315,24 +315,24 @@ function compileType3Glyph(imgData) {
   }
 
   // building outlines
-  var steps = new Int32Array([0, width1, -1, 0, -width1, 0, 0, 0, 1]);
-  var outlines = [];
+  const steps = new Int32Array([0, width1, -1, 0, -width1, 0, 0, 0, 1]);
+  const outlines = [];
   for (i = 0; count && i <= height; i++) {
-    var p = i * width1;
-    var end = p + width;
+    let p = i * width1;
+    const end = p + width;
     while (p < end && !points[p]) {
       p++;
     }
     if (p === end) {
       continue;
     }
-    var coords = [p % width1, i];
+    const coords = [p % width1, i];
 
     var type = points[p],
       p0 = p,
       pp;
     do {
-      var step = steps[type];
+      const step = steps[type];
       do {
         p += step;
       } while (!points[p]);
@@ -362,14 +362,14 @@ function compileType3Glyph(imgData) {
     --i;
   }
 
-  var drawOutline = function (c) {
+  const drawOutline = function (c) {
     c.save();
     // the path shall be painted in [0..1]x[0..1] space
     c.scale(1 / width, -1 / height);
     c.translate(0, -height);
     c.beginPath();
     for (let k = 0, kk = outlines.length; k < kk; k++) {
-      var o = outlines[k];
+      const o = outlines[k];
       c.moveTo(o[0], o[1]);
       for (let l = 2, ll = o.length; l < ll; l += 2) {
         c.lineTo(o[l], o[l + 1]);
@@ -383,7 +383,7 @@ function compileType3Glyph(imgData) {
   return drawOutline;
 }
 
-var CanvasExtraState = (function CanvasExtraStateClosure() {
+const CanvasExtraState = (function CanvasExtraStateClosure() {
   // eslint-disable-next-line no-shadow
   function CanvasExtraState() {
     // Are soft masks and alpha values shapes or opacities?
@@ -434,12 +434,12 @@ var CanvasExtraState = (function CanvasExtraStateClosure() {
 /**
  * @type {any}
  */
-var CanvasGraphics = (function CanvasGraphicsClosure() {
+const CanvasGraphics = (function CanvasGraphicsClosure() {
   // Defines the time the executeOperatorList is going to be executing
   // before it stops and shedules a continue of execution.
-  var EXECUTION_TIME = 15;
+  const EXECUTION_TIME = 15;
   // Defines the number of steps before checking the execution time
-  var EXECUTION_STEPS = 10;
+  const EXECUTION_STEPS = 10;
 
   // eslint-disable-next-line no-shadow
   function CanvasGraphics(
@@ -502,18 +502,18 @@ var CanvasGraphics = (function CanvasGraphicsClosure() {
     // will (conceptually) put pixels past the bounds of the canvas.  But
     // that's ok; any such pixels are ignored.
 
-    var height = imgData.height,
+    const height = imgData.height,
       width = imgData.width;
-    var partialChunkHeight = height % FULL_CHUNK_HEIGHT;
-    var fullChunks = (height - partialChunkHeight) / FULL_CHUNK_HEIGHT;
-    var totalChunks = partialChunkHeight === 0 ? fullChunks : fullChunks + 1;
+    const partialChunkHeight = height % FULL_CHUNK_HEIGHT;
+    const fullChunks = (height - partialChunkHeight) / FULL_CHUNK_HEIGHT;
+    const totalChunks = partialChunkHeight === 0 ? fullChunks : fullChunks + 1;
 
-    var chunkImgData = ctx.createImageData(width, FULL_CHUNK_HEIGHT);
-    var srcPos = 0,
+    const chunkImgData = ctx.createImageData(width, FULL_CHUNK_HEIGHT);
+    let srcPos = 0,
       destPos;
-    var src = imgData.data;
-    var dest = chunkImgData.data;
-    var i, j, thisChunkHeight, elemsInThisChunk;
+    const src = imgData.data;
+    const dest = chunkImgData.data;
+    let i, j, thisChunkHeight, elemsInThisChunk;
 
     let transferMapRed, transferMapGreen, transferMapBlue, transferMapGray;
     if (transferMaps) {
@@ -537,12 +537,12 @@ var CanvasGraphics = (function CanvasGraphicsClosure() {
     // imgData.kind tells us which one this is.
     if (imgData.kind === ImageKind.GRAYSCALE_1BPP) {
       // Grayscale, 1 bit per pixel (i.e. black-and-white).
-      var srcLength = src.byteLength;
-      var dest32 = new Uint32Array(dest.buffer, 0, dest.byteLength >> 2);
-      var dest32DataLength = dest32.length;
-      var fullSrcDiff = (width + 7) >> 3;
-      var white = 0xffffffff;
-      var black = IsLittleEndianCached.value ? 0xff000000 : 0x000000ff;
+      const srcLength = src.byteLength;
+      const dest32 = new Uint32Array(dest.buffer, 0, dest.byteLength >> 2);
+      const dest32DataLength = dest32.length;
+      const fullSrcDiff = (width + 7) >> 3;
+      let white = 0xffffffff;
+      let black = IsLittleEndianCached.value ? 0xff000000 : 0x000000ff;
 
       if (transferMapGray) {
         if (transferMapGray[0] === 0xff && transferMapGray[0xff] === 0) {
@@ -555,12 +555,12 @@ var CanvasGraphics = (function CanvasGraphicsClosure() {
           i < fullChunks ? FULL_CHUNK_HEIGHT : partialChunkHeight;
         destPos = 0;
         for (j = 0; j < thisChunkHeight; j++) {
-          var srcDiff = srcLength - srcPos;
+          const srcDiff = srcLength - srcPos;
           let k = 0;
-          var kEnd = srcDiff > fullSrcDiff ? width : srcDiff * 8 - 7;
-          var kEndUnrolled = kEnd & ~7;
-          var mask = 0;
-          var srcByte = 0;
+          const kEnd = srcDiff > fullSrcDiff ? width : srcDiff * 8 - 7;
+          const kEndUnrolled = kEnd & ~7;
+          let mask = 0;
+          let srcByte = 0;
           for (; k < kEndUnrolled; k += 8) {
             srcByte = src[srcPos++];
             dest32[destPos++] = srcByte & 128 ? white : black;
@@ -686,27 +686,27 @@ var CanvasGraphics = (function CanvasGraphicsClosure() {
   }
 
   function putBinaryImageMask(ctx, imgData) {
-    var height = imgData.height,
+    const height = imgData.height,
       width = imgData.width;
-    var partialChunkHeight = height % FULL_CHUNK_HEIGHT;
-    var fullChunks = (height - partialChunkHeight) / FULL_CHUNK_HEIGHT;
-    var totalChunks = partialChunkHeight === 0 ? fullChunks : fullChunks + 1;
+    const partialChunkHeight = height % FULL_CHUNK_HEIGHT;
+    const fullChunks = (height - partialChunkHeight) / FULL_CHUNK_HEIGHT;
+    const totalChunks = partialChunkHeight === 0 ? fullChunks : fullChunks + 1;
 
-    var chunkImgData = ctx.createImageData(width, FULL_CHUNK_HEIGHT);
-    var srcPos = 0;
-    var src = imgData.data;
-    var dest = chunkImgData.data;
+    const chunkImgData = ctx.createImageData(width, FULL_CHUNK_HEIGHT);
+    let srcPos = 0;
+    const src = imgData.data;
+    const dest = chunkImgData.data;
 
-    for (var i = 0; i < totalChunks; i++) {
-      var thisChunkHeight =
+    for (let i = 0; i < totalChunks; i++) {
+      const thisChunkHeight =
         i < fullChunks ? FULL_CHUNK_HEIGHT : partialChunkHeight;
 
       // Expand the mask so it can be used by the canvas.  Any required
       // inversion has already been handled.
-      var destPos = 3; // alpha component offset
-      for (var j = 0; j < thisChunkHeight; j++) {
-        var mask = 0;
-        for (var k = 0; k < width; k++) {
+      let destPos = 3; // alpha component offset
+      for (let j = 0; j < thisChunkHeight; j++) {
+        let mask = 0;
+        for (let k = 0; k < width; k++) {
           if (!mask) {
             var elem = src[srcPos++];
             mask = 128;
@@ -721,7 +721,7 @@ var CanvasGraphics = (function CanvasGraphicsClosure() {
   }
 
   function copyCtxState(sourceCtx, destCtx) {
-    var properties = [
+    const properties = [
       "strokeStyle",
       "fillStyle",
       "fillRule",
@@ -733,8 +733,8 @@ var CanvasGraphics = (function CanvasGraphicsClosure() {
       "globalCompositeOperation",
       "font",
     ];
-    for (var i = 0, ii = properties.length; i < ii; i++) {
-      var property = properties[i];
+    for (let i = 0, ii = properties.length; i < ii; i++) {
+      const property = properties[i];
       if (sourceCtx[property] !== undefined) {
         destCtx[property] = sourceCtx[property];
       }
@@ -763,15 +763,15 @@ var CanvasGraphics = (function CanvasGraphicsClosure() {
   }
 
   function composeSMaskBackdrop(bytes, r0, g0, b0) {
-    var length = bytes.length;
-    for (var i = 3; i < length; i += 4) {
-      var alpha = bytes[i];
+    const length = bytes.length;
+    for (let i = 3; i < length; i += 4) {
+      const alpha = bytes[i];
       if (alpha === 0) {
         bytes[i - 3] = r0;
         bytes[i - 2] = g0;
         bytes[i - 1] = b0;
       } else if (alpha < 255) {
-        var alpha_ = 255 - alpha;
+        const alpha_ = 255 - alpha;
         bytes[i - 3] = (bytes[i - 3] * alpha + r0 * alpha_) >> 8;
         bytes[i - 2] = (bytes[i - 2] * alpha + g0 * alpha_) >> 8;
         bytes[i - 1] = (bytes[i - 1] * alpha + b0 * alpha_) >> 8;
@@ -780,18 +780,18 @@ var CanvasGraphics = (function CanvasGraphicsClosure() {
   }
 
   function composeSMaskAlpha(maskData, layerData, transferMap) {
-    var length = maskData.length;
-    var scale = 1 / 255;
-    for (var i = 3; i < length; i += 4) {
-      var alpha = transferMap ? transferMap[maskData[i]] : maskData[i];
+    const length = maskData.length;
+    const scale = 1 / 255;
+    for (let i = 3; i < length; i += 4) {
+      const alpha = transferMap ? transferMap[maskData[i]] : maskData[i];
       layerData[i] = (layerData[i] * alpha * scale) | 0;
     }
   }
 
   function composeSMaskLuminosity(maskData, layerData, transferMap) {
-    var length = maskData.length;
-    for (var i = 3; i < length; i += 4) {
-      var y =
+    const length = maskData.length;
+    for (let i = 3; i < length; i += 4) {
+      const y =
         maskData[i - 3] * 77 + // * 0.3 / 255 * 0x10000
         maskData[i - 2] * 152 + // * 0.59 ....
         maskData[i - 1] * 28; // * 0.11 ....
@@ -810,12 +810,12 @@ var CanvasGraphics = (function CanvasGraphicsClosure() {
     backdrop,
     transferMap
   ) {
-    var hasBackdrop = !!backdrop;
-    var r0 = hasBackdrop ? backdrop[0] : 0;
-    var g0 = hasBackdrop ? backdrop[1] : 0;
-    var b0 = hasBackdrop ? backdrop[2] : 0;
+    const hasBackdrop = !!backdrop;
+    const r0 = hasBackdrop ? backdrop[0] : 0;
+    const g0 = hasBackdrop ? backdrop[1] : 0;
+    const b0 = hasBackdrop ? backdrop[2] : 0;
 
-    var composeFn;
+    let composeFn;
     if (subtype === "Luminosity") {
       composeFn = composeSMaskLuminosity;
     } else {
@@ -823,12 +823,12 @@ var CanvasGraphics = (function CanvasGraphicsClosure() {
     }
 
     // processing image in chunks to save memory
-    var PIXELS_TO_PROCESS = 1048576;
-    var chunkSize = Math.min(height, Math.ceil(PIXELS_TO_PROCESS / width));
-    for (var row = 0; row < height; row += chunkSize) {
-      var chunkHeight = Math.min(chunkSize, height - row);
-      var maskData = maskCtx.getImageData(0, row, width, chunkHeight);
-      var layerData = layerCtx.getImageData(0, row, width, chunkHeight);
+    const PIXELS_TO_PROCESS = 1048576;
+    const chunkSize = Math.min(height, Math.ceil(PIXELS_TO_PROCESS / width));
+    for (let row = 0; row < height; row += chunkSize) {
+      const chunkHeight = Math.min(chunkSize, height - row);
+      const maskData = maskCtx.getImageData(0, row, width, chunkHeight);
+      const layerData = layerCtx.getImageData(0, row, width, chunkHeight);
 
       if (hasBackdrop) {
         composeSMaskBackdrop(maskData.data, r0, g0, b0);
@@ -840,8 +840,8 @@ var CanvasGraphics = (function CanvasGraphicsClosure() {
   }
 
   function composeSMask(ctx, smask, layerCtx, webGLContext) {
-    var mask = smask.canvas;
-    var maskCtx = smask.context;
+    const mask = smask.canvas;
+    const maskCtx = smask.context;
 
     ctx.setTransform(
       smask.scaleX,
@@ -852,7 +852,7 @@ var CanvasGraphics = (function CanvasGraphicsClosure() {
       smask.offsetY
     );
 
-    var backdrop = smask.backdrop || null;
+    const backdrop = smask.backdrop || null;
     if (!smask.transferMap && webGLContext.isEnabled) {
       const composed = webGLContext.composeSMask({
         layer: layerCtx.canvas,
@@ -878,10 +878,10 @@ var CanvasGraphics = (function CanvasGraphicsClosure() {
     ctx.drawImage(mask, 0, 0);
   }
 
-  var LINE_CAP_STYLES = ["butt", "round", "square"];
-  var LINE_JOIN_STYLES = ["miter", "round", "bevel"];
-  var NORMAL_CLIP = {};
-  var EO_CLIP = {};
+  const LINE_CAP_STYLES = ["butt", "round", "square"];
+  const LINE_JOIN_STYLES = ["miter", "round", "bevel"];
+  const NORMAL_CLIP = {};
+  const EO_CLIP = {};
 
   CanvasGraphics.prototype = {
     beginDrawing({
@@ -895,8 +895,8 @@ var CanvasGraphics = (function CanvasGraphicsClosure() {
       // backdrop. The problem with a transparent backdrop though is we then
       // don't get sub pixel anti aliasing on text, creating temporary
       // transparent canvas when we have blend modes.
-      var width = this.ctx.canvas.width;
-      var height = this.ctx.canvas.height;
+      const width = this.ctx.canvas.width;
+      const height = this.ctx.canvas.height;
 
       this.ctx.save();
       this.ctx.fillStyle = background || "rgb(255, 255, 255)";
@@ -904,7 +904,7 @@ var CanvasGraphics = (function CanvasGraphicsClosure() {
       this.ctx.restore();
 
       if (transparency) {
-        var transparentCanvas = this.cachedCanvases.getCanvas(
+        const transparentCanvas = this.cachedCanvases.getCanvas(
           "transparent",
           width,
           height,
@@ -942,25 +942,25 @@ var CanvasGraphics = (function CanvasGraphicsClosure() {
       continueCallback,
       stepper
     ) {
-      var argsArray = operatorList.argsArray;
-      var fnArray = operatorList.fnArray;
-      var i = executionStartIdx || 0;
-      var argsArrayLen = argsArray.length;
+      const argsArray = operatorList.argsArray;
+      const fnArray = operatorList.fnArray;
+      let i = executionStartIdx || 0;
+      const argsArrayLen = argsArray.length;
 
       // Sometimes the OperatorList to execute is empty.
       if (argsArrayLen === i) {
         return i;
       }
 
-      var chunkOperations =
+      const chunkOperations =
         argsArrayLen - i > EXECUTION_STEPS &&
         typeof continueCallback === "function";
-      var endTime = chunkOperations ? Date.now() + EXECUTION_TIME : 0;
-      var steps = 0;
+      const endTime = chunkOperations ? Date.now() + EXECUTION_TIME : 0;
+      let steps = 0;
 
-      var commonObjs = this.commonObjs;
-      var objs = this.objs;
-      var fnId;
+      const commonObjs = this.commonObjs;
+      const objs = this.objs;
+      let fnId;
 
       while (true) {
         if (stepper !== undefined && i === stepper.nextBreakPoint) {
@@ -1047,7 +1047,7 @@ var CanvasGraphics = (function CanvasGraphicsClosure() {
       this.ctx.miterLimit = limit;
     },
     setDash: function CanvasGraphics_setDash(dashArray, dashPhase) {
-      var ctx = this.ctx;
+      const ctx = this.ctx;
       if (ctx.setLineDash !== undefined) {
         ctx.setLineDash(dashArray);
         ctx.lineDashOffset = dashPhase;
@@ -1060,10 +1060,10 @@ var CanvasGraphics = (function CanvasGraphicsClosure() {
       // This operation is ignored since we haven't found a use case for it yet.
     },
     setGState: function CanvasGraphics_setGState(states) {
-      for (var i = 0, ii = states.length; i < ii; i++) {
-        var state = states[i];
-        var key = state[0];
-        var value = state[1];
+      for (let i = 0, ii = states.length; i < ii; i++) {
+        const state = states[i];
+        const key = state[0];
+        const value = state[1];
 
         switch (key) {
           case "LW":
@@ -1127,22 +1127,22 @@ var CanvasGraphics = (function CanvasGraphicsClosure() {
       }
     },
     beginSMaskGroup: function CanvasGraphics_beginSMaskGroup() {
-      var activeSMask = this.current.activeSMask;
-      var drawnWidth = activeSMask.canvas.width;
-      var drawnHeight = activeSMask.canvas.height;
-      var cacheId = "smaskGroupAt" + this.groupLevel;
-      var scratchCanvas = this.cachedCanvases.getCanvas(
+      const activeSMask = this.current.activeSMask;
+      const drawnWidth = activeSMask.canvas.width;
+      const drawnHeight = activeSMask.canvas.height;
+      const cacheId = "smaskGroupAt" + this.groupLevel;
+      const scratchCanvas = this.cachedCanvases.getCanvas(
         cacheId,
         drawnWidth,
         drawnHeight,
         true
       );
 
-      var currentCtx = this.ctx;
-      var currentTransform = currentCtx.mozCurrentTransform;
+      const currentCtx = this.ctx;
+      const currentTransform = currentCtx.mozCurrentTransform;
       this.ctx.save();
 
-      var groupCtx = scratchCanvas.context;
+      const groupCtx = scratchCanvas.context;
       groupCtx.scale(1 / activeSMask.scaleX, 1 / activeSMask.scaleY);
       groupCtx.translate(-activeSMask.offsetX, -activeSMask.offsetY);
       groupCtx.transform.apply(groupCtx, currentTransform);
@@ -1162,7 +1162,7 @@ var CanvasGraphics = (function CanvasGraphicsClosure() {
     suspendSMaskGroup: function CanvasGraphics_endSMaskGroup() {
       // Similar to endSMaskGroup, the intermediate canvas has to be composed
       // and future ctx state restored.
-      var groupCtx = this.ctx;
+      const groupCtx = this.ctx;
       this.groupLevel--;
       this.ctx = this.groupStack.pop();
 
@@ -1180,7 +1180,7 @@ var CanvasGraphics = (function CanvasGraphicsClosure() {
       this.current.resumeSMaskCtx = groupCtx;
       // Transform was changed in the SMask canvas, reflecting this change on
       // this.ctx.
-      var deltaTransform = Util.transform(
+      const deltaTransform = Util.transform(
         this.current.activeSMask.startTransformInverse,
         groupCtx.mozCurrentTransform
       );
@@ -1196,14 +1196,14 @@ var CanvasGraphics = (function CanvasGraphicsClosure() {
       // Resuming state saved by suspendSMaskGroup. We don't need to restore
       // any groupCtx state since restore() command (the only caller) will do
       // that for us. See also beginSMaskGroup.
-      var groupCtx = this.current.resumeSMaskCtx;
-      var currentCtx = this.ctx;
+      const groupCtx = this.current.resumeSMaskCtx;
+      const currentCtx = this.ctx;
       this.ctx = groupCtx;
       this.groupStack.push(currentCtx);
       this.groupLevel++;
     },
     endSMaskGroup: function CanvasGraphics_endSMaskGroup() {
-      var groupCtx = this.ctx;
+      const groupCtx = this.ctx;
       this.groupLevel--;
       this.ctx = this.groupStack.pop();
 
@@ -1217,7 +1217,7 @@ var CanvasGraphics = (function CanvasGraphicsClosure() {
       copyCtxState(groupCtx, this.ctx);
       // Transform was changed in the SMask canvas, reflecting this change on
       // this.ctx.
-      var deltaTransform = Util.transform(
+      const deltaTransform = Util.transform(
         this.current.activeSMask.startTransformInverse,
         groupCtx.mozCurrentTransform
       );
@@ -1225,7 +1225,7 @@ var CanvasGraphics = (function CanvasGraphicsClosure() {
     },
     save: function CanvasGraphics_save() {
       this.ctx.save();
-      var old = this.current;
+      const old = this.current;
       this.stateStack.push(old);
       this.current = old.clone();
       this.current.resumeSMaskCtx = null;
@@ -1267,11 +1267,11 @@ var CanvasGraphics = (function CanvasGraphicsClosure() {
 
     // Path
     constructPath: function CanvasGraphics_constructPath(ops, args) {
-      var ctx = this.ctx;
-      var current = this.current;
-      var x = current.x,
+      const ctx = this.ctx;
+      const current = this.current;
+      let x = current.x,
         y = current.y;
-      for (var i = 0, j = 0, ii = ops.length; i < ii; i++) {
+      for (let i = 0, j = 0, ii = ops.length; i < ii; i++) {
         switch (ops[i] | 0) {
           case OPS.rectangle:
             x = args[j++];
@@ -1347,8 +1347,8 @@ var CanvasGraphics = (function CanvasGraphicsClosure() {
     },
     stroke: function CanvasGraphics_stroke(consumePath) {
       consumePath = typeof consumePath !== "undefined" ? consumePath : true;
-      var ctx = this.ctx;
-      var strokeColor = this.current.strokeColor;
+      const ctx = this.ctx;
+      const strokeColor = this.current.strokeColor;
       // For stroke we want to temporarily change the global alpha to the
       // stroking alpha.
       ctx.globalAlpha = this.current.strokeAlpha;
@@ -1395,10 +1395,10 @@ var CanvasGraphics = (function CanvasGraphicsClosure() {
     },
     fill: function CanvasGraphics_fill(consumePath) {
       consumePath = typeof consumePath !== "undefined" ? consumePath : true;
-      var ctx = this.ctx;
-      var fillColor = this.current.fillColor;
-      var isPatternFill = this.current.patternFill;
-      var needRestore = false;
+      const ctx = this.ctx;
+      const fillColor = this.current.fillColor;
+      const isPatternFill = this.current.patternFill;
+      let needRestore = false;
 
       if (isPatternFill) {
         ctx.save();
@@ -1468,8 +1468,8 @@ var CanvasGraphics = (function CanvasGraphicsClosure() {
       this.current.y = this.current.lineY = 0;
     },
     endText: function CanvasGraphics_endText() {
-      var paths = this.pendingTextPaths;
-      var ctx = this.ctx;
+      const paths = this.pendingTextPaths;
+      const ctx = this.ctx;
       if (paths === undefined) {
         ctx.beginPath();
         return;
@@ -1477,8 +1477,8 @@ var CanvasGraphics = (function CanvasGraphicsClosure() {
 
       ctx.save();
       ctx.beginPath();
-      for (var i = 0; i < paths.length; i++) {
-        var path = paths[i];
+      for (let i = 0; i < paths.length; i++) {
+        const path = paths[i];
         ctx.setTransform.apply(ctx, path.transform);
         ctx.translate(path.x, path.y);
         path.addToPath(ctx, path.fontSize);
@@ -1501,8 +1501,8 @@ var CanvasGraphics = (function CanvasGraphicsClosure() {
       this.current.leading = -leading;
     },
     setFont: function CanvasGraphics_setFont(fontRefName, size) {
-      var fontObj = this.commonObjs.get(fontRefName);
-      var current = this.current;
+      const fontObj = this.commonObjs.get(fontRefName);
+      const current = this.current;
 
       if (!fontObj) {
         throw new Error(`Can't find font for ${fontRefName}`);
@@ -1534,7 +1534,7 @@ var CanvasGraphics = (function CanvasGraphicsClosure() {
         return; // we don't need ctx.font for Type3 fonts
       }
 
-      var name = fontObj.loadedName || "sans-serif";
+      const name = fontObj.loadedName || "sans-serif";
 
       let bold = "normal";
       if (fontObj.black) {
@@ -1542,8 +1542,8 @@ var CanvasGraphics = (function CanvasGraphicsClosure() {
       } else if (fontObj.bold) {
         bold = "bold";
       }
-      var italic = fontObj.italic ? "italic" : "normal";
-      var typeface = `"${name}", ${fontObj.fallbackName}`;
+      const italic = fontObj.italic ? "italic" : "normal";
+      const typeface = `"${name}", ${fontObj.fallbackName}`;
 
       // Some font backends cannot handle fonts below certain size.
       // Keeping the font at minimal size and using the fontSizeScale to change
@@ -1585,19 +1585,19 @@ var CanvasGraphics = (function CanvasGraphicsClosure() {
     },
 
     paintChar(character, x, y, patternTransform) {
-      var ctx = this.ctx;
-      var current = this.current;
-      var font = current.font;
-      var textRenderingMode = current.textRenderingMode;
-      var fontSize = current.fontSize / current.fontSizeScale;
-      var fillStrokeMode =
+      const ctx = this.ctx;
+      const current = this.current;
+      const font = current.font;
+      const textRenderingMode = current.textRenderingMode;
+      const fontSize = current.fontSize / current.fontSizeScale;
+      const fillStrokeMode =
         textRenderingMode & TextRenderingMode.FILL_STROKE_MASK;
-      var isAddToPathSet = !!(
+      const isAddToPathSet = !!(
         textRenderingMode & TextRenderingMode.ADD_TO_PATH_FLAG
       );
       const patternFill = current.patternFill && !font.missingFile;
 
-      var addToPath;
+      let addToPath;
       if (font.disableFontFace || isAddToPathSet || patternFill) {
         addToPath = font.getPathGenerator(this.commonObjs, character);
       }
@@ -1639,7 +1639,7 @@ var CanvasGraphics = (function CanvasGraphicsClosure() {
       }
 
       if (isAddToPathSet) {
-        var paths = this.pendingTextPaths || (this.pendingTextPaths = []);
+        const paths = this.pendingTextPaths || (this.pendingTextPaths = []);
         paths.push({
           transform: ctx.mozCurrentTransform,
           x,
@@ -1660,9 +1660,9 @@ var CanvasGraphics = (function CanvasGraphicsClosure() {
       );
       ctx.scale(1.5, 1);
       ctx.fillText("I", 0, 10);
-      var data = ctx.getImageData(0, 0, 10, 10).data;
-      var enabled = false;
-      for (var i = 3; i < data.length; i += 4) {
+      const data = ctx.getImageData(0, 0, 10, 10).data;
+      let enabled = false;
+      for (let i = 3; i < data.length; i += 4) {
         if (data[i] > 0 && data[i] < 255) {
           enabled = true;
           break;
@@ -1672,30 +1672,30 @@ var CanvasGraphics = (function CanvasGraphicsClosure() {
     },
 
     showText: function CanvasGraphics_showText(glyphs) {
-      var current = this.current;
-      var font = current.font;
+      const current = this.current;
+      const font = current.font;
       if (font.isType3Font) {
         return this.showType3Text(glyphs);
       }
 
-      var fontSize = current.fontSize;
+      const fontSize = current.fontSize;
       if (fontSize === 0) {
         return undefined;
       }
 
-      var ctx = this.ctx;
-      var fontSizeScale = current.fontSizeScale;
-      var charSpacing = current.charSpacing;
-      var wordSpacing = current.wordSpacing;
-      var fontDirection = current.fontDirection;
-      var textHScale = current.textHScale * fontDirection;
-      var glyphsLength = glyphs.length;
-      var vertical = font.vertical;
-      var spacingDir = vertical ? 1 : -1;
-      var defaultVMetrics = font.defaultVMetrics;
-      var widthAdvanceScale = fontSize * current.fontMatrix[0];
+      const ctx = this.ctx;
+      const fontSizeScale = current.fontSizeScale;
+      const charSpacing = current.charSpacing;
+      const wordSpacing = current.wordSpacing;
+      const fontDirection = current.fontDirection;
+      const textHScale = current.textHScale * fontDirection;
+      const glyphsLength = glyphs.length;
+      const vertical = font.vertical;
+      const spacingDir = vertical ? 1 : -1;
+      const defaultVMetrics = font.defaultVMetrics;
+      const widthAdvanceScale = fontSize * current.fontMatrix[0];
 
-      var simpleFillText =
+      const simpleFillText =
         current.textRenderingMode === TextRenderingMode.FILL &&
         !font.disableFontFace &&
         !current.patternFill;
@@ -1720,10 +1720,10 @@ var CanvasGraphics = (function CanvasGraphicsClosure() {
         ctx.scale(textHScale, 1);
       }
 
-      var lineWidth = current.lineWidth;
-      var scale = current.textMatrixScale;
+      let lineWidth = current.lineWidth;
+      const scale = current.textMatrixScale;
       if (scale === 0 || lineWidth === 0) {
-        var fillStrokeMode =
+        const fillStrokeMode =
           current.textRenderingMode & TextRenderingMode.FILL_STROKE_MASK;
         if (
           fillStrokeMode === TextRenderingMode.STROKE ||
@@ -1743,21 +1743,21 @@ var CanvasGraphics = (function CanvasGraphicsClosure() {
 
       ctx.lineWidth = lineWidth;
 
-      var x = 0,
+      let x = 0,
         i;
       for (i = 0; i < glyphsLength; ++i) {
-        var glyph = glyphs[i];
+        const glyph = glyphs[i];
         if (isNum(glyph)) {
           x += (spacingDir * glyph * fontSize) / 1000;
           continue;
         }
 
-        var restoreNeeded = false;
-        var spacing = (glyph.isSpace ? wordSpacing : 0) + charSpacing;
-        var character = glyph.fontChar;
-        var accent = glyph.accent;
+        let restoreNeeded = false;
+        const spacing = (glyph.isSpace ? wordSpacing : 0) + charSpacing;
+        const character = glyph.fontChar;
+        const accent = glyph.accent;
         var scaledX, scaledY, scaledAccentX, scaledAccentY;
-        var width = glyph.width;
+        let width = glyph.width;
         if (vertical) {
           var vmetric, vx, vy;
           vmetric = glyph.vmetric || defaultVMetrics;
@@ -1777,11 +1777,11 @@ var CanvasGraphics = (function CanvasGraphicsClosure() {
           // Some standard fonts may not have the exact width: rescale per
           // character if measured width is greater than expected glyph width
           // and subpixel-aa is enabled, otherwise just center the glyph.
-          var measuredWidth =
+          const measuredWidth =
             ((ctx.measureText(character).width * 1000) / fontSize) *
             fontSizeScale;
           if (width < measuredWidth && this.isFontSubpixelAAEnabled) {
-            var characterScaleX = width / measuredWidth;
+            const characterScaleX = width / measuredWidth;
             restoreNeeded = true;
             ctx.save();
             ctx.scale(characterScaleX, 1);
@@ -1837,20 +1837,20 @@ var CanvasGraphics = (function CanvasGraphicsClosure() {
 
     showType3Text: function CanvasGraphics_showType3Text(glyphs) {
       // Type3 fonts - each glyph is a "mini-PDF"
-      var ctx = this.ctx;
-      var current = this.current;
-      var font = current.font;
-      var fontSize = current.fontSize;
-      var fontDirection = current.fontDirection;
-      var spacingDir = font.vertical ? 1 : -1;
-      var charSpacing = current.charSpacing;
-      var wordSpacing = current.wordSpacing;
-      var textHScale = current.textHScale * fontDirection;
-      var fontMatrix = current.fontMatrix || FONT_IDENTITY_MATRIX;
-      var glyphsLength = glyphs.length;
-      var isTextInvisible =
+      const ctx = this.ctx;
+      const current = this.current;
+      const font = current.font;
+      const fontSize = current.fontSize;
+      const fontDirection = current.fontDirection;
+      const spacingDir = font.vertical ? 1 : -1;
+      const charSpacing = current.charSpacing;
+      const wordSpacing = current.wordSpacing;
+      const textHScale = current.textHScale * fontDirection;
+      const fontMatrix = current.fontMatrix || FONT_IDENTITY_MATRIX;
+      const glyphsLength = glyphs.length;
+      const isTextInvisible =
         current.textRenderingMode === TextRenderingMode.INVISIBLE;
-      var i, glyph, width, spacingLength;
+      let i, glyph, width, spacingLength;
 
       if (isTextInvisible || fontSize === 0) {
         return;
@@ -1872,8 +1872,8 @@ var CanvasGraphics = (function CanvasGraphicsClosure() {
           continue;
         }
 
-        var spacing = (glyph.isSpace ? wordSpacing : 0) + charSpacing;
-        var operatorList = font.charProcOperatorList[glyph.operatorListId];
+        const spacing = (glyph.isSpace ? wordSpacing : 0) + charSpacing;
+        const operatorList = font.charProcOperatorList[glyph.operatorListId];
         if (!operatorList) {
           warn(`Type3 character "${glyph.operatorListId}" is not available.`);
           continue;
@@ -1887,7 +1887,7 @@ var CanvasGraphics = (function CanvasGraphicsClosure() {
           this.restore();
         }
 
-        var transformed = Util.applyTransform([glyph.width, 0], fontMatrix);
+        const transformed = Util.applyTransform([glyph.width, 0], fontMatrix);
         width = transformed[0] * fontSize + spacing;
 
         ctx.translate(width, 0);
@@ -1919,12 +1919,12 @@ var CanvasGraphics = (function CanvasGraphicsClosure() {
 
     // Color
     getColorN_Pattern: function CanvasGraphics_getColorN_Pattern(IR) {
-      var pattern;
+      let pattern;
       if (IR[0] === "TilingPattern") {
-        var color = IR[1];
-        var baseTransform =
+        const color = IR[1];
+        const baseTransform =
           this.baseTransform || this.ctx.mozCurrentTransform.slice();
-        var canvasGraphicsFactory = {
+        const canvasGraphicsFactory = {
           createCanvasGraphics: ctx => {
             return new CanvasGraphics(
               ctx,
@@ -1955,12 +1955,12 @@ var CanvasGraphics = (function CanvasGraphicsClosure() {
       this.current.patternFill = true;
     },
     setStrokeRGBColor: function CanvasGraphics_setStrokeRGBColor(r, g, b) {
-      var color = Util.makeCssRgb(r, g, b);
+      const color = Util.makeCssRgb(r, g, b);
       this.ctx.strokeStyle = color;
       this.current.strokeColor = color;
     },
     setFillRGBColor: function CanvasGraphics_setFillRGBColor(r, g, b) {
-      var color = Util.makeCssRgb(r, g, b);
+      const color = Util.makeCssRgb(r, g, b);
       this.ctx.fillStyle = color;
       this.current.fillColor = color;
       this.current.patternFill = false;
@@ -1970,27 +1970,27 @@ var CanvasGraphics = (function CanvasGraphicsClosure() {
       if (!this.contentVisible) {
         return;
       }
-      var ctx = this.ctx;
+      const ctx = this.ctx;
 
       this.save();
-      var pattern = getShadingPatternFromIR(patternIR);
+      const pattern = getShadingPatternFromIR(patternIR);
       ctx.fillStyle = pattern.getPattern(ctx, this, true);
 
-      var inv = ctx.mozCurrentTransformInverse;
+      const inv = ctx.mozCurrentTransformInverse;
       if (inv) {
-        var canvas = ctx.canvas;
-        var width = canvas.width;
-        var height = canvas.height;
+        const canvas = ctx.canvas;
+        const width = canvas.width;
+        const height = canvas.height;
 
-        var bl = Util.applyTransform([0, 0], inv);
-        var br = Util.applyTransform([0, height], inv);
-        var ul = Util.applyTransform([width, 0], inv);
-        var ur = Util.applyTransform([width, height], inv);
+        const bl = Util.applyTransform([0, 0], inv);
+        const br = Util.applyTransform([0, height], inv);
+        const ul = Util.applyTransform([width, 0], inv);
+        const ur = Util.applyTransform([width, height], inv);
 
-        var x0 = Math.min(bl[0], br[0], ul[0], ur[0]);
-        var y0 = Math.min(bl[1], br[1], ul[1], ur[1]);
-        var x1 = Math.max(bl[0], br[0], ul[0], ur[0]);
-        var y1 = Math.max(bl[1], br[1], ul[1], ur[1]);
+        const x0 = Math.min(bl[0], br[0], ul[0], ur[0]);
+        const y0 = Math.min(bl[1], br[1], ul[1], ur[1]);
+        const x1 = Math.max(bl[0], br[0], ul[0], ur[0]);
+        const y1 = Math.max(bl[1], br[1], ul[1], ur[1]);
 
         this.ctx.fillRect(x0, y0, x1 - x0, y1 - y0);
       } else {
@@ -2031,8 +2031,8 @@ var CanvasGraphics = (function CanvasGraphicsClosure() {
       this.baseTransform = this.ctx.mozCurrentTransform;
 
       if (bbox) {
-        var width = bbox[2] - bbox[0];
-        var height = bbox[3] - bbox[1];
+        const width = bbox[2] - bbox[0];
+        const height = bbox[3] - bbox[1];
         this.ctx.rect(bbox[0], bbox[1], width, height);
         this.clip();
         this.endPath();
@@ -2053,7 +2053,7 @@ var CanvasGraphics = (function CanvasGraphicsClosure() {
       }
 
       this.save();
-      var currentCtx = this.ctx;
+      const currentCtx = this.ctx;
       // TODO non-isolated groups - according to Rik at adobe non-isolated
       // group results aren't usually that different and they even have tools
       // that ignore this setting. Notes from Rik on implementing:
@@ -2077,7 +2077,7 @@ var CanvasGraphics = (function CanvasGraphicsClosure() {
         warn("Knockout groups not supported.");
       }
 
-      var currentTransform = currentCtx.mozCurrentTransform;
+      const currentTransform = currentCtx.mozCurrentTransform;
       if (group.matrix) {
         currentCtx.transform.apply(currentCtx, group.matrix);
       }
@@ -2087,12 +2087,12 @@ var CanvasGraphics = (function CanvasGraphicsClosure() {
 
       // Based on the current transform figure out how big the bounding box
       // will actually be.
-      var bounds = Util.getAxialAlignedBoundingBox(
+      let bounds = Util.getAxialAlignedBoundingBox(
         group.bbox,
         currentCtx.mozCurrentTransform
       );
       // Clip the bounding box to the current canvas.
-      var canvasBounds = [
+      const canvasBounds = [
         0,
         0,
         currentCtx.canvas.width,
@@ -2101,11 +2101,11 @@ var CanvasGraphics = (function CanvasGraphicsClosure() {
       bounds = Util.intersect(bounds, canvasBounds) || [0, 0, 0, 0];
       // Use ceil in case we're between sizes so we don't create canvas that is
       // too small and make the canvas at least 1x1 pixels.
-      var offsetX = Math.floor(bounds[0]);
-      var offsetY = Math.floor(bounds[1]);
-      var drawnWidth = Math.max(Math.ceil(bounds[2]) - offsetX, 1);
-      var drawnHeight = Math.max(Math.ceil(bounds[3]) - offsetY, 1);
-      var scaleX = 1,
+      const offsetX = Math.floor(bounds[0]);
+      const offsetY = Math.floor(bounds[1]);
+      let drawnWidth = Math.max(Math.ceil(bounds[2]) - offsetX, 1);
+      let drawnHeight = Math.max(Math.ceil(bounds[3]) - offsetY, 1);
+      let scaleX = 1,
         scaleY = 1;
       if (drawnWidth > MAX_GROUP_SIZE) {
         scaleX = drawnWidth / MAX_GROUP_SIZE;
@@ -2116,18 +2116,18 @@ var CanvasGraphics = (function CanvasGraphicsClosure() {
         drawnHeight = MAX_GROUP_SIZE;
       }
 
-      var cacheId = "groupAt" + this.groupLevel;
+      let cacheId = "groupAt" + this.groupLevel;
       if (group.smask) {
         // Using two cache entries is case if masks are used one after another.
         cacheId += "_smask_" + (this.smaskCounter++ % 2);
       }
-      var scratchCanvas = this.cachedCanvases.getCanvas(
+      const scratchCanvas = this.cachedCanvases.getCanvas(
         cacheId,
         drawnWidth,
         drawnHeight,
         true
       );
-      var groupCtx = scratchCanvas.context;
+      const groupCtx = scratchCanvas.context;
 
       // Since we created a new canvas that is just the size of the bounding box
       // we have to translate the group ctx.
@@ -2177,7 +2177,7 @@ var CanvasGraphics = (function CanvasGraphicsClosure() {
         return;
       }
       this.groupLevel--;
-      var groupCtx = this.ctx;
+      const groupCtx = this.ctx;
       this.ctx = this.groupStack.pop();
       // Turn off image smoothing to avoid sub pixel interpolation which can
       // look kind of blurry for some pdfs.
@@ -2215,8 +2215,8 @@ var CanvasGraphics = (function CanvasGraphicsClosure() {
       this.current = new CanvasExtraState();
 
       if (Array.isArray(rect) && rect.length === 4) {
-        var width = rect[2] - rect[0];
-        var height = rect[3] - rect[1];
+        const width = rect[2] - rect[0];
+        const height = rect[3] - rect[1];
         this.ctx.rect(rect[0], rect[1], width, height);
         this.clip();
         this.endPath();
@@ -2234,13 +2234,13 @@ var CanvasGraphics = (function CanvasGraphicsClosure() {
       if (!this.contentVisible) {
         return;
       }
-      var ctx = this.ctx;
-      var width = img.width,
+      const ctx = this.ctx;
+      const width = img.width,
         height = img.height;
-      var fillColor = this.current.fillColor;
-      var isPatternFill = this.current.patternFill;
+      const fillColor = this.current.fillColor;
+      const isPatternFill = this.current.patternFill;
 
-      var glyph = this.processingType3;
+      const glyph = this.processingType3;
 
       if (COMPILE_TYPE3_GLYPHS && glyph && glyph.compiled === undefined) {
         if (width <= MAX_SIZE_TO_COMPILE && height <= MAX_SIZE_TO_COMPILE) {
@@ -2255,12 +2255,12 @@ var CanvasGraphics = (function CanvasGraphicsClosure() {
         return;
       }
 
-      var maskCanvas = this.cachedCanvases.getCanvas(
+      const maskCanvas = this.cachedCanvases.getCanvas(
         "maskCanvas",
         width,
         height
       );
-      var maskCtx = maskCanvas.context;
+      const maskCtx = maskCanvas.context;
       maskCtx.save();
 
       putBinaryImageMask(maskCtx, img);
@@ -2288,17 +2288,17 @@ var CanvasGraphics = (function CanvasGraphicsClosure() {
       if (!this.contentVisible) {
         return;
       }
-      var width = imgData.width;
-      var height = imgData.height;
-      var fillColor = this.current.fillColor;
-      var isPatternFill = this.current.patternFill;
+      const width = imgData.width;
+      const height = imgData.height;
+      const fillColor = this.current.fillColor;
+      const isPatternFill = this.current.patternFill;
 
-      var maskCanvas = this.cachedCanvases.getCanvas(
+      const maskCanvas = this.cachedCanvases.getCanvas(
         "maskCanvas",
         width,
         height
       );
-      var maskCtx = maskCanvas.context;
+      const maskCtx = maskCanvas.context;
       maskCtx.save();
 
       putBinaryImageMask(maskCtx, imgData);
@@ -2312,8 +2312,8 @@ var CanvasGraphics = (function CanvasGraphicsClosure() {
 
       maskCtx.restore();
 
-      var ctx = this.ctx;
-      for (var i = 0, ii = positions.length; i < ii; i += 2) {
+      const ctx = this.ctx;
+      for (let i = 0, ii = positions.length; i < ii; i += 2) {
         ctx.save();
         ctx.transform(
           scaleX,
@@ -2335,21 +2335,21 @@ var CanvasGraphics = (function CanvasGraphicsClosure() {
       if (!this.contentVisible) {
         return;
       }
-      var ctx = this.ctx;
+      const ctx = this.ctx;
 
-      var fillColor = this.current.fillColor;
-      var isPatternFill = this.current.patternFill;
-      for (var i = 0, ii = images.length; i < ii; i++) {
-        var image = images[i];
-        var width = image.width,
+      const fillColor = this.current.fillColor;
+      const isPatternFill = this.current.patternFill;
+      for (let i = 0, ii = images.length; i < ii; i++) {
+        const image = images[i];
+        const width = image.width,
           height = image.height;
 
-        var maskCanvas = this.cachedCanvases.getCanvas(
+        const maskCanvas = this.cachedCanvases.getCanvas(
           "maskCanvas",
           width,
           height
         );
-        var maskCtx = maskCanvas.context;
+        const maskCtx = maskCanvas.context;
         maskCtx.save();
 
         putBinaryImageMask(maskCtx, image);
@@ -2403,10 +2403,10 @@ var CanvasGraphics = (function CanvasGraphicsClosure() {
         return;
       }
 
-      var width = imgData.width;
-      var height = imgData.height;
-      var map = [];
-      for (var i = 0, ii = positions.length; i < ii; i += 2) {
+      const width = imgData.width;
+      const height = imgData.height;
+      const map = [];
+      for (let i = 0, ii = positions.length; i < ii; i += 2) {
         map.push({
           transform: [scaleX, 0, 0, scaleY, positions[i], positions[i + 1]],
           x: 0,
@@ -2424,23 +2424,23 @@ var CanvasGraphics = (function CanvasGraphicsClosure() {
       if (!this.contentVisible) {
         return;
       }
-      var width = imgData.width;
-      var height = imgData.height;
-      var ctx = this.ctx;
+      const width = imgData.width;
+      const height = imgData.height;
+      const ctx = this.ctx;
 
       this.save();
       // scale the image to the unit square
       ctx.scale(1 / width, -1 / height);
 
-      var currentTransform = ctx.mozCurrentTransformInverse;
-      var a = currentTransform[0],
+      const currentTransform = ctx.mozCurrentTransformInverse;
+      const a = currentTransform[0],
         b = currentTransform[1];
-      var widthScale = Math.max(Math.sqrt(a * a + b * b), 1);
-      var c = currentTransform[2],
+      let widthScale = Math.max(Math.sqrt(a * a + b * b), 1);
+      const c = currentTransform[2],
         d = currentTransform[3];
-      var heightScale = Math.max(Math.sqrt(c * c + d * d), 1);
+      let heightScale = Math.max(Math.sqrt(c * c + d * d), 1);
 
-      var imgToPaint, tmpCanvas;
+      let imgToPaint, tmpCanvas;
       // typeof check is needed due to node.js support, see issue #8489
       if (
         (typeof HTMLElement === "function" && imgData instanceof HTMLElement) ||
@@ -2454,9 +2454,9 @@ var CanvasGraphics = (function CanvasGraphicsClosure() {
         imgToPaint = tmpCanvas.canvas;
       }
 
-      var paintWidth = width,
+      let paintWidth = width,
         paintHeight = height;
-      var tmpCanvasId = "prescale1";
+      let tmpCanvasId = "prescale1";
       // Vertical or horizontal scaling shall not be more than 2 to not lose the
       // pixels during drawImage operation, painting on the temporary canvas(es)
       // that are twice smaller in size.
@@ -2464,7 +2464,7 @@ var CanvasGraphics = (function CanvasGraphicsClosure() {
         (widthScale > 2 && paintWidth > 1) ||
         (heightScale > 2 && paintHeight > 1)
       ) {
-        var newWidth = paintWidth,
+        let newWidth = paintWidth,
           newHeight = paintHeight;
         if (widthScale > 2 && paintWidth > 1) {
           newWidth = Math.ceil(paintWidth / 2);
@@ -2510,7 +2510,7 @@ var CanvasGraphics = (function CanvasGraphicsClosure() {
       );
 
       if (this.imageLayer) {
-        var position = this.getCanvasPosition(0, -height);
+        const position = this.getCanvasPosition(0, -height);
         this.imageLayer.appendImage({
           imgData,
           left: position[0],
@@ -2529,16 +2529,16 @@ var CanvasGraphics = (function CanvasGraphicsClosure() {
       if (!this.contentVisible) {
         return;
       }
-      var ctx = this.ctx;
-      var w = imgData.width;
-      var h = imgData.height;
+      const ctx = this.ctx;
+      const w = imgData.width;
+      const h = imgData.height;
 
-      var tmpCanvas = this.cachedCanvases.getCanvas("inlineImage", w, h);
-      var tmpCtx = tmpCanvas.context;
+      const tmpCanvas = this.cachedCanvases.getCanvas("inlineImage", w, h);
+      const tmpCtx = tmpCanvas.context;
       putBinaryImageData(tmpCtx, imgData, this.current.transferMaps);
 
-      for (var i = 0, ii = map.length; i < ii; i++) {
-        var entry = map[i];
+      for (let i = 0, ii = map.length; i < ii; i++) {
+        const entry = map[i];
         ctx.save();
         ctx.transform.apply(ctx, entry.transform);
         ctx.scale(1, -1);
@@ -2554,7 +2554,7 @@ var CanvasGraphics = (function CanvasGraphicsClosure() {
           1
         );
         if (this.imageLayer) {
-          var position = this.getCanvasPosition(entry.x, entry.y);
+          const position = this.getCanvasPosition(entry.x, entry.y);
           this.imageLayer.appendImage({
             imgData,
             left: position[0],
@@ -2619,7 +2619,7 @@ var CanvasGraphics = (function CanvasGraphicsClosure() {
     // Helper functions
 
     consumePath: function CanvasGraphics_consumePath() {
-      var ctx = this.ctx;
+      const ctx = this.ctx;
       if (this.pendingClip) {
         if (this.pendingClip === EO_CLIP) {
           ctx.clip("evenodd");
@@ -2644,7 +2644,7 @@ var CanvasGraphics = (function CanvasGraphicsClosure() {
       return this._cachedGetSinglePixelWidth;
     },
     getCanvasPosition: function CanvasGraphics_getCanvasPosition(x, y) {
-      var transform = this.ctx.mozCurrentTransform;
+      const transform = this.ctx.mozCurrentTransform;
       return [
         transform[0] * x + transform[2] * y + transform[4],
         transform[1] * x + transform[3] * y + transform[5],
@@ -2661,7 +2661,7 @@ var CanvasGraphics = (function CanvasGraphicsClosure() {
     },
   };
 
-  for (var op in OPS) {
+  for (const op in OPS) {
     CanvasGraphics.prototype[OPS[op]] = CanvasGraphics.prototype[op];
   }
 
diff --git a/src/display/pattern_helper.js b/src/display/pattern_helper.js
index 33ecfeba5..ce0f49555 100644
--- a/src/display/pattern_helper.js
+++ b/src/display/pattern_helper.js
@@ -15,7 +15,7 @@
 
 import { FormatError, info, Util } from "../shared/util.js";
 
-var ShadingIRs = {};
+const ShadingIRs = {};
 
 function applyBoundingBox(ctx, bbox) {
   if (!bbox || typeof Path2D === "undefined") {
@@ -30,26 +30,26 @@ function applyBoundingBox(ctx, bbox) {
 
 ShadingIRs.RadialAxial = {
   fromIR: function RadialAxial_fromIR(raw) {
-    var type = raw[1];
-    var bbox = raw[2];
-    var colorStops = raw[3];
-    var p0 = raw[4];
-    var p1 = raw[5];
-    var r0 = raw[6];
-    var r1 = raw[7];
+    const type = raw[1];
+    const bbox = raw[2];
+    const colorStops = raw[3];
+    const p0 = raw[4];
+    const p1 = raw[5];
+    const r0 = raw[6];
+    const r1 = raw[7];
     return {
       type: "Pattern",
       getPattern: function RadialAxial_getPattern(ctx) {
         applyBoundingBox(ctx, bbox);
-        var grad;
+        let grad;
         if (type === "axial") {
           grad = ctx.createLinearGradient(p0[0], p0[1], p1[0], p1[1]);
         } else if (type === "radial") {
           grad = ctx.createRadialGradient(p0[0], p0[1], r0, p1[0], p1[1], r1);
         }
 
-        for (var i = 0, ii = colorStops.length; i < ii; ++i) {
-          var c = colorStops[i];
+        for (let i = 0, ii = colorStops.length; i < ii; ++i) {
+          const c = colorStops[i];
           grad.addColorStop(c[0], c[1]);
         }
         return grad;
@@ -58,14 +58,14 @@ ShadingIRs.RadialAxial = {
   },
 };
 
-var createMeshCanvas = (function createMeshCanvasClosure() {
+const createMeshCanvas = (function createMeshCanvasClosure() {
   function drawTriangle(data, context, p1, p2, p3, c1, c2, c3) {
     // Very basic Gouraud-shaded triangle rasterization algorithm.
-    var coords = context.coords,
+    const coords = context.coords,
       colors = context.colors;
-    var bytes = data.data,
+    const bytes = data.data,
       rowSize = data.width * 4;
-    var tmp;
+    let tmp;
     if (coords[p1 + 1] > coords[p2 + 1]) {
       tmp = p1;
       p1 = p2;
@@ -90,30 +90,30 @@ var createMeshCanvas = (function createMeshCanvasClosure() {
       c1 = c2;
       c2 = tmp;
     }
-    var x1 = (coords[p1] + context.offsetX) * context.scaleX;
-    var y1 = (coords[p1 + 1] + context.offsetY) * context.scaleY;
-    var x2 = (coords[p2] + context.offsetX) * context.scaleX;
-    var y2 = (coords[p2 + 1] + context.offsetY) * context.scaleY;
-    var x3 = (coords[p3] + context.offsetX) * context.scaleX;
-    var y3 = (coords[p3 + 1] + context.offsetY) * context.scaleY;
+    const x1 = (coords[p1] + context.offsetX) * context.scaleX;
+    const y1 = (coords[p1 + 1] + context.offsetY) * context.scaleY;
+    const x2 = (coords[p2] + context.offsetX) * context.scaleX;
+    const y2 = (coords[p2 + 1] + context.offsetY) * context.scaleY;
+    const x3 = (coords[p3] + context.offsetX) * context.scaleX;
+    const y3 = (coords[p3 + 1] + context.offsetY) * context.scaleY;
     if (y1 >= y3) {
       return;
     }
-    var c1r = colors[c1],
+    const c1r = colors[c1],
       c1g = colors[c1 + 1],
       c1b = colors[c1 + 2];
-    var c2r = colors[c2],
+    const c2r = colors[c2],
       c2g = colors[c2 + 1],
       c2b = colors[c2 + 2];
-    var c3r = colors[c3],
+    const c3r = colors[c3],
       c3g = colors[c3 + 1],
       c3b = colors[c3 + 2];
 
-    var minY = Math.round(y1),
+    const minY = Math.round(y1),
       maxY = Math.round(y3);
-    var xa, car, cag, cab;
-    var xb, cbr, cbg, cbb;
-    for (var y = minY; y <= maxY; y++) {
+    let xa, car, cag, cab;
+    let xb, cbr, cbg, cbb;
+    for (let y = minY; y <= maxY; y++) {
       if (y < y2) {
         let k;
         if (y < y1) {
@@ -154,10 +154,10 @@ var createMeshCanvas = (function createMeshCanvasClosure() {
       cbr = c1r - (c1r - c3r) * k;
       cbg = c1g - (c1g - c3g) * k;
       cbb = c1b - (c1b - c3b) * k;
-      var x1_ = Math.round(Math.min(xa, xb));
-      var x2_ = Math.round(Math.max(xa, xb));
-      var j = rowSize * y + x1_ * 4;
-      for (var x = x1_; x <= x2_; x++) {
+      const x1_ = Math.round(Math.min(xa, xb));
+      const x2_ = Math.round(Math.max(xa, xb));
+      let j = rowSize * y + x1_ * 4;
+      for (let x = x1_; x <= x2_; x++) {
         k = (xa - x) / (xa - xb);
         if (k < 0) {
           k = 0;
@@ -173,17 +173,17 @@ var createMeshCanvas = (function createMeshCanvasClosure() {
   }
 
   function drawFigure(data, figure, context) {
-    var ps = figure.coords;
-    var cs = figure.colors;
-    var i, ii;
+    const ps = figure.coords;
+    const cs = figure.colors;
+    let i, ii;
     switch (figure.type) {
       case "lattice":
         var verticesPerRow = figure.verticesPerRow;
         var rows = Math.floor(ps.length / verticesPerRow) - 1;
         var cols = verticesPerRow - 1;
         for (i = 0; i < rows; i++) {
-          var q = i * verticesPerRow;
-          for (var j = 0; j < cols; j++, q++) {
+          let q = i * verticesPerRow;
+          for (let j = 0; j < cols; j++, q++) {
             drawTriangle(
               data,
               context,
@@ -239,30 +239,30 @@ var createMeshCanvas = (function createMeshCanvasClosure() {
   ) {
     // we will increase scale on some weird factor to let antialiasing take
     // care of "rough" edges
-    var EXPECTED_SCALE = 1.1;
+    const EXPECTED_SCALE = 1.1;
     // MAX_PATTERN_SIZE is used to avoid OOM situation.
-    var MAX_PATTERN_SIZE = 3000; // 10in @ 300dpi shall be enough
+    const MAX_PATTERN_SIZE = 3000; // 10in @ 300dpi shall be enough
     // We need to keep transparent border around our pattern for fill():
     // createPattern with 'no-repeat' will bleed edges across entire area.
-    var BORDER_SIZE = 2;
+    const BORDER_SIZE = 2;
 
-    var offsetX = Math.floor(bounds[0]);
-    var offsetY = Math.floor(bounds[1]);
-    var boundsWidth = Math.ceil(bounds[2]) - offsetX;
-    var boundsHeight = Math.ceil(bounds[3]) - offsetY;
+    const offsetX = Math.floor(bounds[0]);
+    const offsetY = Math.floor(bounds[1]);
+    const boundsWidth = Math.ceil(bounds[2]) - offsetX;
+    const boundsHeight = Math.ceil(bounds[3]) - offsetY;
 
-    var width = Math.min(
+    const width = Math.min(
       Math.ceil(Math.abs(boundsWidth * combinesScale[0] * EXPECTED_SCALE)),
       MAX_PATTERN_SIZE
     );
-    var height = Math.min(
+    const height = Math.min(
       Math.ceil(Math.abs(boundsHeight * combinesScale[1] * EXPECTED_SCALE)),
       MAX_PATTERN_SIZE
     );
-    var scaleX = boundsWidth / width;
-    var scaleY = boundsHeight / height;
+    const scaleX = boundsWidth / width;
+    const scaleY = boundsHeight / height;
 
-    var context = {
+    const context = {
       coords,
       colors,
       offsetX: -offsetX,
@@ -271,10 +271,10 @@ var createMeshCanvas = (function createMeshCanvasClosure() {
       scaleY: 1 / scaleY,
     };
 
-    var paddedWidth = width + BORDER_SIZE * 2;
-    var paddedHeight = height + BORDER_SIZE * 2;
+    const paddedWidth = width + BORDER_SIZE * 2;
+    const paddedHeight = height + BORDER_SIZE * 2;
 
-    var canvas, tmpCanvas, i, ii;
+    let canvas, tmpCanvas, i, ii;
     if (webGLContext.isEnabled) {
       canvas = webGLContext.drawFigures({
         width,
@@ -299,11 +299,11 @@ var createMeshCanvas = (function createMeshCanvasClosure() {
         paddedHeight,
         false
       );
-      var tmpCtx = tmpCanvas.context;
+      const tmpCtx = tmpCanvas.context;
 
-      var data = tmpCtx.createImageData(width, height);
+      const data = tmpCtx.createImageData(width, height);
       if (backgroundColor) {
-        var bytes = data.data;
+        const bytes = data.data;
         for (i = 0, ii = bytes.length; i < ii; i += 4) {
           bytes[i] = backgroundColor[0];
           bytes[i + 1] = backgroundColor[1];
@@ -332,32 +332,32 @@ var createMeshCanvas = (function createMeshCanvasClosure() {
 ShadingIRs.Mesh = {
   fromIR: function Mesh_fromIR(raw) {
     // var type = raw[1];
-    var coords = raw[2];
-    var colors = raw[3];
-    var figures = raw[4];
-    var bounds = raw[5];
-    var matrix = raw[6];
-    var bbox = raw[7];
-    var background = raw[8];
+    const coords = raw[2];
+    const colors = raw[3];
+    const figures = raw[4];
+    const bounds = raw[5];
+    const matrix = raw[6];
+    const bbox = raw[7];
+    const background = raw[8];
     return {
       type: "Pattern",
       getPattern: function Mesh_getPattern(ctx, owner, shadingFill) {
         applyBoundingBox(ctx, bbox);
-        var scale;
+        let scale;
         if (shadingFill) {
           scale = Util.singularValueDecompose2dScale(ctx.mozCurrentTransform);
         } else {
           // Obtain scale from matrix and current transformation matrix.
           scale = Util.singularValueDecompose2dScale(owner.baseTransform);
           if (matrix) {
-            var matrixScale = Util.singularValueDecompose2dScale(matrix);
+            const matrixScale = Util.singularValueDecompose2dScale(matrix);
             scale = [scale[0] * matrixScale[0], scale[1] * matrixScale[1]];
           }
         }
 
         // Rasterizing on the main thread since sending/queue large canvases
         // might cause OOM.
-        var temporaryPatternCanvas = createMeshCanvas(
+        const temporaryPatternCanvas = createMeshCanvas(
           bounds,
           scale,
           coords,
@@ -399,7 +399,7 @@ ShadingIRs.Dummy = {
 };
 
 function getShadingPatternFromIR(raw) {
-  var shadingIR = ShadingIRs[raw[0]];
+  const shadingIR = ShadingIRs[raw[0]];
   if (!shadingIR) {
     throw new Error(`Unknown IR type: ${raw[0]}`);
   }
@@ -409,13 +409,13 @@ function getShadingPatternFromIR(raw) {
 /**
  * @type {any}
  */
-var TilingPattern = (function TilingPatternClosure() {
-  var PaintType = {
+const TilingPattern = (function TilingPatternClosure() {
+  const PaintType = {
     COLORED: 1,
     UNCOLORED: 2,
   };
 
-  var MAX_PATTERN_SIZE = 3000; // 10in @ 300dpi shall be enough
+  const MAX_PATTERN_SIZE = 3000; // 10in @ 300dpi shall be enough
 
   // eslint-disable-next-line no-shadow
   function TilingPattern(IR, color, ctx, canvasGraphicsFactory, baseTransform) {
@@ -435,14 +435,14 @@ var TilingPattern = (function TilingPatternClosure() {
 
   TilingPattern.prototype = {
     createPatternCanvas: function TilinPattern_createPatternCanvas(owner) {
-      var operatorList = this.operatorList;
-      var bbox = this.bbox;
-      var xstep = this.xstep;
-      var ystep = this.ystep;
-      var paintType = this.paintType;
-      var tilingType = this.tilingType;
-      var color = this.color;
-      var canvasGraphicsFactory = this.canvasGraphicsFactory;
+      const operatorList = this.operatorList;
+      const bbox = this.bbox;
+      const xstep = this.xstep;
+      const ystep = this.ystep;
+      const paintType = this.paintType;
+      const tilingType = this.tilingType;
+      const color = this.color;
+      const canvasGraphicsFactory = this.canvasGraphicsFactory;
 
       info("TilingType: " + tilingType);
 
@@ -466,17 +466,17 @@ var TilingPattern = (function TilingPatternClosure() {
       //   TODO: Fix the implementation, to allow this scenario to be painted
       //   correctly.
 
-      var x0 = bbox[0],
+      const x0 = bbox[0],
         y0 = bbox[1],
         x1 = bbox[2],
         y1 = bbox[3];
 
       // Obtain scale from matrix and current transformation matrix.
-      var matrixScale = Util.singularValueDecompose2dScale(this.matrix);
-      var curMatrixScale = Util.singularValueDecompose2dScale(
+      const matrixScale = Util.singularValueDecompose2dScale(this.matrix);
+      const curMatrixScale = Util.singularValueDecompose2dScale(
         this.baseTransform
       );
-      var combinedScale = [
+      const combinedScale = [
         matrixScale[0] * curMatrixScale[0],
         matrixScale[1] * curMatrixScale[1],
       ];
@@ -484,25 +484,25 @@ var TilingPattern = (function TilingPatternClosure() {
       // Use width and height values that are as close as possible to the end
       // result when the pattern is used. Too low value makes the pattern look
       // blurry. Too large value makes it look too crispy.
-      var dimx = this.getSizeAndScale(
+      const dimx = this.getSizeAndScale(
         xstep,
         this.ctx.canvas.width,
         combinedScale[0]
       );
-      var dimy = this.getSizeAndScale(
+      const dimy = this.getSizeAndScale(
         ystep,
         this.ctx.canvas.height,
         combinedScale[1]
       );
 
-      var tmpCanvas = owner.cachedCanvases.getCanvas(
+      const tmpCanvas = owner.cachedCanvases.getCanvas(
         "pattern",
         dimx.size,
         dimy.size,
         true
       );
-      var tmpCtx = tmpCanvas.context;
-      var graphics = canvasGraphicsFactory.createCanvasGraphics(tmpCtx);
+      const tmpCtx = tmpCanvas.context;
+      const graphics = canvasGraphicsFactory.createCanvasGraphics(tmpCtx);
       graphics.groupLevel = owner.groupLevel;
 
       this.setFillAndStrokeStyleToContext(graphics, paintType, color);
@@ -535,8 +535,8 @@ var TilingPattern = (function TilingPatternClosure() {
       // Use the destination canvas's size if it is bigger than the hard-coded
       // limit of MAX_PATTERN_SIZE to avoid clipping patterns that cover the
       // whole canvas.
-      var maxSize = Math.max(MAX_PATTERN_SIZE, realOutputSize);
-      var size = Math.ceil(step * scale);
+      const maxSize = Math.max(MAX_PATTERN_SIZE, realOutputSize);
+      let size = Math.ceil(step * scale);
       if (size >= maxSize) {
         size = maxSize;
       } else {
@@ -547,8 +547,8 @@ var TilingPattern = (function TilingPatternClosure() {
 
     clipBbox: function clipBbox(graphics, bbox, x0, y0, x1, y1) {
       if (Array.isArray(bbox) && bbox.length === 4) {
-        var bboxWidth = x1 - x0;
-        var bboxHeight = y1 - y0;
+        const bboxWidth = x1 - x0;
+        const bboxHeight = y1 - y0;
         graphics.ctx.rect(x0, y0, bboxWidth, bboxHeight);
         graphics.clip();
         graphics.endPath();
@@ -589,7 +589,7 @@ var TilingPattern = (function TilingPatternClosure() {
       ctx.setTransform.apply(ctx, this.baseTransform);
       ctx.transform.apply(ctx, this.matrix);
 
-      var temporaryPatternCanvas = this.createPatternCanvas(owner);
+      const temporaryPatternCanvas = this.createPatternCanvas(owner);
 
       return ctx.createPattern(temporaryPatternCanvas, "repeat");
     },
diff --git a/src/display/text_layer.js b/src/display/text_layer.js
index fe010d47f..de6eb9954 100644
--- a/src/display/text_layer.js
+++ b/src/display/text_layer.js
@@ -52,10 +52,10 @@ import {
 /**
  * @type {(renderParameters: TextLayerRenderParameters) => TextLayerRenderTask}
  */
-var renderTextLayer = (function renderTextLayerClosure() {
-  var MAX_TEXT_DIVS_TO_RENDER = 100000;
+const renderTextLayer = (function renderTextLayerClosure() {
+  const MAX_TEXT_DIVS_TO_RENDER = 100000;
 
-  var NonWhitespaceRegexp = /\S/;
+  const NonWhitespaceRegexp = /\S/;
 
   function isAllWhitespace(str) {
     return !NonWhitespaceRegexp.test(str);
@@ -63,8 +63,8 @@ var renderTextLayer = (function renderTextLayerClosure() {
 
   function appendText(task, geom, styles) {
     // Initialize all used properties to keep the caches monomorphic.
-    var textDiv = document.createElement("span");
-    var textDivProperties = {
+    const textDiv = document.createElement("span");
+    const textDivProperties = {
       angle: 0,
       canvasWidth: 0,
       isWhitespace: false,
@@ -83,14 +83,14 @@ var renderTextLayer = (function renderTextLayerClosure() {
       return;
     }
 
-    var tx = Util.transform(task._viewport.transform, geom.transform);
-    var angle = Math.atan2(tx[1], tx[0]);
-    var style = styles[geom.fontName];
+    const tx = Util.transform(task._viewport.transform, geom.transform);
+    let angle = Math.atan2(tx[1], tx[0]);
+    const style = styles[geom.fontName];
     if (style.vertical) {
       angle += Math.PI / 2;
     }
-    var fontHeight = Math.sqrt(tx[2] * tx[2] + tx[3] * tx[3]);
-    var fontAscent = fontHeight;
+    const fontHeight = Math.sqrt(tx[2] * tx[2] + tx[3] * tx[3]);
+    let fontAscent = fontHeight;
     if (style.ascent) {
       fontAscent = style.ascent * fontAscent;
     } else if (style.descent) {
@@ -152,17 +152,17 @@ var renderTextLayer = (function renderTextLayerClosure() {
     }
 
     if (task._enhanceTextSelection) {
-      var angleCos = 1,
+      let angleCos = 1,
         angleSin = 0;
       if (angle !== 0) {
         angleCos = Math.cos(angle);
         angleSin = Math.sin(angle);
       }
-      var divWidth =
+      const divWidth =
         (style.vertical ? geom.height : geom.width) * task._viewport.scale;
-      var divHeight = fontHeight;
+      const divHeight = fontHeight;
 
-      var m, b;
+      let m, b;
       if (angle !== 0) {
         m = [angleCos, angleSin, -angleSin, angleCos, left, top];
         b = Util.getAxialAlignedBoundingBox([0, 0, divWidth, divHeight], m);
@@ -186,9 +186,9 @@ var renderTextLayer = (function renderTextLayerClosure() {
     if (task._canceled) {
       return;
     }
-    var textDivs = task._textDivs;
-    var capability = task._capability;
-    var textDivsLength = textDivs.length;
+    const textDivs = task._textDivs;
+    const capability = task._capability;
+    const textDivsLength = textDivs.length;
 
     // No point in rendering many divs as it would make the browser
     // unusable even after the divs are rendered.
@@ -199,7 +199,7 @@ var renderTextLayer = (function renderTextLayerClosure() {
     }
 
     if (!task._textContentStream) {
-      for (var i = 0; i < textDivsLength; i++) {
+      for (let i = 0; i < textDivsLength; i++) {
         task._layoutText(textDivs[i]);
       }
     }
@@ -220,13 +220,13 @@ var renderTextLayer = (function renderTextLayerClosure() {
   }
 
   function expand(task) {
-    var bounds = task._bounds;
-    var viewport = task._viewport;
+    const bounds = task._bounds;
+    const viewport = task._viewport;
 
-    var expanded = expandBounds(viewport.width, viewport.height, bounds);
-    for (var i = 0; i < expanded.length; i++) {
-      var div = bounds[i].div;
-      var divProperties = task._textDivProperties.get(div);
+    const expanded = expandBounds(viewport.width, viewport.height, bounds);
+    for (let i = 0; i < expanded.length; i++) {
+      const div = bounds[i].div;
+      const divProperties = task._textDivProperties.get(div);
       if (divProperties.angle === 0) {
         divProperties.paddingLeft = bounds[i].left - expanded[i].left;
         divProperties.paddingTop = bounds[i].top - expanded[i].top;
@@ -243,10 +243,10 @@ var renderTextLayer = (function renderTextLayerClosure() {
         c = m[0],
         s = m[1];
       // Finding intersections with expanded box.
-      var points = [[0, 0], [0, b.size[1]], [b.size[0], 0], b.size];
+      const points = [[0, 0], [0, b.size[1]], [b.size[0], 0], b.size];
       var ts = new Float64Array(64);
       points.forEach(function (p, j) {
-        var t = Util.applyTransform(p, m);
+        const t = Util.applyTransform(p, m);
         ts[j + 0] = c && (e.left - t[0]) / c;
         ts[j + 4] = s && (e.top - t[1]) / s;
         ts[j + 8] = c && (e.right - t[0]) / c;
@@ -269,7 +269,7 @@ var renderTextLayer = (function renderTextLayerClosure() {
       });
       // Not based on math, but to simplify calculations, using cos and sin
       // absolute values to not exceed the box (it can but insignificantly).
-      var boxScale = 1 + Math.min(Math.abs(c), Math.abs(s));
+      const boxScale = 1 + Math.min(Math.abs(c), Math.abs(s));
       divProperties.paddingLeft = findPositiveMin(ts, 32, 16) / boxScale;
       divProperties.paddingTop = findPositiveMin(ts, 48, 16) / boxScale;
       divProperties.paddingRight = findPositiveMin(ts, 0, 16) / boxScale;
@@ -279,7 +279,7 @@ var renderTextLayer = (function renderTextLayerClosure() {
   }
 
   function expandBounds(width, height, boxes) {
-    var bounds = boxes.map(function (box, i) {
+    const bounds = boxes.map(function (box, i) {
       return {
         x1: box.left,
         y1: box.top,
@@ -291,9 +291,9 @@ var renderTextLayer = (function renderTextLayerClosure() {
       };
     });
     expandBoundsLTR(width, bounds);
-    var expanded = new Array(boxes.length);
+    const expanded = new Array(boxes.length);
     bounds.forEach(function (b) {
-      var i = b.index;
+      const i = b.index;
       expanded[i] = {
         left: b.x1New,
         top: 0,
@@ -305,7 +305,7 @@ var renderTextLayer = (function renderTextLayerClosure() {
     // Rotating on 90 degrees and extending extended boxes. Reusing the bounds
     // array and objects.
     boxes.map(function (box, i) {
-      var e = expanded[i],
+      const e = expanded[i],
         b = bounds[i];
       b.x1 = box.top;
       b.y1 = width - e.right;
@@ -318,7 +318,7 @@ var renderTextLayer = (function renderTextLayerClosure() {
     expandBoundsLTR(height, bounds);
 
     bounds.forEach(function (b) {
-      var i = b.index;
+      const i = b.index;
       expanded[i].top = b.x1New;
       expanded[i].bottom = b.x2New;
     });
@@ -332,7 +332,7 @@ var renderTextLayer = (function renderTextLayerClosure() {
     });
 
     // First we see on the horizon is a fake boundary.
-    var fakeBoundary = {
+    const fakeBoundary = {
       x1: -Infinity,
       y1: -Infinity,
       x2: 0,
@@ -341,7 +341,7 @@ var renderTextLayer = (function renderTextLayerClosure() {
       x1New: 0,
       x2New: 0,
     };
-    var horizon = [
+    const horizon = [
       {
         start: -Infinity,
         end: Infinity,
@@ -352,17 +352,17 @@ var renderTextLayer = (function renderTextLayerClosure() {
     bounds.forEach(function (boundary) {
       // Searching for the affected part of horizon.
       // TODO red-black tree or simple binary search
-      var i = 0;
+      let i = 0;
       while (i < horizon.length && horizon[i].end <= boundary.y1) {
         i++;
       }
-      var j = horizon.length - 1;
+      let j = horizon.length - 1;
       while (j >= 0 && horizon[j].start >= boundary.y2) {
         j--;
       }
 
-      var horizonPart, affectedBoundary;
-      var q,
+      let horizonPart, affectedBoundary;
+      let q,
         k,
         maxXNew = -Infinity;
       for (q = i; q <= j; q++) {
@@ -415,13 +415,13 @@ var renderTextLayer = (function renderTextLayerClosure() {
       }
 
       // Fixing the horizon.
-      var changedHorizon = [],
+      let changedHorizon = [],
         lastBoundary = null;
       for (q = i; q <= j; q++) {
         horizonPart = horizon[q];
         affectedBoundary = horizonPart.boundary;
         // Checking which boundary will be visible.
-        var useBoundary =
+        const useBoundary =
           affectedBoundary.x2 > boundary.x2 ? affectedBoundary : boundary;
         if (lastBoundary === useBoundary) {
           // Merging with previous.
@@ -461,7 +461,7 @@ var renderTextLayer = (function renderTextLayerClosure() {
         if (affectedBoundary.x2New !== undefined) {
           continue;
         }
-        var used = false;
+        let used = false;
         for (
           k = i - 1;
           !used && k >= 0 && horizon[k].start >= affectedBoundary.y1;
@@ -492,7 +492,7 @@ var renderTextLayer = (function renderTextLayerClosure() {
 
     // Set new x2 for all unset boundaries.
     horizon.forEach(function (horizonPart) {
-      var affectedBoundary = horizonPart.boundary;
+      const affectedBoundary = horizonPart.boundary;
       if (affectedBoundary.x2New === undefined) {
         affectedBoundary.x2New = Math.max(width, affectedBoundary.x2);
       }
@@ -689,7 +689,7 @@ var renderTextLayer = (function renderTextLayerClosure() {
       const transformBuf = [],
         paddingBuf = [];
 
-      for (var i = 0, ii = this._textDivs.length; i < ii; i++) {
+      for (let i = 0, ii = this._textDivs.length; i < ii; i++) {
         const div = this._textDivs[i];
         const divProps = this._textDivProperties.get(div);
 
@@ -742,7 +742,7 @@ var renderTextLayer = (function renderTextLayerClosure() {
 
   // eslint-disable-next-line no-shadow
   function renderTextLayer(renderParameters) {
-    var task = new TextLayerRenderTask({
+    const task = new TextLayerRenderTask({
       textContent: renderParameters.textContent,
       textContentStream: renderParameters.textContentStream,
       container: renderParameters.container,
diff --git a/src/display/webgl.js b/src/display/webgl.js
index 4e8999dbb..068291a17 100644
--- a/src/display/webgl.js
+++ b/src/display/webgl.js
@@ -50,12 +50,12 @@ class WebGLContext {
 
 var WebGLUtils = (function WebGLUtilsClosure() {
   function loadShader(gl, code, shaderType) {
-    var shader = gl.createShader(shaderType);
+    const shader = gl.createShader(shaderType);
     gl.shaderSource(shader, code);
     gl.compileShader(shader);
-    var compiled = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
+    const compiled = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
     if (!compiled) {
-      var errorMsg = gl.getShaderInfoLog(shader);
+      const errorMsg = gl.getShaderInfoLog(shader);
       throw new Error("Error during shader compilation: " + errorMsg);
     }
     return shader;
@@ -67,21 +67,21 @@ var WebGLUtils = (function WebGLUtilsClosure() {
     return loadShader(gl, code, gl.FRAGMENT_SHADER);
   }
   function createProgram(gl, shaders) {
-    var program = gl.createProgram();
-    for (var i = 0, ii = shaders.length; i < ii; ++i) {
+    const program = gl.createProgram();
+    for (let i = 0, ii = shaders.length; i < ii; ++i) {
       gl.attachShader(program, shaders[i]);
     }
     gl.linkProgram(program);
-    var linked = gl.getProgramParameter(program, gl.LINK_STATUS);
+    const linked = gl.getProgramParameter(program, gl.LINK_STATUS);
     if (!linked) {
-      var errorMsg = gl.getProgramInfoLog(program);
+      const errorMsg = gl.getProgramInfoLog(program);
       throw new Error("Error during program linking: " + errorMsg);
     }
     return program;
   }
   function createTexture(gl, image, textureId) {
     gl.activeTexture(textureId);
-    var texture = gl.createTexture();
+    const texture = gl.createTexture();
     gl.bindTexture(gl.TEXTURE_2D, texture);
 
     // Set the parameters so we can render any size image.
@@ -95,7 +95,7 @@ var WebGLUtils = (function WebGLUtilsClosure() {
     return texture;
   }
 
-  var currentGL, currentCanvas;
+  let currentGL, currentCanvas;
   function generateGL() {
     if (currentGL) {
       return;
@@ -108,7 +108,7 @@ var WebGLUtils = (function WebGLUtilsClosure() {
     });
   }
 
-  var smaskVertexShaderCode =
+  const smaskVertexShaderCode =
     "\
   attribute vec2 a_position;                                    \
   attribute vec2 a_texCoord;                                    \
@@ -124,7 +124,7 @@ var WebGLUtils = (function WebGLUtilsClosure() {
     v_texCoord = a_texCoord;                                    \
   }                                                             ";
 
-  var smaskFragmentShaderCode =
+  const smaskFragmentShaderCode =
     "\
   precision mediump float;                                      \
                                                                 \
@@ -154,10 +154,10 @@ var WebGLUtils = (function WebGLUtilsClosure() {
     gl_FragColor = imageColor;                                  \
   }                                                             ";
 
-  var smaskCache = null;
+  let smaskCache = null;
 
   function initSmaskGL() {
-    var canvas, gl;
+    let canvas, gl;
 
     generateGL();
     canvas = currentCanvas;
@@ -166,12 +166,12 @@ var WebGLUtils = (function WebGLUtilsClosure() {
     currentGL = null;
 
     // setup a GLSL program
-    var vertexShader = createVertexShader(gl, smaskVertexShaderCode);
-    var fragmentShader = createFragmentShader(gl, smaskFragmentShaderCode);
-    var program = createProgram(gl, [vertexShader, fragmentShader]);
+    const vertexShader = createVertexShader(gl, smaskVertexShaderCode);
+    const fragmentShader = createFragmentShader(gl, smaskFragmentShaderCode);
+    const program = createProgram(gl, [vertexShader, fragmentShader]);
     gl.useProgram(program);
 
-    var cache = {};
+    const cache = {};
     cache.gl = gl;
     cache.canvas = canvas;
     cache.resolutionLocation = gl.getUniformLocation(program, "u_resolution");
@@ -179,12 +179,12 @@ var WebGLUtils = (function WebGLUtilsClosure() {
     cache.backdropLocation = gl.getUniformLocation(program, "u_backdrop");
     cache.subtypeLocation = gl.getUniformLocation(program, "u_subtype");
 
-    var texCoordLocation = gl.getAttribLocation(program, "a_texCoord");
-    var texLayerLocation = gl.getUniformLocation(program, "u_image");
-    var texMaskLocation = gl.getUniformLocation(program, "u_mask");
+    const texCoordLocation = gl.getAttribLocation(program, "a_texCoord");
+    const texLayerLocation = gl.getUniformLocation(program, "u_image");
+    const texMaskLocation = gl.getUniformLocation(program, "u_mask");
 
     // provide texture coordinates for the rectangle.
-    var texCoordBuffer = gl.createBuffer();
+    const texCoordBuffer = gl.createBuffer();
     gl.bindBuffer(gl.ARRAY_BUFFER, texCoordBuffer);
     // prettier-ignore
     gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
@@ -204,13 +204,13 @@ var WebGLUtils = (function WebGLUtilsClosure() {
   }
 
   function composeSMask(layer, mask, properties) {
-    var width = layer.width,
+    const width = layer.width,
       height = layer.height;
 
     if (!smaskCache) {
       initSmaskGL();
     }
-    var cache = smaskCache,
+    const cache = smaskCache,
       canvas = cache.canvas,
       gl = cache.gl;
     canvas.width = width;
@@ -235,12 +235,12 @@ var WebGLUtils = (function WebGLUtilsClosure() {
     );
 
     // Create a textures
-    var texture = createTexture(gl, layer, gl.TEXTURE0);
-    var maskTexture = createTexture(gl, mask, gl.TEXTURE1);
+    const texture = createTexture(gl, layer, gl.TEXTURE0);
+    const maskTexture = createTexture(gl, mask, gl.TEXTURE1);
 
     // Create a buffer and put a single clipspace rectangle in
     // it (2 triangles)
-    var buffer = gl.createBuffer();
+    const buffer = gl.createBuffer();
     gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
     // prettier-ignore
     gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
@@ -270,7 +270,7 @@ var WebGLUtils = (function WebGLUtilsClosure() {
     return canvas;
   }
 
-  var figuresVertexShaderCode =
+  const figuresVertexShaderCode =
     "\
   attribute vec2 a_position;                                    \
   attribute vec3 a_color;                                       \
@@ -289,7 +289,7 @@ var WebGLUtils = (function WebGLUtilsClosure() {
     v_color = vec4(a_color / 255.0, 1.0);                       \
   }                                                             ";
 
-  var figuresFragmentShaderCode =
+  const figuresFragmentShaderCode =
     "\
   precision mediump float;                                      \
                                                                 \
@@ -299,10 +299,10 @@ var WebGLUtils = (function WebGLUtilsClosure() {
     gl_FragColor = v_color;                                     \
   }                                                             ";
 
-  var figuresCache = null;
+  let figuresCache = null;
 
   function initFiguresGL() {
-    var canvas, gl;
+    let canvas, gl;
 
     generateGL();
     canvas = currentCanvas;
@@ -311,12 +311,12 @@ var WebGLUtils = (function WebGLUtilsClosure() {
     currentGL = null;
 
     // setup a GLSL program
-    var vertexShader = createVertexShader(gl, figuresVertexShaderCode);
-    var fragmentShader = createFragmentShader(gl, figuresFragmentShaderCode);
-    var program = createProgram(gl, [vertexShader, fragmentShader]);
+    const vertexShader = createVertexShader(gl, figuresVertexShaderCode);
+    const fragmentShader = createFragmentShader(gl, figuresFragmentShaderCode);
+    const program = createProgram(gl, [vertexShader, fragmentShader]);
     gl.useProgram(program);
 
-    var cache = {};
+    const cache = {};
     cache.gl = gl;
     cache.canvas = canvas;
     cache.resolutionLocation = gl.getUniformLocation(program, "u_resolution");
@@ -332,7 +332,7 @@ var WebGLUtils = (function WebGLUtilsClosure() {
     if (!figuresCache) {
       initFiguresGL();
     }
-    var cache = figuresCache,
+    const cache = figuresCache,
       canvas = cache.canvas,
       gl = cache.gl;
 
@@ -342,8 +342,8 @@ var WebGLUtils = (function WebGLUtilsClosure() {
     gl.uniform2f(cache.resolutionLocation, width, height);
 
     // count triangle points
-    var count = 0;
-    var i, ii, rows;
+    let count = 0;
+    let i, ii, rows;
     for (i = 0, ii = figures.length; i < ii; i++) {
       switch (figures[i].type) {
         case "lattice":
@@ -356,23 +356,23 @@ var WebGLUtils = (function WebGLUtilsClosure() {
       }
     }
     // transfer data
-    var coords = new Float32Array(count * 2);
-    var colors = new Uint8Array(count * 3);
-    var coordsMap = context.coords,
+    const coords = new Float32Array(count * 2);
+    const colors = new Uint8Array(count * 3);
+    const coordsMap = context.coords,
       colorsMap = context.colors;
-    var pIndex = 0,
+    let pIndex = 0,
       cIndex = 0;
     for (i = 0, ii = figures.length; i < ii; i++) {
-      var figure = figures[i],
+      const figure = figures[i],
         ps = figure.coords,
         cs = figure.colors;
       switch (figure.type) {
         case "lattice":
           var cols = figure.verticesPerRow;
           rows = (ps.length / cols) | 0;
-          for (var row = 1; row < rows; row++) {
-            var offset = row * cols + 1;
-            for (var col = 1; col < cols; col++, offset++) {
+          for (let row = 1; row < rows; row++) {
+            let offset = row * cols + 1;
+            for (let col = 1; col < cols; col++, offset++) {
               coords[pIndex] = coordsMap[ps[offset - cols - 1]];
               coords[pIndex + 1] = coordsMap[ps[offset - cols - 1] + 1];
               coords[pIndex + 2] = coordsMap[ps[offset - cols]];
@@ -410,7 +410,7 @@ var WebGLUtils = (function WebGLUtilsClosure() {
           }
           break;
         case "triangles":
-          for (var j = 0, jj = ps.length; j < jj; j++) {
+          for (let j = 0, jj = ps.length; j < jj; j++) {
             coords[pIndex] = coordsMap[ps[j]];
             coords[pIndex + 1] = coordsMap[ps[j] + 1];
             colors[cIndex] = colorsMap[cs[j]];
@@ -436,13 +436,13 @@ var WebGLUtils = (function WebGLUtilsClosure() {
     }
     gl.clear(gl.COLOR_BUFFER_BIT);
 
-    var coordsBuffer = gl.createBuffer();
+    const coordsBuffer = gl.createBuffer();
     gl.bindBuffer(gl.ARRAY_BUFFER, coordsBuffer);
     gl.bufferData(gl.ARRAY_BUFFER, coords, gl.STATIC_DRAW);
     gl.enableVertexAttribArray(cache.positionLocation);
     gl.vertexAttribPointer(cache.positionLocation, 2, gl.FLOAT, false, 0, 0);
 
-    var colorsBuffer = gl.createBuffer();
+    const colorsBuffer = gl.createBuffer();
     gl.bindBuffer(gl.ARRAY_BUFFER, colorsBuffer);
     gl.bufferData(gl.ARRAY_BUFFER, colors, gl.STATIC_DRAW);
     gl.enableVertexAttribArray(cache.colorLocation);