Forums » Help » Canvas Text vs Impact Font

Would I be correct in presuming that the reason to use impact.font rather than the HTML5 canvas's text rendering is because of a performance hit when using canvas's text rendering?

I've been playing around with using .fillText and so forth and it is really rather nice. Maybe more useful for title screens and in-between levels rather than in a complex level scene?

If anyone hasn't tried using native canvas HTML5 text rendering with Impact, here is a snippet to try:

In your main.js file:

MyGame = ig.Game.extend({
...
...
	draw: function() {
		// Draw all entities and backgroundMaps
		this.parent();

                ig.system.context.fillStyle = 'white';
                ig.system.context.font = 'italic 22px sans-serif';
                ig.system.context.textBaseline = 'top';
                ig.system.context.fillText ('Hello canvas!', 0, 0);
                ig.system.context.font         = 'bold 30px sans-serif';
                ig.system.context.strokeText('Hello world!', 0, 50);
...
            }

( modified from an article on dev.opera.com)

I choose to use canvas fonts for my in-between level screen and it seems to work just fine. I was too lazy to create a font image so I created a little function to help me instead. :)

scribe: function(txt,style,x,y){
		var ctx = ig.system.context;
 
		switch(style){
			case 'h1':
				ctx.fillStyle  = '#fff';
				ctx.font = '20px Sans-Serif';			
			break;
			case 'h2':
				ctx.fillStyle  = '#fff';
				ctx.font = '15px Sans-Serif';
			break;
			case 'p':
				ctx.fillStyle  = '#fff';
				ctx.font = '12px Sans-Serif';
			break;
		}
		
		ctx.textAlign = 'center';
		ctx.fillText  (txt, x, y);
	}

Quote from MikeL
Would I be correct in presuming that the reason to use impact.font rather than the HTML5 canvas's text rendering is because of a performance hit when using canvas's text rendering?

I actually never compared the performance of both methods. ig.Text uses bitmap fonts for two reasons: 1) at the time I wrote this class some browsers (Opera) didn't support the canvas text API and 2) I like pixel fonts :)

I'll probably add a mode for ig.Text that uses the native text rendering methods instead of bitmap fonts.

As to Dominics second point about liking pixel fonts, would I be wrong to assume that we could just use css3 embedded fonts and that any browser that would be able to run a canvas game could render the fonts fine?

Aliasing. The @font-face does work, but you'll need to use the blow css too. Downside is it's only Safari and Chrome that support it, and even then, only the latest versions.

-webkit-font-smoothing:antialiased;

Hei, I tried to use Canvas text, a simple string here in draw function:

this.ctx = ig.system.context;
this.ctx.font = "20pt Calibri";
this.ctx.fillStyle = "#ff0000";
this.ctx.fillText("health: " + (this.health), 20, 30);

It works in all modern browsers, but the performance becomes a real issue.

Are there more effective ways of using canvas text?

Well, I performance issue report seems to be premature. There were other reasons.

The issue I have, however, is that the labels both those using Canvas text and Impact font are on the background level, meaning that the text 'hides' behind the front structures (tiles) of the game when scrolling. Any ideas how it can be fixed? Thank you!

Ok, sorry, figured the last one as well. The code for Canvas txt was supposed to go in main.js

Simply draw the text after you draw everything else. E.g. if you're drawing the text in your Game's draw() method:

draw: function() {
	this.parent(); // draw the background maps and entities first!
	this.font.draw( 'test', x, y ); // then the text
}

I tried to draw the font after everything else, but I was drawing another entity on top of the one with text. It was partially transparent so I could see that no matter what I did it was always covered.

In the end I just had to pass info to the top entity and have that entity do the font drawing. It makes sense though, because each Entity is like a group or Sprite if coming from Flash.

do you need to add any "require" or include any library to use the ig.system.context? thanks