Drawing tool made with Bonsai.js (http://orbit.bonsaijs.org/)

drawing_tool.js

var myStage;
var startDrag;
var myRect;

//
//Shape abstraction
//

//var RectShape = function(x, y, width, height){
//  this.bonsaiRect = new Rect(x, y, width, height);
//  return this;
//};
//RectShape.prototype = {
//  setWidth: function(){
//     
//  }
//};

myStage = bonsai.Path.rect(0, 0, 500, 500).attr({fillColor: 'white'});
stage.addChild(myStage);

//
// Build a grid
//
maxWidth = 500;
maxHeight = 500;
gridSpace = 20;
i = gridSpace;
// Vertical grid
while (i < maxWidth) {
 new Path()
  .moveTo(i,0)
  .lineTo(i,maxHeight)
  .stroke('#ccc', 1)
  .addTo(stage); 
 i+= gridSpace;
}
// Horizontal grid
i = gridSpace;
while (i < maxHeight) {
 new Path()
  .moveTo(0,i)
  .lineTo(maxWidth,i)
  .stroke('#ccc', 1)
  .addTo(stage);
 i+= gridSpace;
}
 
var moveListener = function(e){
  console.log(e.x, e.y);
  matrix = myRect.getAbsoluteMatrix();
  console.log("myRect width: " + myRect.getBoundingBox(matrix).width);
  endWidth = e.x - startDrag.x;
  endHeight = e.y - startDrag.y;
  //  Because the initial size is [1,1], the scale is the finalDimension/1 = 1
  myRect.attr({
    scaleX: endWidth,
    scaleY: endHeight
  });
};
 
stage.on('pointerdown', function(data){
  console.log(data.x);
  startDrag = {x: data.x, y: data.y};
  myRect = bonsai.Path.rect(data.x, data.y, 1, 1).attr({fillColor: 'red'});
  stage.addChild(myRect);
  myRect.on('click', function(e){
    myRect.x = e.x;
  });
  stage.addListener('pointermove', moveListener);
});
 
stage.on('pointerup', function(data){
  stage.removeAllListeners('pointermove');
});