pintar linea Canvas

[mandingo69]

Hola estoy haciendo una pequeña app de pintar parecida al paint con canvas, he echo que me haga circulos y rectangulos per a la hora de hacer que me pinte el pincel no me hace nada y ya nose cual es el error aqui pongo el codigo:

Código:

<script>
  var canvas = document.getElementById("canvas");
  var tmp_canvas = document.getElementById("tempCanvas");
  b_anchura = canvas.width;
  b_altura = canvas.height;
  var ctx = canvas.getContext("2d");
  var tmp_ctx = tmp_canvas.getContext("2d");
  var x ;
  var y ;
  var mantenerPulsado = false;
  var relleno = false;
  var trazo = true;
  var herramienta = 'rectangle';
 

  function setGrosor(){
    tmp_ctx.lineWidth=document.getElementById("grosor").value;
}   
          
     
     
function invertir(){
   var imgI = ctx.getImageData(0, 0, 800, 600);
   var pix = imgI.data;
   for (var i = 0, n = pix.length; i < n; i += 4) {
   	pix[i] = 255-pix[i];   // rojo
   	pix[i+1] =  255-pix[i+1];   // verde
	pix[i+2] =  255-pix[i+2];   // azul
   }
   ctx.putImageData(imgI, 0, 0);         
         
}
     
function blancoNegro(){
   var imgBN = ctx.getImageData(0, 0, 800, 600);
   var pix = imgBN.data;
   for (var i = 0, n = pix.length; i < n; i += 4) {
   	var grayscale = pix[i] * .3 + pix[i+1] * .59 + pix[i+2] * .11;
	pix[i] = grayscale;   // rojo
	pix[i+1] = grayscale;   // verde
	pix[i+2] = grayscale;   // azul
   }
   ctx.putImageData(imgBN, 0, 0);
}
 
     function guardar() {
     var img = canvas.toDataURL ("image / png");
     document.write ('<img src = "' + img + '" />');
    } 
     
     
  function selecHerramienta(seleccionada){
      herramienta = seleccionada;
  }
     
  function atributos(){
    if (document.getElementById("relleno").checked)
      relleno = true;
    else
      relleno = false;
    if (document.getElementById("linia").checked)
      trazo = true;
    else
      trazo = false;
  }
     //funcion para limpiar el canvass
  function nuevo(){
    ctx.clearRect(0, 0, b_anchura, b_altura);
  }
     //funcion para 
  function color(cSelec){ 
   tmp_ctx.strokeStyle = cSelec;
   if (document.getElementById("relleno").checked)
      tmp_ctx.fillStyle =  cSelec; 
  }

  tmp_canvas.onmousedown = function(e) {
        atributos();
        x = e.pageX - this.offsetLeft;
        y = e.pageY - this.offsetTop;
        mantenerPulsado = true;
        pcordenada_x = x;
        pcordenada_y = y;
        tmp_ctx.beginPath();
        tmp_ctx.moveTo(pcordenada_x, pcordenada_y);    
  }

  tmp_canvas.onmousemove = function(e) {
        if (x == null || y == null) {
          return;
        }
        if(mantenerPulsado){
       
        x = e.pageX - this.offsetLeft;
        y = e.pageY - this.offsetTop;
        Dibujar();
        }
      }
     
  tmp_canvas.onmouseup = function(e) {
        ctx.drawImage(tmp_canvas,0, 0);
        tmp_ctx.clearRect(0, 0, tmp_canvas.width, tmp_canvas.height);
        x = null;
        y = null;
        mantenerPulsado = false;
  }
  
  function Dibujar(){
  
  
  if(herramienta == 'lapiz'){
     	tmp_ctx.lineWidth=1; 
    	tmp_ctx.strokeStyle=black;
        tmp_ctx.beginPath(); 	 	 
        tmp_ctx.moveTo(x,y); 	 
        tmp_ctx.lineTo(x,y); 		 
       	tmp_ctx.stroke(); 	
    
  
  }else if (herramienta == 'rectangle'){
      tmp_ctx.clearRect(0, 0, b_anchura, b_altura);
      if(trazo)
        tmp_ctx.strokeRect(pcordenada_x, pcordenada_y, x-pcordenada_x, y-pcordenada_y);
      if(relleno) 
        tmp_ctx.fillRect(pcordenada_x, pcordenada_y, x-pcordenada_x, y-pcordenada_y);
    }
    else if (herramienta == 'cercle'){             
      tmp_ctx.clearRect(0, 0, b_anchura, b_altura);
      tmp_ctx.beginPath();
      tmp_ctx.arc(pcordenada_x, pcordenada_y, Math.abs(y - pcordenada_y), 0 , 2 * Math.PI, false);
      if(trazo) 
        tmp_ctx.stroke();
      if(relleno) 
        tmp_ctx.fill();
    }
   }
 </script>
</body>
</html>

El fallo esta en la funcion dibujar en el if de lapiz.


Gracias saludos.