Question

I’ve made a beginning of a script to achieve the “matrix effect” (to use in the background) in JavaScript. I used the Canvas element, but for some reason its kinda slow but i don’t know why.

Matrix effect: Those (green) text lines which are scrolling from top to bottom.

script:
http://dominiquedebrabander.nl/matrix/matrix.js

i’ve linked the script, ’cause its to long for this textarea. I hope you guys know why, or have some tips.

greetings, Dominique

Answer 1

• Why are you calling clearRect if you are just gonna fill it with black? Remove that call
• Don’t set the font over and over if it never changes, just set it once at the start.
• drawing text is slow, see my post here. Consider painting every letter to a second invisible canvas and using drawImage to draw parts of that canvas to your real canvas

If you really want it to be done the way you are doing it now it will be much faster if you draw everything to a large offscreen canvas and you just draw that single canvas over and over, but then you wouldn’t be able to have the letters fall at different speeds from each other. And it would look more matrix-like if you did that, say put the y at += Math.random()*4.5 (or so) instead of 0.5