var drawing = false;
var workspace = document.getElementById("workspace");
workspace.width = window.innerWidth * 0.9;
workspace.height = window.innerHeight;
workspace.id = "workspace";
var workspaceCtx = workspace.getContext('2d');
var lastpoint;

workspace.onmousedown = function(e){
  drawing = true;
}
document.onmousemove = function(e){
  if (drawing) {
    newpoint = new Point(e);
    if (lastpoint) {
      draw(lastpoint, newpoint);
    }
    lastpoint = newpoint;
  }
}
window.onmouseup = function(){
  if (drawing) {
    drawing = false;
    lastpoint = null;
  }
}
function draw(start, end){
  var halfBrushW = brush.width/2;
  var halfBrushH = brush.height/2;
 
  var distance = parseInt( Trig.distanceBetween2Points( start, end ) );
  var angle = Trig.angleBetween2Points( start, end );
 
  for ( var z=0; (z<=distance || z==0); z += 2 ) {
    var x = start.x + (Math.sin(angle) * z) - halfBrushW;
    var y = start.y + (Math.cos(angle) * z) - halfBrushH;
    workspaceCtx.drawImage(brush.canvas, x, y);
  }
}

function Point(e) {
  this.x = e.pageX - workspace.offsetLeft;
  this.y = e.pageY - workspace.offsetTop;
}