Kineticjs Cloning example

body {
margin: 0px;
padding: 0px;
canvas {
border: 1px solid #9C9898;
<script src=””></script&gt;
window.onload = function() {
var stage = new Kinetic.Stage({
container: ‘container’,
width: 578,
height: 200

var layer = new Kinetic.Layer();

var rect = new Kinetic.Rect({
x: 239,
y: 75,
width: 100,
height: 50,
fill: ‘green’,
stroke: ‘black’,
strokeWidth: 4,

var clone = rect.clone();
// add the clone to the layer

// add the layer to the stage

<div id=”container”></div>


Check in jsfiddle


Angularjs with kineticjs??


Can this be possible?? First we will know what are these different frameworks? what similarities and dissimilarities do they hold?

AngularJS is great at binding DOM elments.

But KineticJS objects are not DOM elements—they are just pixels on the canvas.

So AngularJS can’t control Kinetic objects directly.

To get Kinetic objects to move in response to text-input changes, you could use an AngularJS controller and make calls to the Kinetic object’s setX/setY.

To get text-input values to change as Kinetic objects are dragged, you might call the AngularJS controller from within a Kinetic dragmove event handler.

A complication is that by default, both Angular and Kinetic will want to control mouse events for their own purposes.

I’m not saying it can’t be done, but…

Integrating KineticJS + AngularJS is more complicated

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