function Brush (b) {
  this.opt = b;
  var canvas = this.canvas = document.createElement("canvas");
  var ctx = this.ctx = canvas.getContext('2d');
  canvas.width = b.width;
  canvas.height = b.height || b.width;
  canvas.className = "brush";
  this.width = b.width;
  this.height = b.height || b.width;
  this.color = b.color;

  if (b.style == "soft") {
    var hw = Math.floor(b.width / 2);
    var r = clamp(b.width-1, 1, 1000);
    ctx.beginPath();
    var rad = ctx.createRadialGradient(hw, hw, 1, hw, hw, r);
    rad.addColorStop(0, b.color.alpha(b.color.a).toString());
    rad.addColorStop(0.5, b.color.alpha(0).toString());
    ctx.fillStyle = rad;
    ctx.arc(hw, hw, r, 0, Math.PI*2, false);
    ctx.fill();
  }
  else if (b.style == "hard") {
    var hw = Math.floor(b.width / 2);
    var r = clamp(b.width-1, 1, 1000);
    ctx.beginPath();
    var rad = ctx.createRadialGradient(hw, hw, 1, hw, hw, r);
    rad.addColorStop(0.5, b.color.toString() );
    rad.addColorStop(0.5, b.color.toString() );
    ctx.fillStyle = rad;
    ctx.arc(hw, hw, r, 0, Math.PI*2, false);
    ctx.fill();
  }
  else if (b.style == "pencil") {
    var hw = canvas.width / 2, hh = canvas.height / 2;
    var id = ctx.getImageData( 0, 0, canvas.width, canvas.height );
    var data = id.data;
    for (var i = -hw; i <= hw; i++) {
      for (var j = -hh; j <= hh; j++) {
        var xx = Math.floor( i + hw );
        var yy = Math.floor( j + hh );
        var mag = Trig.magnitude({ x: i, y: j });
        var offset = (yy * canvas.width + xx) * 4;
        data[ offset ]     = color.r;
        data[ offset + 1 ] = color.g;
        data[ offset + 2 ] = color.b;
        data[ offset + 3 ] = mag < r ? 1.0 : 0.0;
      }
    }
  }
}
Brush.prototype.copy = function(opt){
  return new Brush ( extend(opt, this.opt) )
}

function extend (h,a) {
  h = h || {};
  for (var i in a) {
    if (a.hasOwnProperty(i) && ! h.hasOwnProperty(i)) {
      h[i] = a[i];
    }
  }
  return h;
}

var brush;
function makeBrushes () {
  document.getElementById('brushes').innerHTML = '';
  fib(function(n){
    var b = new Brush({ style: 'pencil', color: color, width: n })
    b.canvas.onclick = function(){
      brush = b;
    }
    document.getElementById('brushes').appendChild( b.canvas );
    if (! brush) brush = b;
  });
}

makeBrushes();