Scrolling text right to left in HTML5

The Following example gives you an idea to scrolling the text on the canvas in HTML 5. The example uses the save(), translate() and restore() methods to animate the text.

See the Demo here

 

  <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 = 320;
            steps = 0;
            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 = 320;
            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 right to left– scrolling text
        </p>
    </div>
</body>
</html>
  • ano

    this code does a top to bottom for me..Please help with the correct code to move it righ to left.

    • I have corrected the above code. Now you can use the code for moving text right to left.

      Thanks

  • Yvel Javel

    The highlight text doesn’t move continously. It comes once and stops. How to repeat the action small to big

  • sacio

    First line of RunTextLeftToRight() function states “step–;”. Should it be “step–;”? Thanks