var cuadro = document.getElementById("area");
var papel = area.getContext("2d");
var estado = 0;

document.addEventListener("mousemove", dibujarMouse);
document.addEventListener("mousedown", mouseClick);
document.addEventListener("mouseup", mouseUp);

var x; //guarda coords.
var y;
//colores
var colorBorde = "red";
var color = document.getElementById("colores");

//borrar
borrado = document.getElementById("borrador");
borrado.addEventListener("click", borrar, false);

function dibujarMouse(mover)
  {
    if (estado == 1)
    {
      dibujarLinea(color, x, y, mover.clientX, mover.clientY, papel);
      x = mover.clientX;
      y = mover.clientY;
    }
  }

function mouseClick(click)
{
  estado = 1;
  x = click.clientX;
  y = click.clientY;
}

function mouseUp(up)
{
  estado = 0;
  x = up.clientX;
  y = up.clientY;
}

function dibujarLinea(color, xinicial, yinicial, xfinal, yfinal, lienzo)
{
	lienzo.beginPath();
	lienzo.strokeStyle = color.value;
  lienzo.lineWidth = 1;
	lienzo.moveTo(xinicial,yinicial);
	lienzo.lineTo(xfinal,yfinal);
	lienzo.stroke();
	lienzo.closePath();
}

function dibujarBorde(colorBorde, xinicial, yinicial, xfinal, yfinal, lienzo)
{
	lienzo.beginPath();
	lienzo.strokeStyle = colorBorde;
  lienzo.lineWidth = 1;
	lienzo.moveTo(xinicial,yinicial);
	lienzo.lineTo(xfinal,yfinal);
	lienzo.stroke();
	lienzo.closePath();
}

//contorno

dibujarBorde(colorBorde, 0, 0, 900, 0, papel);
dibujarBorde(colorBorde, 900, 0, 900, 700, papel);
dibujarBorde(colorBorde, 900, 700, 0, 700, papel);
dibujarBorde(colorBorde, 0, 700, 0, 0, papel);

//Borrar

function borrar()
{
    papel.clearRect(0, 0, area.width, area.height);

    dibujarBorde(colorBorde, 0, 0, 900, 0, papel);
    dibujarBorde(colorBorde, 900, 0, 900, 700, papel);
    dibujarBorde(colorBorde, 900, 700, 0, 700, papel);
    dibujarBorde(colorBorde, 0, 700, 0, 0, papel);
}