Scrolling text left to right in HTML5

 
The Following example demonstrates how to scroll the text left to right on the canvas in HTML5. The example does not use any CSS for marquee text. Try the example:
 

 <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.width + 50;
            RunTextLeftToRight();
        }
 
        function RunTextLeftToRight() {
            step++;
            ctx.clearRect(0, 0, can.width, can.height);
            ctx.save();
            ctx.translate(step, can.height / 2);
            ctx.fillText("Welcome", 0, 0);
            ctx.restore();
            if (step == steps)
                step = 0;
            if (step < steps)
                var t = setTimeout('RunTextLeftToRight()', 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 1 - Marquee Text left to right - scrolling text
        </p>
    </div>
</body>
</html>