Fix ordering of tightPNG fills.

This addresses issue #65:
https://github.com/kanaka/noVNC/issues/65

When tightPNG encoded rects were received, any fill types were
immediately drawn to the canvas while images (PNG, JPEGs) were queued
for loading. This can cause screen corruption when things are changing
rapidly due to the misordering of fills vs images.

Also, remove the onload setting in each image on the queue and instead
decrease the tight image queue scanning interval (to 40ms or 25
scans per second).

include/rfb.js

@@ -96,7 +96,7 @@ var that           = {},  // Public API methods
     fb_height      = 0,
     fb_name        = "",
 
-    scan_imgQ_rate = 100,
+    scan_imgQ_rate = 40, // 25 times per second or so
     last_req_time  = 0,
     rre_chunk_sz   = 100,
 
@@ -1244,7 +1244,14 @@ encHandlers.TIGHT_PNG = function display_tight_png() {
     case "fill":
         ws.rQshift8(); // shift off ctl
         color = ws.rQshiftBytes(fb_depth);
-        display.fillRect(FBU.x, FBU.y, FBU.width, FBU.height, color);
+        FBU.imgQ.push({
+                'type': 'fill',
+                'img': {'complete': true},
+                'x': FBU.x,
+                'y': FBU.y,
+                'width': FBU.width,
+                'height': FBU.height,
+                'color': color});
         break;
     case "jpeg":
     case "png":
@@ -1256,8 +1263,12 @@ encHandlers.TIGHT_PNG = function display_tight_png() {
         //Util.Debug("   png, ws.rQlen(): " + ws.rQlen() + ", clength[0]: " + clength[0] + ", clength[1]: " + clength[1]);
         ws.rQshiftBytes(1 + clength[0]); // shift off ctl + compact length
         img = new Image();
-        img.onload = scan_tight_imgQ;
-        FBU.imgQ.push([img, FBU.x, FBU.y]);
+        //img.onload = scan_tight_imgQ;
+        FBU.imgQ.push({
+                'type': 'img',
+                'img': img,
+                'x': FBU.x,
+                'y': FBU.y});
         img.src = "data:image/" + cmode +
             extract_data_uri(ws.rQshiftBytes(clength[1]));
         img = null;
@@ -1280,13 +1291,17 @@ extract_data_uri = function(arr) {
 };
 
 scan_tight_imgQ = function() {
-    var img, imgQ, ctx;
+    var data, imgQ, ctx;
     ctx = display.get_context();
     if (rfb_state === 'normal') {
         imgQ = FBU.imgQ;
-        while ((imgQ.length > 0) && (imgQ[0][0].complete)) {
-            img = imgQ.shift();
-            ctx.drawImage(img[0], img[1], img[2]);
+        while ((imgQ.length > 0) && (imgQ[0].img.complete)) {
+            data = imgQ.shift();
+            if (data['type'] === 'fill') {
+                display.fillRect(data.x, data.y, data.width, data.height, data.color);
+            } else {
+                ctx.drawImage(data.img, data.x, data.y);
+            }
         }
         setTimeout(scan_tight_imgQ, scan_imgQ_rate);
     }