Форумы портала PHP.SU :: Помогите разобраться с canvas html5 и javascript

Добрый день!
Помогите решить задачу: Необходимо нарисовать круг на холсте и перемещать его за мышью. У меня при движении мыши рисуется новый объект, а отрисованные до этого элементы остаются на холсте.

CODE (htmlphp):
скопировать код в буфер обмена

 
<!DOCTYPE HTML>
<html>
    <head>
        <title>html5canvas.ru</title>
        <META charset = "utf-8">
<script>
        
 
// Иницализируем необходимые переменные
function init() {
  canvas = document.getElementById("example");
  context = canvas.getContext("2d");
  canvas.width = 600;
  canvas.height = 375;
  width = 100;
  height = 70;
  radius=30;
  drag = false; // переменная истинная когда зажата кнопка мыши
  initdrag = 0;
  dragRect = new Shape(radius);
  canvas.onmousedown = mouseDown;
  setInterval(draw, 1000 / 60);
}
// Метод отрисовки
function draw() {
var imageObj = new Image();
        imageObj.src = "hand.jpg";
        context.drawImage(imageObj,0,0, 600, 375);
        dragRect.draw();
}
// Класс задающий круг
function Shape(radius) {
  this.radius = radius; // Радиус
  this.offsetX = 0;
  this.offsetY = 0;
  this.draw = function() // Метод рисующий круг
  {
    if (initdrag) {
        context.stroke();
    context.lineWidth = 1;
    context.strokeStyle = "red";
        context.arc(this.x,this.y,this.radius,0,2*Math.PI);
        context.stroke();
        }
  }
}
// Метод срабатывающий на нажатие кнопки мыши
function mouseDown(evt) {
  var mouseX = evt.pageX - canvas.offsetLeft;
  var mouseY = evt.pageY - canvas.offsetTop;
if (!initdrag) {
        initdrag=1;
        dragRect.x = mouseX;
        dragRect.y = mouseY;
        dragRect.draw();
//alert(dragRect.x+','+dragRect.y);
}
if(((mouseX - dragRect.x) * (mouseX - dragRect.x) + (mouseY - dragRect.y) * (mouseY - dragRect.y)) <= dragRect.radius * dragRect.radius){
    drag = true;
    dragRect.offsetX = mouseX - dragRect.x + 8;
    dragRect.offsetY = mouseY - dragRect.y + 8;
    canvas.onmousemove = mouseMove;
    canvas.onmouseup = mouseUp;
  }
}
// Движение мыши
function mouseMove(evt) {
  var mouseY = evt.pageY;
  var mouseX = evt.pageX;
  if (drag) {
    // Изменение координат фигуры
    dragRect.x = mouseX - dragRect.offsetX;
    dragRect.y = mouseY - dragRect.offsetY;
  }
}
// Если отпущина кнопка мыши, то переменная drag принимает ложное значение
function mouseUp(evt) {
  drag = false;
//alert(dragRect.x+','+dragRect.y)
}
 
 
</script>
    </head>
    <body onload="init()">
        <canvas id="example" style="background-image: './hand.jpg';border:1px solid #d3d3d3;background-color:#fff;"> </canvas>
    </body>
</html>
 
 