diff --git a/include/display.js b/include/display.js
index d7aa43f..3fa7ff7 100644
--- a/include/display.js
+++ b/include/display.js
@@ -19,11 +19,11 @@ var that           = {},  // Public API methods
     c_ctx          = null,
     c_forceCanvas  = false,
 
-    c_imageData, c_rgbxImage, c_cmapImage,
+    c_imageData, c_bgrxImage, c_cmapImage,
 
     // Predefine function variables (jslint)
-    imageDataCreate, imageDataGet, rgbxImageData, cmapImageData,
-    rgbxImageFill, cmapImageFill, setFillColor, rescale, flush,
+    imageDataCreate, imageDataGet, bgrxImageData, cmapImageData,
+    bgrxImageFill, cmapImageFill, setFillColor, rescale, flush,
 
     c_width        = 0,
     c_height       = 0,
@@ -137,14 +137,14 @@ function constructor() {
         if (conf.prefer_js === null) {
             conf.prefer_js = true;
         }
-        c_rgbxImage = rgbxImageData;
+        c_bgrxImage = bgrxImageData;
         c_cmapImage = cmapImageData;
     } else {
         Util.Warn("Canvas lacks imageData, using fillRect (slow)");
         conf.render_mode = "fillRect rendering (slow)";
         c_forceCanvas = true;
         conf.prefer_js = false;
-        c_rgbxImage = rgbxImageFill;
+        c_bgrxImage = bgrxImageFill;
         c_cmapImage = cmapImageFill;
     }
 
@@ -153,7 +153,7 @@ function constructor() {
         conf.render_mode += ", webkit bug workaround";
         Util.Debug("Working around WebKit bug #46319");
         c_webkit_bug = true;
-        for (func in {"fillRect":1, "copyImage":1, "rgbxImage":1,
+        for (func in {"fillRect":1, "copyImage":1, "bgrxImage":1,
                 "cmapImage":1, "blitStringImage":1}) {
             that[func] = (function() {
                 var myfunc = that[func]; // Save original function
@@ -247,13 +247,13 @@ flush = function() {
 };
 
 setFillColor = function(color) {
-    var rgb, newStyle;
+    var bgr, newStyle;
     if (conf.true_color) {
-        rgb = color;
+        bgr = color;
     } else {
-        rgb = conf.colourMap[color[0]];
+        bgr = conf.colourMap[color[0]];
     }
-    newStyle = "rgb(" + rgb[0] + "," + rgb[1] + "," + rgb[2] + ")";
+    newStyle = "rgb(" + bgr[2] + "," + bgr[1] + "," + bgr[0] + ")";
     if (newStyle !== c_prevStyle) {
         c_ctx.fillStyle = newStyle;
         c_prevStyle = newStyle;
@@ -311,22 +311,23 @@ that.copyImage = function(old_x, old_y, new_x, new_y, width, height) {
  *   gecko, Javascript array handling is much slower.
  */
 that.getTile = function(x, y, width, height, color) {
-    var img, data = [], rgb, red, green, blue, i;
+    var img, data = [], bgr, red, green, blue, i;
     img = {'x': x, 'y': y, 'width': width, 'height': height,
            'data': data};
     if (conf.prefer_js) {
         if (conf.true_color) {
-            rgb = color;
+            bgr = color;
         } else {
-            rgb = conf.colourMap[color[0]];
+            bgr = conf.colourMap[color[0]];
         }
-        red = rgb[0];
-        green = rgb[1];
-        blue = rgb[2];
+        // Keep in BGR order because bgrxImage will flip it
+        red = bgr[2];
+        green = bgr[1];
+        blue = bgr[0];
         for (i = 0; i < (width * height * 4); i+=4) {
-            data[i    ] = red;
+            data[i    ] = blue;
             data[i + 1] = green;
-            data[i + 2] = blue;
+            data[i + 2] = red;
         }
     } else {
         that.fillRect(x, y, width, height, color);
@@ -335,26 +336,27 @@ that.getTile = function(x, y, width, height, color) {
 };
 
 that.setSubTile = function(img, x, y, w, h, color) {
-    var data, p, rgb, red, green, blue, width, j, i, xend, yend;
+    var data, p, bgr, red, green, blue, width, j, i, xend, yend;
     if (conf.prefer_js) {
         data = img.data;
         width = img.width;
         if (conf.true_color) {
-            rgb = color;
+            bgr = color;
         } else {
-            rgb = conf.colourMap[color[0]];
+            bgr = conf.colourMap[color[0]];
         }
-        red = rgb[0];
-        green = rgb[1];
-        blue = rgb[2];
+        // Keep in BGR order because bgrxImage will flip it
+        red = bgr[2];
+        green = bgr[1];
+        blue = bgr[0];
         xend = x + w;
         yend = y + h;
         for (j = y; j < yend; j += 1) {
             for (i = x; i < xend; i += 1) {
                 p = (i + (j * width) ) * 4;
-                data[p    ] = red;
+                data[p    ] = blue;
                 data[p + 1] = green;
-                data[p + 2] = blue;
+                data[p + 2] = red;
             }   
         } 
     } else {
@@ -364,7 +366,7 @@ that.setSubTile = function(img, x, y, w, h, color) {
 
 that.putTile = function(img) {
     if (conf.prefer_js) {
-        c_rgbxImage(img.x, img.y, img.width, img.height, img.data, 0);
+        c_bgrxImage(img.x, img.y, img.width, img.height, img.data, 0);
     }
     // else: No-op, under gecko already done by setSubTile
 };
@@ -376,21 +378,21 @@ imageDataCreate = function(width, height) {
     return c_ctx.createImageData(width, height);
 };
 
-rgbxImageData = function(x, y, width, height, arr, offset) {
+bgrxImageData = function(x, y, width, height, arr, offset) {
     var img, i, j, data;
     img = c_imageData(width, height);
     data = img.data;
     for (i=0, j=offset; i < (width * height * 4); i=i+4, j=j+4) {
-        data[i    ] = arr[j    ];
+        data[i    ] = arr[j + 2];
         data[i + 1] = arr[j + 1];
-        data[i + 2] = arr[j + 2];
+        data[i + 2] = arr[j    ];
         data[i + 3] = 255; // Set Alpha
     }
     c_ctx.putImageData(img, x, y);
 };
 
 // really slow fallback if we don't have imageData
-rgbxImageFill = function(x, y, width, height, arr, offset) {
+bgrxImageFill = function(x, y, width, height, arr, offset) {
     var i, j, sx = 0, sy = 0;
     for (i=0, j=offset; i < (width * height); i+=1, j+=4) {
         that.fillRect(x+sx, y+sy, 1, 1, [arr[j], arr[j+1], arr[j+2]]);
@@ -403,15 +405,15 @@ rgbxImageFill = function(x, y, width, height, arr, offset) {
 };
 
 cmapImageData = function(x, y, width, height, arr, offset) {
-    var img, i, j, data, rgb, cmap;
+    var img, i, j, data, bgr, cmap;
     img = c_imageData(width, height);
     data = img.data;
     cmap = conf.colourMap;
     for (i=0, j=offset; i < (width * height * 4); i+=4, j+=1) {
-        rgb = cmap[arr[j]];
-        data[i    ] = rgb[0];
-        data[i + 1] = rgb[1];
-        data[i + 2] = rgb[2];
+        bgr = cmap[arr[j]];
+        data[i    ] = bgr[2];
+        data[i + 1] = bgr[1];
+        data[i + 2] = bgr[0];
         data[i + 3] = 255; // Set Alpha
     }
     c_ctx.putImageData(img, x, y);
@@ -433,7 +435,7 @@ cmapImageFill = function(x, y, width, height, arr, offset) {
 
 that.blitImage = function(x, y, width, height, arr, offset) {
     if (conf.true_color) {
-        c_rgbxImage(x, y, width, height, arr, offset);
+        c_bgrxImage(x, y, width, height, arr, offset);
     } else {
         c_cmapImage(x, y, width, height, arr, offset);
     }
diff --git a/include/rfb.js b/include/rfb.js
index feccc16..fcc8963 100644
--- a/include/rfb.js
+++ b/include/rfb.js
@@ -776,6 +776,16 @@ init_msg = function() {
                   ", green_shift: " + green_shift +
                   ", blue_shift: " + blue_shift);
 
+        if (big_endian !== 0) {
+            Util.Warn("Server native endian is not little endian");
+        }
+        if (red_shift !== 16) {
+            Util.Warn("Server native red-shift is not 16");
+        }
+        if (blue_shift !== 0) {
+            Util.Warn("Server native blue-shift is not 0");
+        }
+
         /* Connection name/title */
         name_length   = ws.rQshift32();
         fb_name = ws.rQshiftStr(name_length);
@@ -842,9 +852,9 @@ normal_msg = function() {
             //Util.Debug("red after: " + red);
             green = parseInt(ws.rQshift16() / 256, 10);
             blue = parseInt(ws.rQshift16() / 256, 10);
-            Util.Debug("*** colourMap: " + display.get_colourMap());
-            display.set_colourMap([red, green, blue], first_colour + c);
+            display.set_colourMap([blue, green, red], first_colour + c);
         }
+        Util.Debug("*** colourMap: " + display.get_colourMap());
         Util.Info("Registered " + num_colours + " colourMap entries");
         //Util.Debug("colourMap: " + display.get_colourMap());
         break;
@@ -1378,9 +1388,9 @@ pixelFormat = function() {
     arr.push16(255);  // red-max
     arr.push16(255);  // green-max
     arr.push16(255);  // blue-max
-    arr.push8(0);     // red-shift
+    arr.push8(16);    // red-shift
     arr.push8(8);     // green-shift
-    arr.push8(16);    // blue-shift
+    arr.push8(0);     // blue-shift
 
     arr.push8(0);     // padding
     arr.push8(0);     // padding
diff --git a/tests/canvas.html b/tests/canvas.html
index b66d214..010e8f3 100644
--- a/tests/canvas.html
+++ b/tests/canvas.html
@@ -9,7 +9,7 @@
         <script src="../include/util.js"></script>
         <script src="../include/webutil.js"></script>
         <script src="../include/base64.js"></script>
-        <script src="../include/canvas.js"></script>
+        <script src="../include/display.js"></script>
         <script src="face.png.js"></script>
     </head>
     <body>
@@ -36,7 +36,7 @@
 
     <script>
         var msg_cnt = 0;
-        var start_width = 300, start_height = 100;
+        var display, start_width = 300, start_height = 100;
         var iterations;
 
         function message(str) {
@@ -48,12 +48,12 @@
         }
 
         function test_functions () {
-            var img, x, y, w, h, ctx = canvas.getContext();
-            w = canvas.get_width();
-            h = canvas.get_height();
-            canvas.fillRect(0, 0, w, h, [240,240,240]);
+            var img, x, y, w, h, ctx = display.get_context();
+            w = display.get_width();
+            h = display.get_height();
+            display.fillRect(0, 0, w, h, [240,240,240]);
 
-            canvas.blitStringImage("data:image/png;base64," + face64, 150, 10);
+            display.blitStringImage("data:image/png;base64," + face64, 150, 10);
 
             var himg = new Image();
             himg.onload = function () {
@@ -70,14 +70,14 @@
                     data[(y*50 + x)*4 + 3] = 255;
                 }
             }
-            canvas.blitImage(30, 10, 50, 50, data, 0);
+            display.blitImage(30, 10, 50, 50, data, 0);
 
-            img = canvas.getTile(5,5,16,16,[0,128,128]);
-            canvas.putTile(img);
+            img = display.getTile(5,5,16,16,[0,128,128]);
+            display.putTile(img);
 
-            img = canvas.getTile(90,15,16,16,[0,0,0]);
-            canvas.setSubTile(img, 0,0,16,16,[128,128,0]);
-            canvas.putTile(img);
+            img = display.getTile(90,15,16,16,[0,0,0]);
+            display.setSubTile(img, 0,0,16,16,[128,128,0]);
+            display.putTile(img);
         }
 
         function begin () {
@@ -90,7 +90,7 @@
         function start_delayed () {
             var ret;
 
-            ret = canvas.set_prefer_js(true);
+            ret = display.set_prefer_js(true);
             if (ret) {
                 message("Running test: prefer Javascript ops");
                 var time1 = run_test();
@@ -100,14 +100,14 @@
                 message("Could not run: prefer Javascript ops");
             }
 
-            canvas.set_prefer_js(false);
+            display.set_prefer_js(false);
             message("Running test: prefer Canvas ops");
             var time2 = run_test();
             message("prefer Canvas ops: " + time2 + "ms total, " +
                     (time2 / iterations) + "ms per frame");
 
             if (Util.get_logging() !== 'debug') {
-                canvas.resize(start_width, start_height, true);
+                display.resize(start_width, start_height, true);
                 test_functions();
             }
             $D('startButton').disabled = false;
@@ -118,7 +118,7 @@
             var width, height;
             width = $D('width').value;
             height = $D('height').value;
-            canvas.resize(width, height);
+            display.resize(width, height);
             var color, start_time = (new Date()).getTime(), w, h;
             for (var i=0; i < iterations; i++) {
                 color = [128, 128, (255 / iterations) * i, 0];
@@ -126,9 +126,9 @@
                     for (var y=0; y < height; y = y + 16) {
                         w = Math.min(16, width - x);
                         h = Math.min(16, height - y);
-                        var tile = canvas.getTile(x, y, w, h, color);
-                        canvas.setSubTile(tile, 0, 0, w, h, color);
-                        canvas.putTile(tile);
+                        var tile = display.getTile(x, y, w, h, color);
+                        display.setSubTile(tile, 0, 0, w, h, color);
+                        display.putTile(tile);
                     }
                 }
             }
@@ -139,8 +139,8 @@
         window.onload = function() {
             message("in onload");
             $D('iterations').value = 10;
-            canvas = new Canvas({'target' : $D('canvas')});
-            canvas.resize(start_width, start_height, true);
+            display = new Display({'target' : $D('canvas')});
+            display.resize(start_width, start_height, true);
             message("Canvas initialized");
             test_functions();
         }