Hola mvagas, no entiendo muy bien a que te refieres y el codigo esta un poco junto es imposible leerlo. Creo que he entendido (corrigeme si me equivoco) que cuando actualizas una parte se dibuja encima de la que ya estaba. De ser asi, lo que te recomiendo (lo que haria yo) es crear un array de la siguiente forma: (si no te importa te pondre los identificadores en español para explicarlos mejor)
Código:
var avatar = new Array();
//define primero la variable de lo forma que quieras, esto solo es orientativo
avatar["brazo_izquierdo"] = 0;
avatar["brazo_derecho"] = 0;
.
.
.
avatar["cabeza"] = 0;
Te repito esto es solo orientativo, donde pongo los 0 es para darle un valor por defercto, puede ser un numero, un el objeto imagen, eso a gusto. Quiero mostraterte en este codigo que con un objeto (en este caso un array por su sensillez) guardamos un valor con el que identificaremos las imagenes que elija el usuario, te recomiendo que mejor que numeros guardes el objeto imagen asi sera despues mas facil dibujarlo, tambien te recomiendo pero solo si sabes que crees una clase en vez de usar arrays queda mas elegante y organizado.
Bueno una vez tengas ya los valores establecidos crea una funcion que lo que haga sea es primero borrar la pantalla actual y despues dibujar las imagenes que esten guardadas en "avatar" y llamarla en cada funcion despues de establecer el nuevo elementos, es decir:
evento click en el boton que cambie el brazo izquierdo:
cambiar_brazo_izquierdo()
dibujar_las_piezas()
Donde dibujar las piezas es la funcion de la que te acabo de hablar. Esta tecnica sera mas util y asi podras guardar mas facilmente el avatar si lo necesitas (digo yo que tendra esa finalidad).
Explicarme no es lo mio, asi que si no entiendes algo dimelo.
Por cierto, cuando lo tengas terminado linkealo que tengo curiosidad por verlo ;) saludos.