HTML5 Canvas, Text and JavaScript

Question

I have a script that writes text on a canvas. It works fine. The problem is if I make an Ajax call to first get the string and then secondly write the string to the canvas, JavaScript seems to ignore the order that I want things done and write the string before the Ajax call; the result is the script prints to the canvas '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);

Erick Petrucelli · Accepted Answer · 2011-05-28 00:51:32Z

1

Ajax is assync, so your code below the ajax call runs before the response from the server. You need to run your code only when the HTTP Response is received.

With jQuery, it would be something like this:

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

answered May 28, 2011 at 0:51

Erick Petrucelli

15.1k9 gold badges68 silver badges89 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Demian Brecht · Accepted Answer · 2011-05-28 00:50:09Z

0

As ajax calls are asynchronous, you'll have to put your printing logic in the success callback of the ajax op.

For example:

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/

answered May 28, 2011 at 0:50

Demian Brecht

21.4k5 gold badges45 silver badges47 bronze badges

Collectives™ on Stack Overflow

HTML5 Canvas, Text and JavaScript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related