How to update 2D context texts?

[lpbr]

Hi, fellows!

 

This is my first post here so pleas be gentle with me!

 

 

Maybe it will be a silly question but I have googled after a solution and couldn't find. I am struggling with the need of update text,

As you know it is a very usual thing in scoreboard and message games but I am not managing how to do that.

 

I am applying the text in the usual way:

    c = document.getElementById("MyGame"),    context = c.getContext("2d");    context.font = "Bold 12px Verdana";    context.textAlign = "center";    context.fillText("some text", 100, 100);

But I am sure that this is not the correct way to do that. I tried to nest divs into the main one and also looked for a way to use components (such as labels), but had no luck.

 

Any tip?

 

Thanks!

 

 

 

[harrywatson]

Here are three resources I found.

The You Tube video contains information

on updating a score.

 

Hope it helps.

 

http://corehtml5canvas.com/code-live/

 

http://www.html5canvastutorials.com/cookbook/#ch1

 

[lpbr]

Thank you Harry for the links, but really not what I am after.

 

All the texts examples are about make fancy text but no one of them show how to create a text that may be dynamically changed. I am starting to think that it may not be done?

 

About JCreate, yeah, it is a GREAT stuff and I already have worked with it in the past. Unfortunately I am working right now on a project that came half done to my hands and the customer wants it in pure JS so I am not allowed to use 3rd party packages.

 

 

Anyway, at the end I found a workaround for the problem. As I supposed (sorry if I look stupid, but there is a lot of time I don't do HTML5) the fillText method just 'paints' over the canvas, then that's why it cannot be edited. My bad not to have noticed it before.

 

To fix the issue, and since I cannot use JCreate and other awesome packages, I just adjusted the game screen by stacking divs and putting the texts within them. Maybe not the ideal solution but it worked fine.

 

[PAEz]

If your using the canvas then chances are that your going to be redrawing it every frame anywayz, so you need to reprint your text every frame anywayz.

I guess you'd just have an object that stores what text/where/how and every frame you just draw what ever is there.  Then you can just change what ever is there.

Overlaying it with divs might seem like a good idea, but (without any tests) Id say its a bad idea. You might make it easier for you to do updates or whatever, but Id be surprised if it was the most efficient way of doing it.  Itll prolly cause repaints and what not (you could avoid most of that tho if you do all of your updates in a requestFrame) and from what Ive seen canvas works best when its the only thing on the page.

 

OH, and third party packages are written in pure JS aswell