diff --git a/canvas.html b/canvas.html
index cad6c87..d01295d 100644
--- a/canvas.html
+++ b/canvas.html
@@ -63,37 +63,38 @@
 
       xterm.debug = false;
 
-      [
-        '',
-        '\u001b[92m\'use strict\'\u001b[39m\u001b[90m;\u001b[39m',
-        '\u001b[90m/*jshint browser:true */\u001b[39m',
-        '',
-        '\u001b[32mvar\u001b[39m \u001b[37mTerminal\u001b[39m \u001b[93m=\u001b[39m \u001b[37mrequire\u001b[39m\u001b[90m(\u001b[39m\u001b[92m\'./term\'\u001b[39m\u001b[90m)\u001b[39m\u001b[32m,\u001b[39m',
-        '  \u001b[37mthrough\u001b[39m \u001b[93m=\u001b[39m \u001b[37mrequire\u001b[39m\u001b[90m(\u001b[39m\u001b[92m\'through\'\u001b[39m\u001b[90m)\u001b[39m\u001b[90m;\u001b[39m',
-        '',
-        '\u001b[37mmodule\u001b[39m\u001b[32m.\u001b[39m\u001b[37mexports\u001b[39m \u001b[93m=\u001b[39m \u001b[94mfunction\u001b[39m \u001b[90m(\u001b[39m\u001b[37mcols\u001b[39m\u001b[32m,\u001b[39m \u001b[37mrows\u001b[39m\u001b[32m,\u001b[39m \u001b[37mhandler\u001b[39m\u001b[90m)\u001b[39m \u001b[33m{\u001b[39m',
-        '  \u001b[32mvar\u001b[39m \u001b[37mterm\u001b[39m \u001b[93m=\u001b[39m \u001b[31mnew\u001b[39m \u001b[37mTerminal\u001b[39m\u001b[90m(\u001b[39m\u001b[37mcols\u001b[39m\u001b[32m,\u001b[39m \u001b[37mrows\u001b[39m\u001b[32m,\u001b[39m \u001b[37mhandler\u001b[39m\u001b[90m)\u001b[39m\u001b[90m;\u001b[39m',
-        '  \u001b[37mterm\u001b[39m\u001b[32m.\u001b[39m\u001b[37mopen\u001b[39m\u001b[90m(\u001b[39m\u001b[90m)\u001b[39m\u001b[90m;\u001b[39m',
-        '  ',
-        '  \u001b[32mvar\u001b[39m \u001b[37mhypernal\u001b[39m \u001b[93m=\u001b[39m \u001b[37mthrough\u001b[39m\u001b[90m(\u001b[39m\u001b[37mterm\u001b[39m\u001b[32m.\u001b[39m\u001b[37mwrite\u001b[39m\u001b[32m.\u001b[39m\u001b[37mbind\u001b[39m\u001b[90m(\u001b[39m\u001b[37mterm\u001b[39m\u001b[90m)\u001b[39m\u001b[90m)\u001b[39m\u001b[90m;\u001b[39m',
-        '  \u001b[37mhypernal\u001b[39m\u001b[32m.\u001b[39m\u001b[37mappendTo\u001b[39m \u001b[93m=\u001b[39m \u001b[94mfunction\u001b[39m \u001b[90m(\u001b[39m\u001b[37melem\u001b[39m\u001b[90m)\u001b[39m \u001b[33m{\u001b[39m',
-        '    \u001b[94mif\u001b[39m \u001b[90m(\u001b[39m\u001b[94mtypeof\u001b[39m \u001b[37melem\u001b[39m \u001b[93m===\u001b[39m \u001b[92m\'string\'\u001b[39m\u001b[90m)\u001b[39m \u001b[37melem\u001b[39m \u001b[93m=\u001b[39m \u001b[37mdocument\u001b[39m\u001b[32m.\u001b[39m\u001b[37mquerySelector\u001b[39m\u001b[90m(\u001b[39m\u001b[37melem\u001b[39m\u001b[90m)\u001b[39m\u001b[90m;\u001b[39m',
-        '',
-        '    \u001b[37melem\u001b[39m\u001b[32m.\u001b[39m\u001b[37mappendChild\u001b[39m\u001b[90m(\u001b[39m\u001b[37mterm\u001b[39m\u001b[32m.\u001b[39m\u001b[37melement\u001b[39m\u001b[90m)\u001b[39m\u001b[90m;\u001b[39m',
-        '    \u001b[37mterm\u001b[39m\u001b[32m.\u001b[39m\u001b[37melement\u001b[39m\u001b[32m.\u001b[39m\u001b[37mstyle\u001b[39m\u001b[32m.\u001b[39m\u001b[37mposition\u001b[39m \u001b[93m=\u001b[39m \u001b[92m\'relative\'\u001b[39m\u001b[90m;\u001b[39m',
-        '  \u001b[33m}\u001b[39m\u001b[90m;\u001b[39m',
-        '',
-        '  \u001b[37mhypernal\u001b[39m\u001b[32m.\u001b[39m\u001b[37mwriteln\u001b[39m \u001b[93m=\u001b[39m \u001b[94mfunction\u001b[39m \u001b[90m(\u001b[39m\u001b[37mline\u001b[39m\u001b[90m)\u001b[39m \u001b[33m{\u001b[39m',
-        '    \u001b[37mterm\u001b[39m\u001b[32m.\u001b[39m\u001b[37mwriteln\u001b[39m\u001b[90m(\u001b[39m\u001b[37mline\u001b[39m\u001b[90m)\u001b[39m\u001b[90m;\u001b[39m',
-        '  \u001b[33m}\u001b[39m\u001b[90m;\u001b[39m',
-        '',
-        '  \u001b[37mhypernal\u001b[39m\u001b[32m.\u001b[39m\u001b[37mwrite\u001b[39m \u001b[93m=\u001b[39m \u001b[37mterm\u001b[39m\u001b[32m.\u001b[39m\u001b[37mwrite\u001b[39m\u001b[32m.\u001b[39m\u001b[37mbind\u001b[39m\u001b[90m(\u001b[39m\u001b[37mterm\u001b[39m\u001b[90m)\u001b[39m\u001b[90m;\u001b[39m',
-        '',
-        '  \u001b[31mreturn\u001b[39m \u001b[37mhypernal\u001b[39m\u001b[90m;\u001b[39m',
-        '\u001b[33m}\u001b[39m\u001b[90m;\u001b[39m',
-        ''
-      ].forEach(function (line){ xterm.write(line + '\r\n'); });
+      //      [
+      //        '',
+      //        '\u001b[92m\'use strict\'\u001b[39m\u001b[90m;\u001b[39m',
+      //        '\u001b[90m/*jshint browser:true */\u001b[39m',
+      //        '',
+      //        '\u001b[32mvar\u001b[39m \u001b[37mTerminal\u001b[39m \u001b[93m=\u001b[39m \u001b[37mrequire\u001b[39m\u001b[90m(\u001b[39m\u001b[92m\'./term\'\u001b[39m\u001b[90m)\u001b[39m\u001b[32m,\u001b[39m',
+      //        '  \u001b[37mthrough\u001b[39m \u001b[93m=\u001b[39m \u001b[37mrequire\u001b[39m\u001b[90m(\u001b[39m\u001b[92m\'through\'\u001b[39m\u001b[90m)\u001b[39m\u001b[90m;\u001b[39m',
+      //        '',
+      //        '\u001b[37mmodule\u001b[39m\u001b[32m.\u001b[39m\u001b[37mexports\u001b[39m \u001b[93m=\u001b[39m \u001b[94mfunction\u001b[39m \u001b[90m(\u001b[39m\u001b[37mcols\u001b[39m\u001b[32m,\u001b[39m \u001b[37mrows\u001b[39m\u001b[32m,\u001b[39m \u001b[37mhandler\u001b[39m\u001b[90m)\u001b[39m \u001b[33m{\u001b[39m',
+      //        '  \u001b[32mvar\u001b[39m \u001b[37mterm\u001b[39m \u001b[93m=\u001b[39m \u001b[31mnew\u001b[39m \u001b[37mTerminal\u001b[39m\u001b[90m(\u001b[39m\u001b[37mcols\u001b[39m\u001b[32m,\u001b[39m \u001b[37mrows\u001b[39m\u001b[32m,\u001b[39m \u001b[37mhandler\u001b[39m\u001b[90m)\u001b[39m\u001b[90m;\u001b[39m',
+      //        '  \u001b[37mterm\u001b[39m\u001b[32m.\u001b[39m\u001b[37mopen\u001b[39m\u001b[90m(\u001b[39m\u001b[90m)\u001b[39m\u001b[90m;\u001b[39m',
+      //        '  ',
+      //        '  \u001b[32mvar\u001b[39m \u001b[37mhypernal\u001b[39m \u001b[93m=\u001b[39m \u001b[37mthrough\u001b[39m\u001b[90m(\u001b[39m\u001b[37mterm\u001b[39m\u001b[32m.\u001b[39m\u001b[37mwrite\u001b[39m\u001b[32m.\u001b[39m\u001b[37mbind\u001b[39m\u001b[90m(\u001b[39m\u001b[37mterm\u001b[39m\u001b[90m)\u001b[39m\u001b[90m)\u001b[39m\u001b[90m;\u001b[39m',
+      //        '  \u001b[37mhypernal\u001b[39m\u001b[32m.\u001b[39m\u001b[37mappendTo\u001b[39m \u001b[93m=\u001b[39m \u001b[94mfunction\u001b[39m \u001b[90m(\u001b[39m\u001b[37melem\u001b[39m\u001b[90m)\u001b[39m \u001b[33m{\u001b[39m',
+      //        '    \u001b[94mif\u001b[39m \u001b[90m(\u001b[39m\u001b[94mtypeof\u001b[39m \u001b[37melem\u001b[39m \u001b[93m===\u001b[39m \u001b[92m\'string\'\u001b[39m\u001b[90m)\u001b[39m \u001b[37melem\u001b[39m \u001b[93m=\u001b[39m \u001b[37mdocument\u001b[39m\u001b[32m.\u001b[39m\u001b[37mquerySelector\u001b[39m\u001b[90m(\u001b[39m\u001b[37melem\u001b[39m\u001b[90m)\u001b[39m\u001b[90m;\u001b[39m',
+      //        '',
+      //        '    \u001b[37melem\u001b[39m\u001b[32m.\u001b[39m\u001b[37mappendChild\u001b[39m\u001b[90m(\u001b[39m\u001b[37mterm\u001b[39m\u001b[32m.\u001b[39m\u001b[37melement\u001b[39m\u001b[90m)\u001b[39m\u001b[90m;\u001b[39m',
+      //        '    \u001b[37mterm\u001b[39m\u001b[32m.\u001b[39m\u001b[37melement\u001b[39m\u001b[32m.\u001b[39m\u001b[37mstyle\u001b[39m\u001b[32m.\u001b[39m\u001b[37mposition\u001b[39m \u001b[93m=\u001b[39m \u001b[92m\'relative\'\u001b[39m\u001b[90m;\u001b[39m',
+      //        '  \u001b[33m}\u001b[39m\u001b[90m;\u001b[39m',
+      //        '',
+      //        '  \u001b[37mhypernal\u001b[39m\u001b[32m.\u001b[39m\u001b[37mwriteln\u001b[39m \u001b[93m=\u001b[39m \u001b[94mfunction\u001b[39m \u001b[90m(\u001b[39m\u001b[37mline\u001b[39m\u001b[90m)\u001b[39m \u001b[33m{\u001b[39m',
+      //        '    \u001b[37mterm\u001b[39m\u001b[32m.\u001b[39m\u001b[37mwriteln\u001b[39m\u001b[90m(\u001b[39m\u001b[37mline\u001b[39m\u001b[90m)\u001b[39m\u001b[90m;\u001b[39m',
+      //        '  \u001b[33m}\u001b[39m\u001b[90m;\u001b[39m',
+      //        '',
+      //        '  \u001b[37mhypernal\u001b[39m\u001b[32m.\u001b[39m\u001b[37mwrite\u001b[39m \u001b[93m=\u001b[39m \u001b[37mterm\u001b[39m\u001b[32m.\u001b[39m\u001b[37mwrite\u001b[39m\u001b[32m.\u001b[39m\u001b[37mbind\u001b[39m\u001b[90m(\u001b[39m\u001b[37mterm\u001b[39m\u001b[90m)\u001b[39m\u001b[90m;\u001b[39m',
+      //        '',
+      //        '  \u001b[31mreturn\u001b[39m \u001b[37mhypernal\u001b[39m\u001b[90m;\u001b[39m',
+      //        '\u001b[33m}\u001b[39m\u001b[90m;\u001b[39m',
+      //        ''
+      //      ].forEach(function (line){ xterm.write(line + '\r\n'); });
 
+      xterm.write('\033[1;4;7;41;36m红底绿字\033[0m');
       console.log(xterm.toString('html'));
     </script>
   </body>
diff --git a/static/js/terminal/xterm.js b/static/js/terminal/xterm.js
index 6db2f4d..64d6a79 100644
--- a/static/js/terminal/xterm.js
+++ b/static/js/terminal/xterm.js
@@ -1042,6 +1042,7 @@ AnsiTerminal.prototype.toString = function (type){
         cell = this.screen.buffer[i].cells[j];
 
         if (cell.c) {
+          console.log(cell.c, ': ', cell.getAttributes());
           console.log(cell.c, ': ', getStyles(cell.attr, cell.gb, cell.width === 2));
         }
       }
@@ -2608,17 +2609,84 @@ var MAP = (function (){
   return m;
 }());
 
+TChar.prototype.getAttributes = function (){
+  var gb = this.gb;
+  var attr = this.attr;
+  var colorbits = attr >>> 24;
+  var r = attr & 65535;
+  var g = gb >>> 16;
+  var b = gb & 65535;
+  var bits = attr >>> 16 & 255;
+  var styles = {
+    bold: !!(bits & 1),
+    italic: !!(bits & 2),
+    underline: !!(bits & 4),
+    blink: !!(bits & 8),
+    inverse: !!(bits & 16),
+    conceal: !!(bits & 32),
+    // TODO cursor
+    // cursor: !!(bits & 64),
+    foreground: {
+      set: !!(colorbits & 4),
+      RGB: !!(colorbits & 8)
+    },
+    background: {
+      set: !!(colorbits & 1),
+      RGB: !!(colorbits & 2)
+    }
+  };
+  var foreground = styles.foreground;
+  var background = styles.background;
+
+  if (foreground.set && !foreground.RGB) {
+    if (styles.inverse) {
+      if (styles.bold) {
+        console.log('bg: ', (attr >>> 8 & 255) | 8);
+      } else {
+        console.log('fg: ', attr >>> 8 & 255);
+      }
+    }
+  }
+
+  if (background.set && !background.RGB) {
+    if (styles.inverse) {
+      console.log('fg: ', this.attr & 255);
+    }
+  }
+
+  return {
+    bold: !!(bits & 1),
+    italic: !!(bits & 2),
+    underline: !!(bits & 4),
+    blink: !!(bits & 8),
+    inverse: !!(bits & 16),
+    conceal: !!(bits & 32),
+    // TODO cursor
+    // cursor: !!(bits & 64),
+    foreground: {
+      set: !!(colorbits & 4),
+      RGB: !!(colorbits & 8),
+      color: [r >>> 8, g >>> 8, b >>> 8]
+    },
+    background: {
+      set: !!(colorbits & 1),
+      RGB: !!(colorbits & 2),
+      color: [r & 255, g & 255, b & 255]
+    }
+  }
+};
+
 // FIXME: cleanup this ugly mess
 function getStyles(num, gb, fullwidth){
   var fg_rgb = num & 67108864 && num & 134217728;
   var bg_rgb = num & 16777216 && num & 33554432;
   // if (not RGB) and (fg set) and (bold set) and (fg < 8)
   var inverse = num & 1048576;
-  var intense_on_bold = (!fg_rgb && num & 67108864 && num & 65536 && (num >>> 8 & 255) < 8) ? 1 : 0;
+  var bold = (!fg_rgb && num & 67108864 && num & 65536 && (num >>> 8 & 255) < 8) ? 1 : 0;
   var styles = [
     MAP[num >>> 16 & 127]
     + ((num & 67108864 && !fg_rgb)
-      ? ((inverse) ? ' bg' : ' fg') + ((intense_on_bold) ? (num >>> 8 & 255) | 8 : num >>> 8 & 255)
+      ? ((inverse) ? ' bg' : ' fg') + ((bold) ? (num >>> 8 & 255) | 8 : num >>> 8 & 255)
       : '')
     + ((num & 16777216 && !bg_rgb) ? ((inverse) ? ' fg' : ' bg') + (num & 255) : '')
   ];