Languages

Menu
Sites
Language
gear2 fonts

can not change font when using the emulator?  font size changes but font always the same?

 

   canvas = document.getElementById("fg");
    context = canvas.getContext("2d");
    
    canvas.width = document.width;
    canvas.height = canvas.width;

    context.font = "32px Arial";
    //context.fillStyle = "ff0000";
    context.fillText("Hello!",5,150);
    context.font = '32px Verdana';
    console.log(context.font);
    context.fillText("Hello!",5,100);
    context.font = '32px Helvetica';
    context.fillText("Hello!",5,200);
    console.log(context.font);
    context.restore();

 

List

Responses

6 Replies
Thijs Mergaert

Hi,

I believe the emulator only has the fonts TizenSans Regular and TizenSans Medium.

You can, however, add other fonts in your application and the @font-face.

Sincerely yours,

Thijs Mergaert

Thijs Mergaert

That was supposed to read 'and use @font-face'.

me

hi, sort of got it working with

 

   context.fillStyle = "ff0000";
       context.font = "40px ttffont";
    context.fillText("Hello!",10,100);
    context.restore

 

with

@font-face {
    font-family: 'ttffont';
    src: url(../css/fonts/ttffont.ttf);

in ccs file

but the font only gets changed if I add a loop, the font does not get changed the first time used?

Thijs Mergaert

Hi,

Glad to hear you're seeing progress.  Could you share perhaps a bit more of your code?  An example of what is working and what is not?

Thijs

me

hi,

not sure if this is a bug or more likely something I am doing wrong...

it appears there is a small delay before the emulator loads a custom font?

when I first display some text with a custom font it does not use the font.

if I use the font, then use a small delay, then the font will work next time I use it in main()

 

      context.font = "40px ttffont";
      context.fillText("test",10,10);

      setTimeout(function () {main();},10);

Thijs Mergaert

Hi,

With HTML5/JavaScript/CSS, things are loaded asynchronously.  If it's not already there, I'd recommend moving your code to the window.onload callback, e.g.

function drawText() {
    context.font = "40px ttffont";
    context.fillText("test", 10, 10);
}

window.onload = drawText;