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