HTML5 Canvas, текст и JavaScript

Question

У меня есть скрипт, который пишет текст на холсте.Работает нормально.Проблема в том, что если я сделаю Ajax-вызов, чтобы сначала получить строку, а затем, во-вторых, записать строку на холст, JavaScript, кажется, игнорирует порядок, в котором я хочу, чтобы все было сделано, и записал строку перед вызовом Ajax;В результате скрипт печатает на холст «undefined».

psuedocode:

//var str = ~some_ajax_call...  <---If I use this, the output is undefined.
var str = "hello world";

context.fillStyle    = '#00f';
context.font         = 'italic 30px sans-serif';
context.textBaseline = 'top';
context.fillText  (str, 0, 0);

Answer 1

Ajax - assync, поэтому ваш код под вызовом ajax запускается до ответа от сервера. Вы должны запускать свой код только при получении ответа HTTP.

С jQuery это будет примерно так:

$.ajax({
  url: "sample.php",
  success: function(d) {
    context.fillStyle    = '#00f';
    context.font         = 'italic 30px sans-serif';
    context.textBaseline = 'top';
    context.fillText  (d, 0, 0);
});

Answer 2

Поскольку вызовы ajax асинхронны, вам придется поместить свою логику печати в обратный вызов success операции ajax.

Например:

var str = "hello world";

$.ajax({
    url: '/echo/json/',
    success: function(data){
        var context = document.getElementById('c').getContext('2d');
        context.fillStyle    = '#00f';
        context.font         = 'italic 30px sans-serif';
        context.textBaseline = 'top';
        context.fillText  (str, 0, 0);
    }
});

http://jsfiddle.net/BhENZ/