diff --git a/canvas.html b/canvas.html
index d01295d..f14e38f 100644
--- a/canvas.html
+++ b/canvas.html
@@ -95,7 +95,7 @@
       //      ].forEach(function (line){ xterm.write(line + '\r\n'); });
 
       xterm.write('\033[1;4;7;41;36m红底绿字\033[0m');
-      console.log(xterm.toString('html'));
+      xterm.toString('html');
     </script>
   </body>
 </html>
\ No newline at end of file
diff --git a/static/js/terminal/xterm.js b/static/js/terminal/xterm.js
index baaf149..72c2927 100644
--- a/static/js/terminal/xterm.js
+++ b/static/js/terminal/xterm.js
@@ -1037,8 +1037,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));
+          console.log(cell.c, ': ', styles(cell), getStyles(cell.attr, cell.gb, cell.width === 2));
         }
       }
     }
@@ -2604,73 +2603,6 @@ 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;
@@ -2717,3 +2649,36 @@ function getStyles(num, gb, fullwidth){
 
   return styles;
 }
+
+function styles(node){
+  var styles = {};
+  var attr = node.attr;
+  var attributes = node.getAttributes();
+  var foreground = attributes.foreground;
+  var background = attributes.background;
+
+  [
+    'bold', 'italic', 'underline',
+    'blink', 'inverse', 'conceal'
+  ].forEach(function (key){
+    styles[key] = attributes[key];
+  });
+
+  if (foreground.set && !foreground.RGB) {
+    if (attributes.inverse) {
+      if (attributes.bold) {
+        styles.background = (attr >>> 8 & 255) | 8;
+      } else {
+        styles.foreground = attr >>> 8 & 255;
+      }
+    }
+  }
+
+  if (background.set && !background.RGB) {
+    if (attributes.inverse) {
+      styles.foreground = attr & 255;
+    }
+  }
+
+  return styles;
+}