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>
  • Tobba Secnir

    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

  • Tobba Secnir

    ahh
    i can’t insert scrolling text in html5 in disqus comment…

    • What are you trying to do? Do you want any help?

      • Tobba Secnir

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