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>
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
The highlight text doesn’t move continously. It comes once and stops. How to repeat the action small to big
First line of RunTextLeftToRight() function states “step–;”. Should it be “step–;”? Thanks
Yes. this is step–;
Thanks.