Дивна поведінка context.fillText () в HTML5/Canvas

У мене невелика проблема з функцією context.fillText ().

Коли я називаю цю функцію, вона не малює текст, якщо я не називаю її після запуску "mainloop". Всі функції context.fillRect (), викликані в одній і тій же функції, чудово працюють.

Here is my code. I write a couple of comment to highlight where it works or doesn't work.

var pause = true;

function draw() {
    if ( !pause ) {
        redraw_everything();
    }
    else {
        draw_popup();//WORKAROUND
    }
}

function draw_popup ( text ) {
    ctx.fillStyle = 'red';
    ctx.fillRect ( _x, _y, _w, _h );
    ctx.fillStyle = 'black';
    ctx.fillRect ( _in_x, _in_y, _in_w, _in_h );

    ctx.font = theight + "pt Orbitron";
    twidth = ctx.measureText ( text ).width;

    ctx.fillStyle = 'red';
    ctx.fillText ( text, _tx, _ty );  /** Draw the text */
    ctx.restore();
}

function init() {
    canvas = document.getElementById ( 'tutorial' );
    ctx = canvas.getContext ( '2d' );

    pause = false;
    draw();
    pause = true;
    setInterval ( 'draw()', 20 );
    draw_popup ( 'PacMan' );//DOESN'T WORK

    tutorial = document.getElementsByTagName( 'body' )[ 0 ];
    tutorial.onkeypress = function ( e ) {
        var c = String.fromCharCode( e.charCode ).toLowerCase();
        if ( c == 'p' ) {
             draw_popup ( 'Pause' );//IT WORKS
        }
    }
}

You can find the full source code here

UPDATE: As requested, I made a shorter example (not tested).

1
Виконано. Сподіваюся, досить короткий і досить зрозумілий
додано Автор Andrea Carron, джерело
Я знайшов проблему. Я використовую шрифт з колекції Google Webfont. Перший раз, коли я використовую його, шрифт ще не завантажений, тому він не пише. Наступні запити мають завантажений шрифт, тому я працюю
додано Автор Andrea Carron, джерело
Чи можете ви виділити проблему на короткий приклад?
додано Автор Jonas, джерело
@AndreaCarron: ви повинні розмістити це як відповідь, я думаю, так що питання не з'явиться без відповіді.
додано Автор Nickolay, джерело

1 Відповіді

Я знайшов проблему. Я використовую шрифт з колекції Google Webfont. Перший раз, коли я використовую його, шрифт ще не завантажений, тому він не пише. Наступні запити мають завантажений шрифт, тому я працюю

0
додано