@novnc/novnc 1.0.0 → 1.2.0

package/core/display.js

@@ -1,7 +1,6 @@
 /*
  * noVNC: HTML5 VNC client
- * Copyright (C) 2012 Joel Martin
- * Copyright (C) 2015 Samuel Mannehed for Cendio AB
+ * Copyright (C) 2019 The noVNC Authors
  * Licensed under MPL 2.0 (see LICENSE.txt)
  *
  * See README.md for usage and integration instructions.
@@ -9,111 +8,104 @@
 
 import * as Log from './util/logging.js';
 import Base64 from "./base64.js";
+import { supportsImageMetadata } from './util/browser.js';
+import { toSigned32bit } from './util/int.js';
 
-export default function Display(target) {
-    this._drawCtx = null;
-    this._c_forceCanvas = false;
+export default class Display {
+    constructor(target) {
+        this._drawCtx = null;
 
-    this._renderQ = [];  // queue drawing actions for in-oder rendering
-    this._flushing = false;
+        this._renderQ = [];  // queue drawing actions for in-oder rendering
+        this._flushing = false;
 
-    // the full frame buffer (logical canvas) size
-    this._fb_width = 0;
-    this._fb_height = 0;
+        // the full frame buffer (logical canvas) size
+        this._fbWidth = 0;
+        this._fbHeight = 0;
 
-    this._prevDrawStyle = "";
-    this._tile = null;
-    this._tile16x16 = null;
-    this._tile_x = 0;
-    this._tile_y = 0;
+        this._prevDrawStyle = "";
+        this._tile = null;
+        this._tile16x16 = null;
+        this._tileX = 0;
+        this._tileY = 0;
 
-    Log.Debug(">> Display.constructor");
+        Log.Debug(">> Display.constructor");
 
-    // The visible canvas
-    this._target = target;
+        // The visible canvas
+        this._target = target;
 
-    if (!this._target) {
-        throw new Error("Target must be set");
-    }
+        if (!this._target) {
+            throw new Error("Target must be set");
+        }
 
-    if (typeof this._target === 'string') {
-        throw new Error('target must be a DOM element');
-    }
+        if (typeof this._target === 'string') {
+            throw new Error('target must be a DOM element');
+        }
 
-    if (!this._target.getContext) {
-        throw new Error("no getContext method");
-    }
+        if (!this._target.getContext) {
+            throw new Error("no getContext method");
+        }
 
-    this._targetCtx = this._target.getContext('2d');
+        this._targetCtx = this._target.getContext('2d');
 
-    // the visible canvas viewport (i.e. what actually gets seen)
-    this._viewportLoc = { 'x': 0, 'y': 0, 'w': this._target.width, 'h': this._target.height };
+        // the visible canvas viewport (i.e. what actually gets seen)
+        this._viewportLoc = { 'x': 0, 'y': 0, 'w': this._target.width, 'h': this._target.height };
 
-    // The hidden canvas, where we do the actual rendering
-    this._backbuffer = document.createElement('canvas');
-    this._drawCtx = this._backbuffer.getContext('2d');
+        // The hidden canvas, where we do the actual rendering
+        this._backbuffer = document.createElement('canvas');
+        this._drawCtx = this._backbuffer.getContext('2d');
 
-    this._damageBounds = { left:0, top:0,
-                           right: this._backbuffer.width,
-                           bottom: this._backbuffer.height };
+        this._damageBounds = { left: 0, top: 0,
+                               right: this._backbuffer.width,
+                               bottom: this._backbuffer.height };
 
-    Log.Debug("User Agent: " + navigator.userAgent);
+        Log.Debug("User Agent: " + navigator.userAgent);
 
-    this.clear();
+        // Check canvas features
+        if (!('createImageData' in this._drawCtx)) {
+            throw new Error("Canvas does not support createImageData");
+        }
 
-    // Check canvas features
-    if (!('createImageData' in this._drawCtx)) {
-        throw new Error("Canvas does not support createImageData");
-    }
+        this._tile16x16 = this._drawCtx.createImageData(16, 16);
+        Log.Debug("<< Display.constructor");
 
-    this._tile16x16 = this._drawCtx.createImageData(16, 16);
-    Log.Debug("<< Display.constructor");
-};
+        // ===== PROPERTIES =====
 
-var SUPPORTS_IMAGEDATA_CONSTRUCTOR = false;
-try {
-    new ImageData(new Uint8ClampedArray(4), 1, 1);
-    SUPPORTS_IMAGEDATA_CONSTRUCTOR = true;
-} catch (ex) {
-    // ignore failure
-}
+        this._scale = 1.0;
+        this._clipViewport = false;
+
+        // ===== EVENT HANDLERS =====
+
+        this.onflush = () => {}; // A flush request has finished
+    }
 
-Display.prototype = {
     // ===== PROPERTIES =====
 
-    _scale: 1.0,
-    get scale() { return this._scale; },
+    get scale() { return this._scale; }
     set scale(scale) {
         this._rescale(scale);
-    },
+    }
 
-    _clipViewport: false,
-    get clipViewport() { return this._clipViewport; },
+    get clipViewport() { return this._clipViewport; }
     set clipViewport(viewport) {
         this._clipViewport = viewport;
         // May need to readjust the viewport dimensions
-        var vp = this._viewportLoc;
+        const vp = this._viewportLoc;
         this.viewportChangeSize(vp.w, vp.h);
         this.viewportChangePos(0, 0);
-    },
+    }
 
     get width() {
-        return this._fb_width;
-    },
-    get height() {
-        return this._fb_height;
-    },
-
-    logo: null,
-
-    // ===== EVENT HANDLERS =====
+        return this._fbWidth;
+    }
 
-    onflush: function () {},        // A flush request has finished
+    get height() {
+        return this._fbHeight;
+    }
 
     // ===== PUBLIC METHODS =====
 
-    viewportChangePos: function (deltaX, deltaY) {
-        var vp = this._viewportLoc;
+    viewportChangePos(deltaX, deltaY) {
+        const vp = this._viewportLoc;
         deltaX = Math.floor(deltaX);
         deltaY = Math.floor(deltaY);
 
@@ -122,23 +114,23 @@ Display.prototype = {
             deltaY = -vp.h;
         }
 
-        var vx2 = vp.x + vp.w - 1;
-        var vy2 = vp.y + vp.h - 1;
+        const vx2 = vp.x + vp.w - 1;
+        const vy2 = vp.y + vp.h - 1;
 
         // Position change
 
         if (deltaX < 0 && vp.x + deltaX < 0) {
             deltaX = -vp.x;
         }
-        if (vx2 + deltaX >= this._fb_width) {
-            deltaX -= vx2 + deltaX - this._fb_width + 1;
+        if (vx2 + deltaX >= this._fbWidth) {
+            deltaX -= vx2 + deltaX - this._fbWidth + 1;
         }
 
         if (vp.y + deltaY < 0) {
             deltaY = -vp.y;
         }
-        if (vy2 + deltaY >= this._fb_height) {
-            deltaY -= (vy2 + deltaY - this._fb_height + 1);
+        if (vy2 + deltaY >= this._fbHeight) {
+            deltaY -= (vy2 + deltaY - this._fbHeight + 1);
         }
 
         if (deltaX === 0 && deltaY === 0) {
@@ -152,32 +144,35 @@ Display.prototype = {
         this._damage(vp.x, vp.y, vp.w, vp.h);
 
         this.flip();
-    },
+    }
 
-    viewportChangeSize: function(width, height) {
+    viewportChangeSize(width, height) {
 
         if (!this._clipViewport ||
             typeof(width) === "undefined" ||
             typeof(height) === "undefined") {
 
             Log.Debug("Setting viewport to full display region");
-            width = this._fb_width;
-            height = this._fb_height;
+            width = this._fbWidth;
+            height = this._fbHeight;
         }
 
-        if (width > this._fb_width) {
-            width = this._fb_width;
+        width = Math.floor(width);
+        height = Math.floor(height);
+
+        if (width > this._fbWidth) {
+            width = this._fbWidth;
         }
-        if (height > this._fb_height) {
-            height = this._fb_height;
+        if (height > this._fbHeight) {
+            height = this._fbHeight;
         }
 
-        var vp = this._viewportLoc;
+        const vp = this._viewportLoc;
         if (vp.w !== width || vp.h !== height) {
             vp.w = width;
             vp.h = height;
 
-            var canvas = this._target;
+            const canvas = this._target;
             canvas.width = width;
             canvas.height = height;
 
@@ -190,27 +185,33 @@ Display.prototype = {
             // Update the visible size of the target canvas
             this._rescale(this._scale);
         }
-    },
+    }
 
-    absX: function (x) {
-        return x / this._scale + this._viewportLoc.x;
-    },
+    absX(x) {
+        if (this._scale === 0) {
+            return 0;
+        }
+        return toSigned32bit(x / this._scale + this._viewportLoc.x);
+    }
 
-    absY: function (y) {
-        return y / this._scale + this._viewportLoc.y;
-    },
+    absY(y) {
+        if (this._scale === 0) {
+            return 0;
+        }
+        return toSigned32bit(y / this._scale + this._viewportLoc.y);
+    }
 
-    resize: function (width, height) {
+    resize(width, height) {
         this._prevDrawStyle = "";
 
-        this._fb_width = width;
-        this._fb_height = height;
+        this._fbWidth = width;
+        this._fbHeight = height;
 
-        var canvas = this._backbuffer;
+        const canvas = this._backbuffer;
         if (canvas.width !== width || canvas.height !== height) {
 
             // We have to save the canvas data since changing the size will clear it
-            var saveImg = null;
+            let saveImg = null;
             if (canvas.width > 0 && canvas.height > 0) {
                 saveImg = this._drawCtx.getImageData(0, 0, canvas.width, canvas.height);
             }
@@ -229,13 +230,13 @@ Display.prototype = {
 
         // Readjust the viewport as it may be incorrectly sized
         // and positioned
-        var vp = this._viewportLoc;
+        const vp = this._viewportLoc;
         this.viewportChangeSize(vp.w, vp.h);
         this.viewportChangePos(0, 0);
-    },
+    }
 
     // Track what parts of the visible canvas that need updating
-    _damage: function(x, y, w, h) {
+    _damage(x, y, w, h) {
         if (x < this._damageBounds.left) {
             this._damageBounds.left = x;
         }
@@ -248,25 +249,23 @@ Display.prototype = {
         if ((y + h) > this._damageBounds.bottom) {
             this._damageBounds.bottom = y + h;
         }
-    },
+    }
 
     // Update the visible canvas with the contents of the
     // rendering canvas
-    flip: function(from_queue) {
-        if (this._renderQ.length !== 0 && !from_queue) {
-            this._renderQ_push({
+    flip(fromQueue) {
+        if (this._renderQ.length !== 0 && !fromQueue) {
+            this._renderQPush({
                 'type': 'flip'
             });
         } else {
-            var x, y, vx, vy, w, h;
-
-            x = this._damageBounds.left;
-            y = this._damageBounds.top;
-            w = this._damageBounds.right - x;
-            h = this._damageBounds.bottom - y;
+            let x = this._damageBounds.left;
+            let y = this._damageBounds.top;
+            let w = this._damageBounds.right - x;
+            let h = this._damageBounds.bottom - y;
 
-            vx = x - this._viewportLoc.x;
-            vy = y - this._viewportLoc.y;
+            let vx = x - this._viewportLoc.x;
+            let vy = y - this._viewportLoc.y;
 
             if (vx < 0) {
                 w += vx;
@@ -298,34 +297,23 @@ Display.prototype = {
             this._damageBounds.left = this._damageBounds.top = 65535;
             this._damageBounds.right = this._damageBounds.bottom = 0;
         }
-    },
-
-    clear: function () {
-        if (this._logo) {
-            this.resize(this._logo.width, this._logo.height);
-            this.imageRect(0, 0, this._logo.type, this._logo.data);
-        } else {
-            this.resize(240, 20);
-            this._drawCtx.clearRect(0, 0, this._fb_width, this._fb_height);
-        }
-        this.flip();
-    },
+    }
 
-    pending: function() {
+    pending() {
         return this._renderQ.length > 0;
-    },
+    }
 
-    flush: function() {
+    flush() {
         if (this._renderQ.length === 0) {
             this.onflush();
         } else {
             this._flushing = true;
         }
-    },
+    }
 
-    fillRect: function (x, y, width, height, color, from_queue) {
-        if (this._renderQ.length !== 0 && !from_queue) {
-            this._renderQ_push({
+    fillRect(x, y, width, height, color, fromQueue) {
+        if (this._renderQ.length !== 0 && !fromQueue) {
+            this._renderQPush({
                 'type': 'fill',
                 'x': x,
                 'y': y,
@@ -338,16 +326,16 @@ Display.prototype = {
             this._drawCtx.fillRect(x, y, width, height);
             this._damage(x, y, width, height);
         }
-    },
+    }
 
-    copyImage: function (old_x, old_y, new_x, new_y, w, h, from_queue) {
-        if (this._renderQ.length !== 0 && !from_queue) {
-            this._renderQ_push({
+    copyImage(oldX, oldY, newX, newY, w, h, fromQueue) {
+        if (this._renderQ.length !== 0 && !fromQueue) {
+            this._renderQPush({
                 'type': 'copy',
-                'old_x': old_x,
-                'old_y': old_y,
-                'x': new_x,
-                'y': new_y,
+                'oldX': oldX,
+                'oldY': oldY,
+                'x': newX,
+                'y': newY,
                 'width': w,
                 'height': h,
             });
@@ -365,84 +353,92 @@ Display.prototype = {
             this._drawCtx.imageSmoothingEnabled = false;
 
             this._drawCtx.drawImage(this._backbuffer,
-                                    old_x, old_y, w, h,
-                                    new_x, new_y, w, h);
-            this._damage(new_x, new_y, w, h);
+                                    oldX, oldY, w, h,
+                                    newX, newY, w, h);
+            this._damage(newX, newY, w, h);
         }
-    },
+    }
 
-    imageRect: function(x, y, mime, arr) {
-        var img = new Image();
+    imageRect(x, y, width, height, mime, arr) {
+        /* The internal logic cannot handle empty images, so bail early */
+        if ((width === 0) || (height === 0)) {
+            return;
+        }
+
+        const img = new Image();
         img.src = "data: " + mime + ";base64," + Base64.encode(arr);
-        this._renderQ_push({
+
+        this._renderQPush({
             'type': 'img',
             'img': img,
             'x': x,
-            'y': y
+            'y': y,
+            'width': width,
+            'height': height
         });
-    },
+    }
 
     // start updating a tile
-    startTile: function (x, y, width, height, color) {
-        this._tile_x = x;
-        this._tile_y = y;
+    startTile(x, y, width, height, color) {
+        this._tileX = x;
+        this._tileY = y;
         if (width === 16 && height === 16) {
             this._tile = this._tile16x16;
         } else {
             this._tile = this._drawCtx.createImageData(width, height);
         }
 
-        var red = color[2];
-        var green = color[1];
-        var blue = color[0];
+        const red = color[2];
+        const green = color[1];
+        const blue = color[0];
 
-        var data = this._tile.data;
-        for (var i = 0; i < width * height * 4; i += 4) {
+        const data = this._tile.data;
+        for (let i = 0; i < width * height * 4; i += 4) {
             data[i] = red;
             data[i + 1] = green;
             data[i + 2] = blue;
             data[i + 3] = 255;
         }
-    },
+    }
 
     // update sub-rectangle of the current tile
-    subTile: function (x, y, w, h, color) {
-        var red = color[2];
-        var green = color[1];
-        var blue = color[0];
-        var xend = x + w;
-        var yend = y + h;
-
-        var data = this._tile.data;
-        var width = this._tile.width;
-        for (var j = y; j < yend; j++) {
-            for (var i = x; i < xend; i++) {
-                var p = (i + (j * width)) * 4;
+    subTile(x, y, w, h, color) {
+        const red = color[2];
+        const green = color[1];
+        const blue = color[0];
+        const xend = x + w;
+        const yend = y + h;
+
+        const data = this._tile.data;
+        const width = this._tile.width;
+        for (let j = y; j < yend; j++) {
+            for (let i = x; i < xend; i++) {
+                const p = (i + (j * width)) * 4;
                 data[p] = red;
                 data[p + 1] = green;
                 data[p + 2] = blue;
                 data[p + 3] = 255;
             }
         }
-    },
+    }
 
     // draw the current tile to the screen
-    finishTile: function () {
-        this._drawCtx.putImageData(this._tile, this._tile_x, this._tile_y);
-        this._damage(this._tile_x, this._tile_y,
+    finishTile() {
+        this._drawCtx.putImageData(this._tile, this._tileX, this._tileY);
+        this._damage(this._tileX, this._tileY,
                      this._tile.width, this._tile.height);
-    },
+    }
 
-    blitImage: function (x, y, width, height, arr, offset, from_queue) {
-        if (this._renderQ.length !== 0 && !from_queue) {
+    blitImage(x, y, width, height, arr, offset, fromQueue) {
+        if (this._renderQ.length !== 0 && !fromQueue) {
             // NB(directxman12): it's technically more performant here to use preallocated arrays,
             // but it's a lot of extra work for not a lot of payoff -- if we're using the render queue,
             // this probably isn't getting called *nearly* as much
-            var new_arr = new Uint8Array(width * height * 4);
-            new_arr.set(new Uint8Array(arr.buffer, 0, new_arr.length));
-            this._renderQ_push({
+            const newArr = new Uint8Array(width * height * 4);
+            newArr.set(new Uint8Array(arr.buffer, 0, newArr.length));
+            this._renderQPush({
                 'type': 'blit',
-                'data': new_arr,
+                'data': newArr,
                 'x': x,
                 'y': y,
                 'width': width,
@@ -451,18 +447,18 @@ Display.prototype = {
         } else {
             this._bgrxImageData(x, y, width, height, arr, offset);
         }
-    },
+    }
 
-    blitRgbImage: function (x, y , width, height, arr, offset, from_queue) {
-        if (this._renderQ.length !== 0 && !from_queue) {
+    blitRgbImage(x, y, width, height, arr, offset, fromQueue) {
+        if (this._renderQ.length !== 0 && !fromQueue) {
             // NB(directxman12): it's technically more performant here to use preallocated arrays,
             // but it's a lot of extra work for not a lot of payoff -- if we're using the render queue,
             // this probably isn't getting called *nearly* as much
-            var new_arr = new Uint8Array(width * height * 3);
-            new_arr.set(new Uint8Array(arr.buffer, 0, new_arr.length));
-            this._renderQ_push({
+            const newArr = new Uint8Array(width * height * 3);
+            newArr.set(new Uint8Array(arr.buffer, 0, newArr.length));
+            this._renderQPush({
                 'type': 'blitRgb',
-                'data': new_arr,
+                'data': newArr,
                 'x': x,
                 'y': y,
                 'width': width,
@@ -471,18 +467,18 @@ Display.prototype = {
         } else {
             this._rgbImageData(x, y, width, height, arr, offset);
         }
-    },
+    }
 
-    blitRgbxImage: function (x, y, width, height, arr, offset, from_queue) {
-        if (this._renderQ.length !== 0 && !from_queue) {
+    blitRgbxImage(x, y, width, height, arr, offset, fromQueue) {
+        if (this._renderQ.length !== 0 && !fromQueue) {
             // NB(directxman12): it's technically more performant here to use preallocated arrays,
             // but it's a lot of extra work for not a lot of payoff -- if we're using the render queue,
             // this probably isn't getting called *nearly* as much
-            var new_arr = new Uint8Array(width * height * 4);
-            new_arr.set(new Uint8Array(arr.buffer, 0, new_arr.length));
-            this._renderQ_push({
+            const newArr = new Uint8Array(width * height * 4);
+            newArr.set(new Uint8Array(arr.buffer, 0, newArr.length));
+            this._renderQPush({
                 'type': 'blitRgbx',
-                'data': new_arr,
+                'data': newArr,
                 'x': x,
                 'y': y,
                 'width': width,
@@ -491,72 +487,67 @@ Display.prototype = {
         } else {
             this._rgbxImageData(x, y, width, height, arr, offset);
         }
-    },
+    }
 
-    drawImage: function (img, x, y) {
+    drawImage(img, x, y) {
         this._drawCtx.drawImage(img, x, y);
         this._damage(x, y, img.width, img.height);
-    },
+    }
 
-    changeCursor: function (pixels, mask, hotx, hoty, w, h) {
-        Display.changeCursor(this._target, pixels, mask, hotx, hoty, w, h);
-    },
+    autoscale(containerWidth, containerHeight) {
+        let scaleRatio;
 
-    defaultCursor: function () {
-        this._target.style.cursor = "default";
-    },
+        if (containerWidth === 0 || containerHeight === 0) {
+            scaleRatio = 0;
 
-    disableLocalCursor: function () {
-        this._target.style.cursor = "none";
-    },
+        } else {
 
-    autoscale: function (containerWidth, containerHeight) {
-        var vp = this._viewportLoc;
-        var targetAspectRatio = containerWidth / containerHeight;
-        var fbAspectRatio = vp.w / vp.h;
+            const vp = this._viewportLoc;
+            const targetAspectRatio = containerWidth / containerHeight;
+            const fbAspectRatio = vp.w / vp.h;
 
-        var scaleRatio;
-        if (fbAspectRatio >= targetAspectRatio) {
-            scaleRatio = containerWidth / vp.w;
-        } else {
-            scaleRatio = containerHeight / vp.h;
+            if (fbAspectRatio >= targetAspectRatio) {
+                scaleRatio = containerWidth / vp.w;
+            } else {
+                scaleRatio = containerHeight / vp.h;
+            }
         }
 
         this._rescale(scaleRatio);
-    },
+    }
 
     // ===== PRIVATE METHODS =====
 
-    _rescale: function (factor) {
+    _rescale(factor) {
         this._scale = factor;
-        var vp = this._viewportLoc;
+        const vp = this._viewportLoc;
 
         // NB(directxman12): If you set the width directly, or set the
         //                   style width to a number, the canvas is cleared.
         //                   However, if you set the style width to a string
         //                   ('NNNpx'), the canvas is scaled without clearing.
-        var width = Math.round(factor * vp.w) + 'px';
-        var height = Math.round(factor * vp.h) + 'px';
+        const width = factor * vp.w + 'px';
+        const height = factor * vp.h + 'px';
 
         if ((this._target.style.width !== width) ||
             (this._target.style.height !== height)) {
             this._target.style.width = width;
             this._target.style.height = height;
         }
-    },
+    }
 
-    _setFillColor: function (color) {
-        var newStyle = 'rgb(' + color[2] + ',' + color[1] + ',' + color[0] + ')';
+    _setFillColor(color) {
+        const newStyle = 'rgb(' + color[2] + ',' + color[1] + ',' + color[0] + ')';
         if (newStyle !== this._prevDrawStyle) {
             this._drawCtx.fillStyle = newStyle;
             this._prevDrawStyle = newStyle;
         }
-    },
+    }
 
-    _rgbImageData: function (x, y, width, height, arr, offset) {
-        var img = this._drawCtx.createImageData(width, height);
-        var data = img.data;
-        for (var i = 0, j = offset; i < width * height * 4; i += 4, j += 3) {
+    _rgbImageData(x, y, width, height, arr, offset) {
+        const img = this._drawCtx.createImageData(width, height);
+        const data = img.data;
+        for (let i = 0, j = offset; i < width * height * 4; i += 4, j += 3) {
             data[i]     = arr[j];
             data[i + 1] = arr[j + 1];
             data[i + 2] = arr[j + 2];
@@ -564,12 +555,12 @@ Display.prototype = {
         }
         this._drawCtx.putImageData(img, x, y);
         this._damage(x, y, img.width, img.height);
-    },
+    }
 
-    _bgrxImageData: function (x, y, width, height, arr, offset) {
-        var img = this._drawCtx.createImageData(width, height);
-        var data = img.data;
-        for (var i = 0, j = offset; i < width * height * 4; i += 4, j += 4) {
+    _bgrxImageData(x, y, width, height, arr, offset) {
+        const img = this._drawCtx.createImageData(width, height);
+        const data = img.data;
+        for (let i = 0, j = offset; i < width * height * 4; i += 4, j += 4) {
             data[i]     = arr[j + 2];
             data[i + 1] = arr[j + 1];
             data[i + 2] = arr[j];
@@ -577,12 +568,12 @@ Display.prototype = {
         }
         this._drawCtx.putImageData(img, x, y);
         this._damage(x, y, img.width, img.height);
-    },
+    }
 
-    _rgbxImageData: function (x, y, width, height, arr, offset) {
+    _rgbxImageData(x, y, width, height, arr, offset) {
         // NB(directxman12): arr must be an Type Array view
-        var img;
-        if (SUPPORTS_IMAGEDATA_CONSTRUCTOR) {
+        let img;
+        if (supportsImageMetadata) {
             img = new ImageData(new Uint8ClampedArray(arr.buffer, arr.byteOffset, width * height * 4), width, height);
         } else {
             img = this._drawCtx.createImageData(width, height);
@@ -590,34 +581,34 @@ Display.prototype = {
         }
         this._drawCtx.putImageData(img, x, y);
         this._damage(x, y, img.width, img.height);
-    },
+    }
 
-    _renderQ_push: function (action) {
+    _renderQPush(action) {
         this._renderQ.push(action);
         if (this._renderQ.length === 1) {
             // If this can be rendered immediately it will be, otherwise
             // the scanner will wait for the relevant event
-            this._scan_renderQ();
+            this._scanRenderQ();
         }
-    },
+    }
 
-    _resume_renderQ: function() {
+    _resumeRenderQ() {
         // "this" is the object that is ready, not the
         // display object
-        this.removeEventListener('load', this._noVNC_display._resume_renderQ);
-        this._noVNC_display._scan_renderQ();
-    },
+        this.removeEventListener('load', this._noVNCDisplay._resumeRenderQ);
+        this._noVNCDisplay._scanRenderQ();
+    }
 
-    _scan_renderQ: function () {
-        var ready = true;
+    _scanRenderQ() {
+        let ready = true;
         while (ready && this._renderQ.length > 0) {
-            var a = this._renderQ[0];
+            const a = this._renderQ[0];
             switch (a.type) {
                 case 'flip':
                     this.flip(true);
                     break;
                 case 'copy':
-                    this.copyImage(a.old_x, a.old_y, a.x, a.y, a.width, a.height, true);
+                    this.copyImage(a.oldX, a.oldY, a.x, a.y, a.width, a.height, true);
                     break;
                 case 'fill':
                     this.fillRect(a.x, a.y, a.width, a.height, a.color, true);
@@ -632,11 +623,18 @@ Display.prototype = {
                     this.blitRgbxImage(a.x, a.y, a.width, a.height, a.data, 0, true);
                     break;
                 case 'img':
-                    if (a.img.complete) {
+                    /* IE tends to set "complete" prematurely, so check dimensions */
+                    if (a.img.complete && (a.img.width !== 0) && (a.img.height !== 0)) {
+                        if (a.img.width !== a.width || a.img.height !== a.height) {
+                            Log.Error("Decoded image has incorrect dimensions. Got " +
+                                      a.img.width + "x" + a.img.height + ". Expected " +
+                                      a.width + "x" + a.height + ".");
+                            return;
+                        }
                         this.drawImage(a.img, a.x, a.y);
                     } else {
-                        a.img._noVNC_display = this;
-                        a.img.addEventListener('load', this._resume_renderQ);
+                        a.img._noVNCDisplay = this;
+                        a.img.addEventListener('load', this._resumeRenderQ);
                         // We need to wait for this image to 'load'
                         // to keep things in-order
                         ready = false;
@@ -653,46 +651,5 @@ Display.prototype = {
             this._flushing = false;
             this.onflush();
         }
-    },
-};
-
-// Class Methods
-Display.changeCursor = function (target, pixels, mask, hotx, hoty, w, h) {
-    if ((w === 0) || (h === 0)) {
-        target.style.cursor = 'none';
-        return;
-    }
-
-    var cur = []
-    var y, x;
-    for (y = 0; y < h; y++) {
-        for (x = 0; x < w; x++) {
-            var idx = y * Math.ceil(w / 8) + Math.floor(x / 8);
-            var alpha = (mask[idx] << (x % 8)) & 0x80 ? 255 : 0;
-            idx = ((w * y) + x) * 4;
-            cur.push(pixels[idx + 2]); // red
-            cur.push(pixels[idx + 1]); // green
-            cur.push(pixels[idx]);     // blue
-            cur.push(alpha);           // alpha
-        }
     }
-
-    var canvas = document.createElement('canvas');
-    var ctx = canvas.getContext('2d');
-
-    canvas.width = w;
-    canvas.height = h;
-
-    var img;
-    if (SUPPORTS_IMAGEDATA_CONSTRUCTOR) {
-        img = new ImageData(new Uint8ClampedArray(cur), w, h);
-    } else {
-        img = ctx.createImageData(w, h);
-        img.data.set(new Uint8ClampedArray(cur));
-    }
-    ctx.clearRect(0, 0, w, h);
-    ctx.putImageData(img, 0, 0);
-
-    var url = canvas.toDataURL();
-    target.style.cursor = 'url(' + url + ')' + hotx + ' ' + hoty + ', default';
-};
+}