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);