Estoy tratando de implementar una aplicación en la que el usuario pueda arrastrar y soltar varios objetos dentro de un área determinada ... Estoy usando la etiqueta de lienzo html5 para implementar esto ... Cuando solo hay un objeto para arrastrar y soltar dentro del lienzo, entonces el código funciona bien, pero cuando intento arrastrar varios objetos de forma independiente dentro del lienzo, no obtengo el resultado deseado.

Aquí está el ejemplo de trabajo de arrastrar y soltar de un solo objeto con la función de dibujar

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);

}

Pensé que agregar más objetos en la función draw () lo haría, así que agregué código para nuevos objetos en la función draw () como se muestra en este enlace

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);
}

Parece que no puedo entender qué cambios necesito hacer en las funciones MyMove (), MyUp () y MyDown () para que los objetos se muevan independientemente unos de otros. Por favor, ayuda