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>

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

  1. Text Animation

    canvas{border: 1px solid #bbb;}
    .subdiv{width: 320px;}
    .text{margin: auto; width: 290px;}

    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);
    }

    This browser or document mode doesn’t support canvas object

    Example 1 – Marquee Text left to right – scrolling text

      1. hello Sisodiya
        i just want make a comment like the old html code: . as i see i can’t do it…

Comments are closed.