I use a Video to ASCII script in JavaScript, but problem is when i use simple JavaScript string for output it works perfectly and ASCII video play smoothly in gray scale. see here i use simple JavaScript string without HTML code.

 str += this.getChar(val)

but when i try to play ASCII video in color mode and use HTML Style tag with color RGB then it play ASCII video output in full RGB color but ASCII Video is frame are skipping and not playing smoothly. i think it is maybe due to processor slow to render HTML code in each ASCII line. See here i use HTML code with JavaScript string.

str += `<font style="color: rgb(${r}, ${g}, ${b})">${this.getChar(val)}</font>`;

or use this

str += "<span style=\"color: rgb("+r+","+g+","+b+"); \">"+ this.getChar(val) +"</span>";

Anyone suggest a solution to play ASCII Video smoothly in full Color mode. your help will be appreciated.

for your reference Here is the some piece of ASCII to Video script code.

      getChar: function (val) {
    return this.asciiChars[parseInt(val * this.asciiLength, 10)];
  },

      getAsciiString: function () {
var len = this.width * this.height,
  d = this.imageData,
  str = '',
  row = 0;

for (var currentPixel = 0; currentPixel < len; currentPixel++) {
  if (
    currentPixel % this.width === 0 &&
    currentPixel != 0
  ) {
    str += '\n';
    row++;
  }
  var r = d[currentPixel * 4];
  var g = d[(currentPixel * 4) + 1];
  var b = d[(currentPixel * 4) + 2];
  val = ~~(r * 0.299 + g * 0.587 + b * 0.114 ) / 256;


// this simple string code play ASCII video smoothly but in gray scale

str += this.getChar(val)


// and when i use any of this HTML code, Output ASCII video is in full color but jerking, skipping frames, not play smoothly :( , currently i add // before both HTML codes because above i was using simple string.

// str += `<font style="color: rgb(${r}, ${g}, ${b})">${this.getChar(val)}</font>`;

// str += "<span style=\"color: rgb("+r+","+g+","+b+"); \">"+ this.getChar(val) +"</span>";

    }

    return str;

  }

}