Javascript-форум - Слои в canvas

Очень прошу помощи, не могу никак разобраться :(
Задача в том, что бы сделать часы, которые будут идти.
В них должна быть стрелочка будильника, которую можно двигать.
С часами я вроде разобрался, а вот со стрелкой нет. Пытался сделать одним слоем, но оно не дает сохранять значения, не могу даже сделать, что бы просто при нажатии на определенную точку, стрелка появлялась и оставалась там (из-за постоянной перерисовки, она появляется только на секунду). Попытался сделать два canvas, но стрелка удаляется вместе со всем остальным раз в секунду от clearRect. Появилась идея со вторым слоем, но они не работают, хотя z-index выставил.
Подскажите, что делать, пожалуйста.

<!DOCTYPE html>
<html lang="ru" >
    <head>
        <meta charset="utf-8" />
        <title>Часы</title>
        <link href="css/main.css" rel="stylesheet" type="text/css" />
        <script src="http://code.jquery.com/jquery-latest.min.js"></script>
        <script src="js/script.js"></script>
    </head>
    <body>
        <div id="clocks">
            <canvas id="canvas" width="500" height="500"></canvas>
        </div>
	<div id="bud">
	<canvas id="canvas" width="500" height="500"></canvas>
	</div>

<script>
// Внутренние переменные

var canvas, ctx;

var clockRadius = 250;

var clockImage;


    	// Функции рисования:

function clear() { // Очистка поля рисования

	ctx.clearRect(-250, -250, ctx.canvas.width, ctx.canvas.height);

}



	
function drawScene() { // Основная функция drawScene	
	clear(); // Очищаем поле рисования



	// Получаем текущее время

	var date = new Date();
    
	var hours = date.getHours();
    
	var minutes = date.getMinutes();
    
	var seconds = date.getSeconds();
    
	hours = hours > 12 ? hours - 12 : hours;
    
	var hour = hours + minutes / 60;
    
	var minute = minutes + seconds / 60;

  

	// Сохраняем текущий контекст
    
	ctx.save();

    

	// Рисуем изображение часов (как фон)
    

	ctx.drawImage(clockImage, 0, 0, 500, 500);

    

	ctx.beginPath();

  
 
	// Рисуем цифры
    

	ctx.font = '36px Arial';
    
	ctx.fillStyle = '#000';
   
	ctx.textAlign = 'center';
    
	ctx.textBaseline = 'middle';
    
	for (var n = 1; n <= 12; n++) {
       
		var theta = (n - 3) * (Math.PI * 2) / 12;
   	
		var x = clockRadius * 0.7 * Math.cos(theta);
        
		var y = clockRadius * 0.7 * Math.sin(theta);
        
		ctx.fillText(n, x, y);

	}

    

	// Рисуем часовую стрелку
    
	ctx.save();
    
	var theta = (hour - 3) * 2 * Math.PI / 12;
    
	ctx.rotate(theta);
    
	ctx.beginPath();
    
	ctx.moveTo(-15, -5);
    
	ctx.lineTo(-15, 5);
    
	ctx.lineTo(clockRadius * 0.5, 1);
    
	ctx.lineTo(clockRadius * 0.5, -1);
    
	ctx.fill();
    
	ctx.restore();

 

	
   
	// Рисуем минутную стрелку
    
	ctx.save();
    
	var theta = (minute - 15) * 2 * Math.PI / 60;
    
	ctx.rotate(theta);
    
	ctx.beginPath();
    
	ctx.moveTo(-15, -4);
    
	ctx.lineTo(-15, 4);
    
	ctx.lineTo(clockRadius * 0.8, 1);
    
	ctx.lineTo(clockRadius * 0.8, -1);
    
	ctx.fill();
    
	ctx.restore();

   
 
	// Рисуем секундную стрелку
    
	ctx.save();
    
    	var theta = (seconds - 15) * 2 * Math.PI / 60;
	ctx.rotate(theta);
    
	ctx.beginPath();
    
	ctx.moveTo(-15, -3);
    
	ctx.lineTo(-15, 3);
    
	ctx.lineTo(clockRadius * 0.9, 1);
    
	ctx.lineTo(clockRadius * 0.9, -1);
    
	ctx.fillStyle = 'black';
    
	ctx.fill();
    
	ctx.restore();


 
	ctx.restore();
};



 // Инициализация

$(function(){
    
	canvas = document.getElementById('canvas');
    
	ctx = canvas.getContext('2d');


	// var width = canvas.width;
    
	// var height = canvas.height;



clockImage = new Image();

clockImage.src = 'images/cface.png';


    
	setInterval(drawScene, 1000); // Циклическое выполнение функции drawScene

});

</script>
<script>
var canv, ctx;

	canv = document.getElementById('canvas');
    
	ctx = canv.getContext('2d');
   // Рисуем стрелку будильника

	canvas.onmousedown = mouseDown;
	function mouseDown(evt) {
	zx = evt.pageX;
	zy = evt.pageY;
	var r = Math.sqrt(((zy-271)*(zy-271))+((zx-719)*(zx-719)));
	var q = Math.acos((zx-719)/r);
	if(zy < 271) {q = -q};
	alert(+zx+"   "+zy+); 
	ctx.rotate(q);
 
	ctx.beginPath();
    
	ctx.moveTo(-15, 3);
    
	ctx.lineTo(-15, -3);
    
	ctx.lineTo(clockRadius * 0.65, 3);
 
	ctx.lineTo(clockRadius * 0.65, -3);  
	ctx.fillStyle = 'red';   
	ctx.fill();
	};
</script>
    </body>
</html>

#clocks {
	height: 500px;
    
	margin: 25px auto;
    
	position: relative;
    
	width: 500px;

	z-index: 1;
}
#bud {
	height: 500px;
    
	margin: 25px auto;
    
   	position: relative;
 
	width: 500px;

	z-index: 7;
}