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