Very laggy animation in javascript

There's a lot of optimization that can be done here. I'll point out a couple.

Starting with the animate function, the first thing I notice is that you're running a bit of code every 10ms. Why don't we check out what's being run?

function animate() { var string = "აბგდევზთიკლმნოპჟრსტუფქღყშჩცძწჭხჯჰ ტესტ ტესტ აი ემ ე თეიბლ ტექსტი იწერება აქ"; //string to animate position = 150; //initial position of string window.setInterval(function () { clearLine(0); drawOnBoard(string, position, 0); position = position - 1; }, 10); } 

Clearline is the first function.

function clearLine(n){ for(var i=n*symbolHeight*lineWidth+n*lineWidth;i<(n+1)*symbolHeight*lineWidth+n*lineWidth;i++) leds[i].style.backgroundColor="black"; } 

That's a bit of a mess in the for loop. My understanding is that non-compiled code will run all of that math for every single iteration. So let's move it out of the for loop.

function clearLine(n) { var initial = n * symbolHeight * lineWidth + n * lineWidth; var length = (n + 1) * symbolHeight * lineWidth + n * lineWidth; for (var i = initial; i < length; i++) leds[i].style.backgroundColor = "black"; } 

Ah but there's still more to be done. I see that both equations have a lot of shared math.

function clearLine(n) { var whateverThisIs = symbolHeight * lineWidth + n * lineWidth; var initial = n * whateverThisIs; var length = (n + 1) * whateverThisIs; for (var i = initial; i < length; i++) leds[i].style.backgroundColor = "black"; } 

I saw that you're moving on so I'll stop working on this for now. There's still plenty more to optimize.

Here's a fiddle of the updated version.