diff --git a/canvas.html b/canvas.html
index 3d1716a..50934d7 100644
--- a/canvas.html
+++ b/canvas.html
@@ -68,6 +68,8 @@
console.log('C + a: ', C + a);
console.log('Ca: ', context.measureText('Ca').width);
+ canvas.style.backgroundColor = 'transparent';
+
var xterm = new AnsiTerminal(120, 80, 0);
xterm.debug = false;
@@ -89,7 +91,7 @@
write();
var canvasXTerm = new CanvasXTerm();
-
+
canvasXTerm.draw(xterm.stylesBuffer);
console.log(canvasXTerm.canvas);
diff --git a/static/js/components/app-main/canvas-xterm.js b/static/js/components/app-main/canvas-xterm.js
index 28efc75..040a093 100644
--- a/static/js/components/app-main/canvas-xterm.js
+++ b/static/js/components/app-main/canvas-xterm.js
@@ -15,7 +15,7 @@ function textRepeat(text, n){
function CanvasXTerm(font){
this.font = font || { family: 'Consolas', lineHeight: 20, size: 13, color: '#fff' };
this.canvas = document.createElement('canvas');
- this.canvas.backgroundAlpha = 0;
+ this.canvas.style.backgroundColor = 'transparent';
this.brush = this.canvas.getContext('2d');
this.brush.font = this.font + ' ' + this.fontSize;
this.brush.fillStyle = this.font.color;
@@ -23,8 +23,11 @@ function CanvasXTerm(font){
CanvasXTerm.prototype = {
draw: function (screen){
+ var text = '';
+ var i, j, x, y, attrCache;
var rows = screen.length;
var cols = rows ? screen[0].length : 0;
+ var baseY = (this.font.lineHeight + this.font.size) / 2;
if (!this.rows || !this.cols || this.rows !== rows || this.cols !== cols) {
this.rows = rows;
@@ -39,6 +42,15 @@ CanvasXTerm.prototype = {
this.canvas.height = rows * this.font.lineHeight;
}
+
+ for (i = 0; i < rows; i++) {
+ x = 0;
+ y = i * 20 + baseY;
+
+ for (j = 0; j < rows; j++) {
+
+ }
+ }
},
measureWidth: function (text, styles){
this.brush.save();
diff --git a/static/js/terminal/index.js b/static/js/terminal/index.js
index b8dcff5..f2a70a5 100644
--- a/static/js/terminal/index.js
+++ b/static/js/terminal/index.js
@@ -1032,8 +1032,8 @@ AnsiTerminal.prototype.toString = function (type){
if (type === 'html') {
var line = '';
var style = '';
- var styleBuffer;
var attrCache;
+ var styleBuffer;
var stylesBuffer = this.stylesBuffer || [];
stylesBuffer = stylesBuffer.slice(0, rows);