CODEWITHSUNDEEP
javascriptkineticjs
maciekm
maciekm

Reputation: 257

how to set background color of text in kinetic js layer?

How can i set background colour of text displayed in writeMessage() function? Below there is part of my script. 

 function initStage() {  
    var stage = new Kinetic.Stage({
      container: 'somediv',
      width: 565,
      height: 570
    });

    var messageLayer = new Kinetic.Layer(); 
    stage.add(messageLayer);

    writeMessage(messageLayer, 'somemessage',300,300); 
  }
  ...
 function writeMessage(messageLayer, message, xp,yp) {
    var context = messageLayer.getContext();
    messageLayer.clear();
    context.setAttr('font', '20pt Calibri');
    //how can i set background color of text here?
    context.fillStyle = 'black';
    context.fillText(message, xp, yp);
  }

Upvotes: 2

Views: 498

Answers (1)

Gerard de Visser
Gerard de Visser

Reputation: 8050

There is no such function like Text.setBackground().

But you can draw a Kinetic.Rect with same x and y and of the same size as your text (use text.width() and text.height() ) with the desired color.

First add the Kinetic.Rect to your layer and then your Kinetic.Text.

For an example, see: http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-text-tutorial/

Upvotes: 2

Related Questions