Ziehen Sie mehrere Objekte in HTML5 Canvas und legen Sie sie dort ab

Ich versuche, eine Anwendung zu implementieren, in der der Benutzer mehrere Objekte innerhalb eines bestimmten Bereichs ziehen und ablegen kann. Ich verwende das HTML5-Canvas-Tag, um dies zu implementieren. Wenn es nur ein Objekt gibt, das in den Canvas gezogen und abgelegt werden kann Der Code funktioniert einwandfrei, aber wenn ich versuche, mehrere Objekte unabhängig voneinander in die Zeichenfläche zu ziehen, erhalte ich nicht die gewünschte Ausgabe.

Hier ist das Arbeitsbeispiel für Drag & Drop von nur einem Objekt mit der Zeichenfunktion

http://jsfiddle.net/KZ99q/

function draw() {
clear();
ctx.fillStyle = "#FAF7F8";
rect(0,0,WIDTH,HEIGHT);
ctx.fillStyle = "#444444";
rect(x - 15, y - 15, 30, 30);

}

Ich dachte, das Hinzufügen weiterer Objekte in der draw () - Funktion würde dazu führen, dass ich Code für neue Objekte in der draw () - Funktion hinzufüge, wie in diesem Link gezeigt

http://jsfiddle.net/KZ99q/1/

  function draw() {
  clear();
  ctx.fillStyle = "#FAF7F8";
  rect(0,0,WIDTH,HEIGHT);
  ctx.fillStyle = "#444444";
  rect(x - 15, y - 15, 30, 30);
  ctx.fillStyle = "#ff550d";
  rect(x - 25, y - 25, 30, 30);
 ctx.fillStyle = "#800080";
  rect(x - 35, y - 35, 30, 30);
  ctx.fillStyle = "#0c64e8";
 rect(x - 45, y - 45, 30, 30);
}

Ich kann anscheinend nicht verstehen, welche Änderungen ich an den Funktionen MyMove (), MyUp () und MyDown () vornehmen muss, damit sich die Objekte unabhängig voneinander bewegen. Bitte helfen Sie