Html5 canvas: Draw up and down floating Fonts

The main idea of drawing up and down float fonts is to first draw the desired font, clear the canvas at a certain time, and then change the font position and draw it in such a loop.

(Function (window ){
Var flowLogo = function (logo, x, font ){
This. logo = logo;
This. x = x;
This. font = font | "25px Verdana ";
}
FlowLogo. prototype. flow = function (start, min, max, increment, time, container ){
Var logo = this. logo;
Container. font = this. font;
Var x = this. x;
Var logoWidth = container. measureText (logo). width;
Container. strokeStyle = "white ";
Var forward = true;
Var changeInterval = setInterval (function (){
Container. clearRect (x, 0, logoWidth, max + 10 );
Container. strokeText (logo, x, start, logoWidth, 20 );
If (forward ){
Start + = increment;
} Else {
Start-= increment;
}
If (start <min | start> max ){
Forward =! Forward;
}
}, Time );
Storage. changeInterval = changeInterval;
}
Window. flowLogo = flowLogo;
}) (Window );

Usage:

Var logo = new flowLogo (text, left );
Logo. flow (40, 40, 60, 2,150, t );