Scrolling text top to bottom in HTML5

The Following example demonstrates how to marque text right to left on the canvas in HTML5. The example uses the save(), translate() and restore() methods to animate the text.

  <html>
<head>
    <title>Text Animation</title>
    <style>
        canvas{border: 1px solid #bbb;}
        .subdiv{width: 320px;}
        .text{margin: auto; width: 290px;}
    </style>
 
    <script type="text/javascript">
        var can, ctx, step, steps = 0,
              delay = 20;
 
        function init() {
            can = document.getElementById("MyCanvas1");
            ctx = can.getContext("2d");
            ctx.fillStyle = "blue";
            ctx.font = "20pt Verdana";
            ctx.textAlign = "center";
            ctx.textBaseline = "middle";
            step = 0;
            steps = can.height + 50;
            RunTextRightToLeft();
        }
 
        function RunTextRightToLeft() {
            step++;
            ctx.clearRect(0, 0, can.width, can.height);
            ctx.save();
            ctx.translate(can.width / 2, step);
            ctx.fillText("Welcome", 0, 0);
            ctx.restore();
            if (step == steps)
                step = 0;
            if (step < steps)
                var t = setTimeout('RunTextRightToLeft()', delay);
        }
 
    </script>
 
</head>
<body onload="init();">
    <div class="subdiv">
        <canvas id="MyCanvas1" width="300" height="200">
  This browser or document mode doesn't support canvas object</canvas>
        <p class="text">
            Example- Marquee Text(top to bottom)- scrolling text
        </p>
    </div>
</body>
</html><!--more-->