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


    <title>Text Animation</title>
        canvas{border: 1px solid #bbb;}
        .subdiv{width: 320px;}
        .text{margin: auto; width: 290px;}
    <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;
        function RunTextLeftToRight() {
            step- -;
            ctx.clearRect(0, 0, can.width, can.height);
            ctx.translate(step, can.height / 2);
            ctx.fillText("Welcome", 0, 0);
            if (step == steps)
                step = 320;
            if (step > steps)
                var t = setTimeout('RunTextLeftToRight()', delay);
<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

5 thoughts on “Scrolling text right to left in HTML5”

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

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

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

Comments are closed.