I am new to html5 development could anyone tell me how to make text to move one side to other horizontally inside canvas..
Here's an example of how to animate text back and forth across the screen:
<html>
<head>
<title>HTML 5 Animated Text</title>
<script src=https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js></script>
<script type=text/javascript>
var context;
var text = ;
var textDirection =;
$(function()
{
context = document.getElementById(cvs).getContext(2d);
setInterval(animate(), 30);
textDirection =right;
textXpos = 5;
text = Animation!;
});
function animate() {
// Clear screen
context.clearRect(0, 0, 500, 500);
context.globalAlpha = 1;
context.fillStyle = '#fff';
context.fillRect(0, 0, 500, 500);
var metrics = context.measureText(text);
var textWidth = metrics.width;
if (textDirection == right) {
textXpos += 10;
if (textXpos > 500 - textWidth) {
textDirection = left;
}
}
else {
textXpos -= 10;
if (textXpos < 10) {
textDirection = right;
}
}
context.font = '20px _sans';
context.fillStyle = '#FF0000';
context.textBaseline = 'top';
context.fillText ( text, textXpos, 180);
}
</script>
</head>
<body>
<div id=page>
<canvas id=cvs width=500 height=500>
Your browser does not support the HTML 5 Canvas.
</canvas>
</div>
</body>
</html>
In action: http://jsfiddle.net/bS79G/
