Click here to Skip to main content
12,998,363 members (55,394 online)
Rate this:
Please Sign up or sign in to vote.
using KineticJS lib
I have little issue here (i obviously miss something). I simplified it from my bigger application: When i click blue rectangle, i add another layer to the stage that includes red rectangle (clickable), when i click this red rectangle, it removes second layer with red rect.

Problem: When i click blue rect second time, nothing happens :( i.e. app works only once, and i need to add/remove second layer(with red rect) repeatedly. What's wrong? :)

You can see it here (Fiddle):


body {
margin: 0px;
padding: 0px;
canvas {
border: 1px solid #9C9898;
<script src=""></script>
window.onload = function() {
var stage = new Kinetic.Stage({
container: 'container',
width: 578,
height: 200
var layerBlue = new Kinetic.Layer();
var layerRed = new Kinetic.Layer();
var rectBlue = new Kinetic.Rect({
x: 100,
y: 75,
width: 100,
height: 50,
fill: 'blue',
stroke: 'black',
strokeWidth: 4
var rectRed = new Kinetic.Rect({
x: 300,
y: 75,
width: 100,
height: 50,
fill: 'red',
stroke: 'black',
strokeWidth: 4
// mouse events
rectBlue.on('click', function() {
rectRed.on('click', function() {
// add the shape to the layer
// add the layer to the stage
<div id="container"></div>
Posted 21-Oct-12 6:01am
Updated 21-Oct-12 10:35am

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Top Experts
Last 24hrsThis month

Advertise | Privacy | Mobile
Web02 | 2.8.170622.1 | Last Updated 21 Oct 2012
Copyright © CodeProject, 1999-2017
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100