How to add a text on image in kineticjs


I have been searching for a longtime to write text on image in kineticjs..but its none of some articles they mentioned we can use z-index like below..zI should be given with integer..


But i sort it out without using that by placing kinetic text in kinetic image like shown below..

                                var imageObj = new Image();
                                imageObj.onload = function () {
                                    bet = new Kinetic.Image({
                                        x: xaxis,
                                        y: yaxis,
                                        image: imageObj
                                    yaxis = yaxis - 7;
                                    var text = new Kinetic.Text({
                                        x: bet.getX(),//get x coordinate of image
                                        y: bet.getY() + 30, // get y coordinate of image
                                        text: '',
                                        fill: 'red',
                                        fontFamily: 'Cambria',
                                        fontSize: 19,
                                        fontStyle: 'bold',
                                        width: 118,
                                        height: 100,
                                        align: "center",
                                        verticalAlign: "middle"
                                    text.setText(arg1); //set text on your image
                                imageObj.src = 'bet_chips/' + i + '.png';//image source

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s