crear un avatar en canvas

[mvagas]

ola foreros espero que esten bien hoy vengo a pedirles un favor lo que pasa es que estoy montando una pagiana que me permite crear un avatar esto lo estoy pintando en un canvas con javascript pero pues el prolema es que cuando quiero cambiar alguan parte del avatar esta me la cambia pero me la pone ensima quiesiara saber como ago para poder poner cualquier parte sin que se me ponga encima algo asi como manejar capaz este es mi codigo es algo sensillo pero me esta funcionando lo unico es lo de las capaz que no se como hacerlo espero me puedan ayudar

var canvas;
var context;
var images = {};
var x = 245;
var y = 185;
var breathAmt = 0;
var hair1;
///////////**Funcion para crear el canvas**///////////////
function prepareCanvas(canvasDiv, canvasWidth, canvasHeight){
canvas = document.createElement('canvas');
canvas.setAttribute('width', canvasWidth);
canvas.setAttribute('height', canvasHeight);
canvas.setAttribute('id', 'canvas');
canvasDiv.appendChild(canvas);
context = canvas.getContext("2d");

hair1=document.getElementById("hair");
//PRIMERA PARTE DE LAS IMAGENES
cargaImagen("leftArm");
cargaImagen("legs");
cargaImagen("torso");
cargaImagen("rightArm");
cargaImagen("head");
cargaImagen('hair');
//SEGURNDA PARTE DE LAS IMAGENES
cargaImagen("leftArm1");
cargaImagen("legs1");
cargaImagen("torso1");
cargaImagen("rightArm1");
cargaImagen("head1");
cargaImagen('hair1');
}
/////////////****************************/////////////////
function cargaImagen(name) {

images[name] = new Image();
images[name].src = "images/" + name + ".png";
images[name].onload = function() {

var hair = document.getElementById("hair");
hair.addEventListener("click",function(){context.d rawImage(images["hair"], x - 37, y - 138 - breathAmt);
},false);
///////////////////////////////////////
var leftArm = document.getElementById("leftArm");
leftArm.addEventListener("click",function(){contex t.drawImage(images["leftArm"], x + 40, y - 42 - breathAmt);
},false);
///////////////////////////////////////
var legs = document.getElementById("legs");
legs.addEventListener("click",function(){context.d rawImage(images["legs"], x, y);},false);
///////////////////////////////////////
var torso = document.getElementById("torso");
torso.addEventListener("click",function(){context. drawImage(images["torso"], x, y - 50);},false);
///////////////////////////////////////
var head = document.getElementById("head");
head.addEventListener("click",function(){context.d rawImage(images["head"], x - 10, y - 125 - breathAmt);
},false);
///////////////////////////////////////
var rightArm = document.getElementById("rightArm");
rightArm.addEventListener("click",function(){conte xt.drawImage(images["rightArm"], x - 15, y - 42 - breathAmt);
},false);
////////************************************************** ******////////////////////
///////////////////////////////////////////////////////////////////////////////////
//var prueva =document.getElementById("hair1");
////////////////////////////////////////////////////////////////////////////////////1
var hair1 = document.getElementById("hair1");
hair1.addEventListener("click",function(){ context.drawImage(images["hair1"], x - 37, y - 138 - breathAmt);
},false);
///////////////////////////////////////
var leftArm1 = document.getElementById("leftArm1");
leftArm1.addEventListener("click",function(){conte xt.drawImage(images["leftArm1"], x + 40, y - 42 - breathAmt);
},false);
///////////////////////////////////////
var legs1 = document.getElementById("legs1");
legs1.addEventListener("click",function(){context. drawImage(images["legs1"], x, y);},false);
///////////////////////////////////////
var torso1 = document.getElementById("torso1");
torso1.addEventListener("click",function(){context .drawImage(images["torso1"], x, y - 50);},false);
///////////////////////////////////////
var head1 = document.getElementById("head1");
head1.addEventListener("click",function(){context. drawImage(images["head1"], x - 10, y - 125 - breathAmt);
},false);
///////////////////////////////////////
var rightArm1 = document.getElementById("rightArm1");
rightArm1.addEventListener("click",function(){cont ext.drawImage(images["rightArm1"], x - 15, y - 42 - breathAmt);
},false);


//////////////////funtion de borra lo que hay en canvas
var borra = document.getElementById("borra");
borra.addEventListener("click",function(){ canvas.width = canvas.width; },false);
////////////////////////funcion de convertir a imagen pnh o jpg
var img = document.getElementById("avatar");
var png = document.getElementById("png");
var jpeg = document.getElementById("jpeg");
png.addEventListener("click",function(){img.src = canvas.toDataURL("image/png");},false);
jpeg.addEventListener("click",function(){img.src = canvas.toDataURL("image/jpeg");},false);
}
}

[kafok]

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.