How do i change a text with code?

[newbee]

Hello.

 

I'm new with HTML5 Canvas. Currently I'm making an idle game which there is a number that always increasing (like a score). If I make a text in canvas with fillText, what code I should write to change the value of it every x time? In normal javascript, I can do something like this:

 

 

<div id="score"></div>

 

<script>

var scoretext = document.getElementById("score");

var score = 0;

 

setInterval(

function score(){

score += 1;

scoretext.innerHTML = score;

}

,1000);

</script>

 

But i'm very confused to do same thing in HTML5 Canvas. Anyone have solution?

 

Thanks for your reply.

[newbee]

Well, finally i did it. I just add ctx.clearRect before fillText function and setInterval for it and increase function.

[mattstyles]

You've implemented a basic render loop which is what most games are built on top of.

 

In your case you re-render everything every 1 second, so long as your rendering (drawing) code can execute faster than 1s then everything is good.

 

If you need to step it up then consider using requestAnimationFrame which is a better timing method and usually works at a timing of about 60 frames per second, roughly 16.6 milliseconds. This is the usual screen refresh rate which helps to keep your animations smooth, in your case (currently), it doesnt sound like you have animations but when you do it will become useful.