Click here to Skip to main content
11,922,789 members (48,932 online)
Rate this:
Please Sign up or sign in to vote.
See more: Javascript Canvas Handler , +
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 Frown | :( i.e. app works only once, and i need to add/remove second layer(with red rect) repeatedly. What's wrong? Smile | :)

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 7:01am
Edited 21-Oct-12 11: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
Web01 | 2.8.151125.1 | Last Updated 21 Oct 2012
Copyright © CodeProject, 1999-2015
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