Fabricjs: Adding and selecting objects on canvas -

this i'm trying achieve in jsfiddle:

• if user clicks on canvas, rect added
• if user clicks on rect added, can drag or resize it

the problem when user clicks on rect select it, triggers click on canvas rect added. how prevent happen?

html

<canvas id="c" width="400" height="300"></canvas> 

javascript

var canvas = new fabric.canvas('c'); canvas.on('mouse:down', function(options) {      var rect = new fabric.rect({        left: options.e.clientx,        top: options.e.clienty,        width: 60,        height: 60,        fill: 'rgba(255,0,0,0.5)',    });     canvas.add(rect);  }); 

this how fixed it, options.target null if user clicked on canvas, not null if user clicked on object:

canvas.on('mouse:down', function(options) {      if (options.target)        return;      var rect = new fabric.rect({         left: options.e.clientx,         top: options.e.clienty,         width: 60,         height: 60,         fill: 'rgba(255,0,0,0.5)',     });     canvas.add(rect); });