CODEWITHSUNDEEP
kineticjs
user2039101
user2039101

Reputation:

text on image kineticJS

i have a problem, if it is possible to put text on the image.

this is easy example how it should be, but text does not appear.

  var canvas = document.getElementById('myCanvas');
  var context = canvas.getContext('2d');
  var x =  0;
  var y = 0;
  var width = 500;
  var height = 500;
  var imageObj = new Image();

  imageObj.onload = function() {
    context.drawImage(imageObj, x, y, width, height);
  };
  imageObj.src = 'http://blaaah';

  context.fillStyle = 'white';

  context.fillText('Hello World!', 150, 100);

Upvotes: 1

Views: 867

Answers (2)

SoluableNonagon
SoluableNonagon

Reputation: 11755

See my comment above, change your code to this:

Same as bighostkim says, its just the order that needs to change.

 var canvas = document.getElementById('myCanvas');
 var context = canvas.getContext('2d');
 var x =  0;
 var y = 0;
 var width = 500;
 var height = 500;
 var imageObj = new Image();

 imageObj.onload = function() {
      context.drawImage(imageObj, x, y, width, height);

      context.fillStyle = 'white';

        context.fillText('Hello World!', 150, 100);
 };
 imageObj.src = 'http://blaaah';

Upvotes: 1

allenhwkim
allenhwkim

Reputation: 27738

This happens because your image is drawn after your text is written on canvas. Here is the sequence.

  1. you define image with callback onload
  2. You write 'Hello World'
  3. image is loaded and you draw image on canvas

As you see, your image is overwriting the text, that's why you don't see it.

Here is the working example[http://jsfiddle.net/7DU4e/][1]

Upvotes: 0

Related Questions