How can I make an Element another Element?

I am trying to make a ball become another element in JS, if you look below, you will see that I wish that once the points reach a certain level, it becomes a red and yellow comet, then a blue, turquoise, and red dagger, then a gray ball, then a gray comet, then a gray dagger, then a black ball.

var canvas, ctx, container;
canvas = document.createElement('canvas');
canvas.width = 800;
canvas.height = 800;
ctx = canvas.getContext("2d");
var ball = {
y: 480
};
var score = 0;
var touchGround = false;
var pull= 0.43;
var vy;
var gravity = pull;
var gameRunning = 0;
var i = Math.floor(Math.random()*10);
var timer;
color = ["red", "blue","green","yellow","purple","pink","silver","teal","turquoise","magenta","cyan"];


function ballMovement() {
vy += gravity;
ball.y += vy;

if (ball.y + ball.radius > canvas.height) {
ball.y = canvas.height - ball.radius;
vy = 0;

var img = document.getElementById('gameOver');
ctx.drawImage(gameOver, canvas.width/2-450, 100)
ball.radius = 0;
clearInterval(timer);
gameRunning = 0;
score=0;
//alert("Your score is: "+score);

  }
}

function init() {  
if(!document.querySelector('.container')){
setupCanvas()   
var img = document.getElementById('gameOver');
image.style.visibility = 'hidden';
}

vy = -19;
var y1 = 450

/*dagger = {

As you can tell, I want the dagger to be made here.

rec1x:0,
rec1y:0,
color1:blue,
rec2x:0,
rec2y:0,
color2:turquoise,
tri1x:0,
tri1y:ball.y,
tri2x:0,
tri2y:ball.y,
tri3x:0,
tri3y:ball.y,
tricol:red,
}

And the comet here, and if I want to change colors, I can just do comet.tricol=gray, then it will be fine.

comet ={
tri1x:0,
tri1y:ball.y,
tri2x:0,
tri2y:ball.y,
tri3x:0,
tri3y:ball.y,
tricol:yellow, 
x: canvas.width/2,
y: ball.y,
radius: 20,
status: 0,
color:red,  
}*/
ball = {
x: canvas.width/2,
y: ball.y,
radius: 20,
status: 0,
color: color[i],
};

clearInterval(timer);
timer = setInterval(draw, 1000 / 35);
gameRunning = 1;
}

The problem I have is that when I draw it, there is always a bug to stop the ball from changing, in fact, it stops the whole game. Can anybody make the "ball" transform by hiding the two other element while it transforms, while keeping the object as high as ball.y? For instance hide the dagger and the ball and show the comet jumping onclick.

function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
//ball
ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2, false);
ctx.fillStyle = ball.color;
ctx.fill();
ctx.closePath()
ballMovement();
}

function setupCanvas() {
container = document.createElement('div');
container.className = "container";
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
document.body.appendChild(container);
container.appendChild(canvas);
ctx.strokeStyle = "#ffffff";
ctx.lineWidth = 2;
}

window.onclick = function(){
vy += (ball.y-(canvas.height-canvas.height))
pull + 0.01;
touchGround = false; 
score+=1;
if(!gameRunning){
init(); 
}
else{
vy = -19;
}

vy+((canvas.height-canvas.height)-ball.y);
}
if (score<50){
}

if(score>=50){
pull += 50;
make ball look like comet
}
if(score>=75){
pull += 70;
make ball loook like dagger
}
if(score>=100){
pull += 50;

//make ball look like comet
comet.color=gray;
comet.tricol=gray; 
}
if(score>=125){
pull += 70;
// make ball look like gray dagger
}
if(score>=150){
pull += 20;
ball.color = black;
}
if(score>=200){
z=prompt("Congratulation,You Win, Can't Go Any Farther! Try again")
}
if(z=yes||YES||Yes){
if(score>=350){
var ball = {
y: 480
};
var score = 0;
var touchGround = false;
var pull= 0.43;
var vy;
var gravity = pull;
var gameRunning = 0;
var i = Math.floor(Math.random()*10);
var timer;
color = ["red", "blue","green","yellow","purple","pink","silver","teal","turquoise","magenta","cyan"]; 
 }
}
//Goal  
//Timer
//Don't Jump Out of Canvas