function drawShape(){
  // get the canvas element using the DOM
  var canvas = document.getElementById('mycanvas');
  var head_line = document.getElementById('head_line');
  var head_line2 = document.getElementById('head_line2');
  var head_line3 = document.getElementById('head_line3');
  var head_line4 = document.getElementById('head_line4');
  var head_line5 = document.getElementById('head_line5');
  var head_line6 = document.getElementById('head_line6'); // start on section head
  var head_line7 = document.getElementById('head_line7'); 
  var head_line8 = document.getElementById('head_line8'); 
  var head_line9 = document.getElementById('head_line9'); 
  var head_line10 = document.getElementById('head_line10');  
 
  // Make sure we don't execute when canvas isn't supported
  if (head_line.getContext){
 
    // use getContext to use the canvas for drawing
	
    var ctx = head_line.getContext('2d');
	var i = 0;
       ctx.lineWidth = 4;
       ctx.beginPath();
       ctx.moveTo(1+i*14,5);
       ctx.lineTo(1+i*14,140);
       ctx.stroke();
  }
  if (head_line2.getContext){
 
    // use getContext to use the canvas for drawing
	
    var ctx = head_line2.getContext('2d');
	var i = 0;
       ctx.lineWidth = 4;
       ctx.beginPath();
       ctx.moveTo(1+i*1,1);
       ctx.lineTo(1+i*1,60);
       ctx.stroke();
  }
  if (head_line3.getContext){
 
    // use getContext to use the canvas for drawing
	
    var ctx = head_line3.getContext('2d');
	var i = 0;
       ctx.lineWidth = 3;
       ctx.beginPath();
       ctx.moveTo(1,1);
       ctx.lineTo(800+i*1,1);
       ctx.stroke();
  }
  if (head_line4.getContext){
 
    // use getContext to use the canvas for drawing
	
    var ctx = head_line4.getContext('2d');
	var i = 0;
       ctx.lineWidth = 3;
       ctx.beginPath();
       ctx.moveTo(1,1);
       ctx.lineTo(800+i*1,1);
       ctx.stroke();
  }
  if (head_line5.getContext){
 
    // use getContext to use the canvas for drawing
	
    var ctx = head_line5.getContext('2d');
	var i = 0;
       ctx.lineWidth = 3;
       ctx.beginPath();
       ctx.moveTo(1,1);
       ctx.lineTo(400+i*1,1);
       ctx.stroke();
  }
  if (head_line6.getContext){
 
    // use getContext to use the canvas for drawing
	
    var ctx = head_line6.getContext('2d');
	var i = 0;
       ctx.lineWidth = 3;
       ctx.beginPath();
       ctx.moveTo(1,1);
       ctx.lineTo(1+i*1,29);
       ctx.stroke();
  }
  if (head_line7.getContext){
 
    // use getContext to use the canvas for drawing
	
    var ctx = head_line7.getContext('2d');
	var i = 0;
       ctx.lineWidth = 3;
       ctx.beginPath();
       ctx.moveTo(1,1);
       ctx.lineTo(1+i*1,29);
       ctx.stroke();
  }
  if (head_line8.getContext){
 
    // use getContext to use the canvas for drawing
	
    var ctx = head_line8.getContext('2d');
	var i = 0;
       ctx.lineWidth = 3;
       ctx.beginPath();
       ctx.moveTo(1,1);
       ctx.lineTo(1+i*1,29);
       ctx.stroke();
  }
  if (head_line9.getContext){
 
    // use getContext to use the canvas for drawing
	
    var ctx = head_line9.getContext('2d');
	var i = 0;
       ctx.lineWidth = 3;
       ctx.beginPath();
       ctx.moveTo(1,1);
       ctx.lineTo(1+i*1,29);
       ctx.stroke();
  }
  if (head_line10.getContext){
 
    // use getContext to use the canvas for drawing
	
    var ctx = head_line10.getContext('2d');
	var i = 0;
       ctx.lineWidth = 3;
       ctx.beginPath();
       ctx.moveTo(1,1);
       ctx.lineTo(1+i*1,29);
       ctx.stroke();
  }

  
}
/*===================== draw line at the second see section detail ============= */
function drawShape_(num){
  // get the canvas element using the DOM 
  var head_line11 = document.getElementById('head_line11'); // start on sec detail section and unit 
  var head_line12 = document.getElementById('head_line12'); 
  var head_line13 = document.getElementById('head_line13'); 
  var head_line14 = document.getElementById('head_line14'); 
  var head_line15 = document.getElementById('head_line15'); 
  
  var head_line11_ = document.getElementById('head_line11_'); // start on sec detail section and unit 
  var head_line12_ = document.getElementById('head_line12_'); 
  var head_line13_ = document.getElementById('head_line13_'); 
  var head_line14_ = document.getElementById('head_line14_'); 
  var head_line15_ = document.getElementById('head_line15_'); 
  if(num==2){
	  if (head_line11_.getContext){
	 
		// use getContext to use the canvas for drawing
		
		var ctx = head_line11_.getContext('2d');
		var i = 0;
		   ctx.lineWidth = 3;
		   ctx.beginPath();
		   ctx.moveTo(1,1);
		   ctx.lineTo(1+i*1,35);
		   ctx.stroke();
	  }
	  if (head_line12_.getContext){
	 
		// use getContext to use the canvas for drawing
		
		var ctx = head_line12_.getContext('2d');
		var i = 0;
		   ctx.lineWidth = 3;
		   ctx.beginPath();
		   ctx.moveTo(1,1);
		   ctx.lineTo(600+i*1,1);
		   ctx.stroke();
	  }
	  if (head_line13_.getContext){
	 
		// use getContext to use the canvas for drawing
		
		var ctx = head_line13_.getContext('2d');
		var i = 0;
		   ctx.lineWidth = 3;
		   ctx.beginPath();
		   ctx.moveTo(1,1);
		   ctx.lineTo(600+i*1,1);
		   ctx.stroke();
	  }
	  if (head_line14_.getContext){
	 
		// use getContext to use the canvas for drawing
		
		var ctx = head_line14_.getContext('2d');
		var i = 0;
		   ctx.lineWidth = 3;
		   ctx.beginPath();
		   ctx.moveTo(1,1);
		   ctx.lineTo(1+i*1,36);
		   ctx.stroke();
	  }
	  if (head_line15_.getContext){
	 
		// use getContext to use the canvas for drawing
		
		var ctx = head_line15_.getContext('2d');
		var i = 0;
		   ctx.lineWidth = 3;
		   ctx.beginPath();
		   ctx.moveTo(1,1);
		   ctx.lineTo(1+i*1,36);
		   ctx.stroke();
	  }
	}else{
		if (head_line11.getContext){
	 
		// use getContext to use the canvas for drawing
		
		var ctx = head_line11.getContext('2d');
		var i = 0;
		   ctx.lineWidth = 3;
		   ctx.beginPath();
		   ctx.moveTo(1,1);
		   ctx.lineTo(1+i*1,35);
		   ctx.stroke();
	  }
	  if (head_line12.getContext){
	 
		// use getContext to use the canvas for drawing
		
		var ctx = head_line12.getContext('2d');
		var i = 0;
		   ctx.lineWidth = 3;
		   ctx.beginPath();
		   ctx.moveTo(1,1);
		   ctx.lineTo(600+i*1,1);
		   ctx.stroke();
	  }
	  if (head_line13.getContext){
	 
		// use getContext to use the canvas for drawing
		
		var ctx = head_line13.getContext('2d');
		var i = 0;
		   ctx.lineWidth = 3;
		   ctx.beginPath();
		   ctx.moveTo(1,1);
		   ctx.lineTo(600+i*1,1);
		   ctx.stroke();
	  }
	  if (head_line14.getContext){
	 
		// use getContext to use the canvas for drawing
		
		var ctx = head_line14.getContext('2d');
		var i = 0;
		   ctx.lineWidth = 3;
		   ctx.beginPath();
		   ctx.moveTo(1,1);
		   ctx.lineTo(1+i*1,40);
		   ctx.stroke();
	  }
	  if (head_line15.getContext){
	 
		// use getContext to use the canvas for drawing
		
		var ctx = head_line15.getContext('2d');
		var i = 0;
		   ctx.lineWidth = 3;
		   ctx.beginPath();
		   ctx.moveTo(1,1);
		   ctx.lineTo(1+i*1,40);
		   ctx.stroke();
	  }
	}
}

