Interactive drawing with Fabric.js <p>I am trying to do an interactive drawing using Fabric.js. Now I can draw a rectangle by using mouse. But after I finish drawing the rectangle, I can not select it unless I resize it once by using the left top controller after drawing. I wonder what break the event system.</p> <p>Here is my code: <a href="http://jsfiddle.net/rmFgX/1/" rel="nofollow">http://jsfiddle.net/rmFgX/1/</a></p> <pre><code>var canvas = new fabric.Canvas('canvas'); var rect = new fabric.Rect({ top : 100, left : 100, width : 60, height : 70, fill : 'red' }); canvas.add(rect); canvas.on('mouse:down', function (option) { console.log(option); if (typeof option.target != "undefined") { return; } else { var startY = option.e.offsetY, startX = option.e.offsetX; console.log(startX, startY); var rect2 = new fabric.Rect({ top : startY, left : startX, width : 0, height : 0, fill : 'transparent', stroke: 'red', strokewidth: 4 }); canvas.add(rect2); console.log("added"); canvas.on('mouse:move', function (option) { var e = option.e; rect2.set('width', e.offsetX - startX); rect2.set('height', e.offsetY - startY); rect2.saveState(); }); } }); canvas.on('mouse:up', function () { canvas.off('mouse:move'); }); </code></pre>