I'm doing a project where I have a webpage that has two divs for two canvases: one for a drawing, one for an animation. I'm having a problem that whenever I click between the two radio buttons it will draw overtop of my drawing or speed up my animation. With every click the animation gets faster and faster and the drawing has drawing upon drawing on top of itself. I have no clue as to why it is doing this.
Here is my code:
Code:
html

<!DOCTYPE html>     
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="../javascript/assignment.js"></script>
<link rel="stylesheet" type="text/css" href="../css/assignment.css" />
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Audiowide" />
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Roboto+Condensed" />
<link rel="shortcut icon" href="images/favicon.ico" />
<title>IMAGINE DRAGONS</title>
</head>
<body>
    
	<header><img src="../images/moon.jpg" alt="moon" />IMAGINE DRAGONS<img src="../images/moon.jpg"
	 alt= "moon" /></header>
	<nav>
	<ul>
	<li><a href="../index.html" target="_self">Home</a></li>
	<li><img src="../images/logo.jpg" alt="dragon" /></li>
	<li><a href="biography.html" target="_self">Biography</a></li>
	<li><img src="../images/logo.jpg" alt="dragon" /></li>
	<li><a href="discography.html" target="_self">Discography</a></li>
	<li><img src="../images/logo.jpg" alt="dragon" /></li>
	<li><a href="video.html" target="_self">Video</a></li>
	<li><img src="../images/logo.jpg" alt="dragon" /></li>
	<li><a href="merit.html" target="_self">Contact</a></li>
	<li><img src="../images/logo.jpg" alt="dragon" /></li>
	<li><a href="fanart.html" target="_self">Fan Art</a></li>
	</ul>
	</nav>
	<div class="container">
	<section><br /><span id="faart">Select artwork type</span><article id="text">
	<div id="divtwo">
	<input type="radio" name="artworkType" value="drawings" onclick="drawings()" />DRAWINGS
	<input type="radio" name="artworkType" value="animation" onclick="animation()" />ANIMATION
	</div>
	<div id="drawings">
	<canvas id="assignmentCanvas" width="500" height="500" >
    </canvas>
	</div>
	<div id="animation">
	<canvas id="assignmenttwoCanvas" width="500" height="500" ></canvas>
	</div>
	<br /><br />
	   </article>
	</section>
	</div>
	
	
</body>
</html>

Javascript

function setupDrawingCanvas() {
var canvas=document.getElementById('assignmentCanvas');
if (canvas.getContext) {
var ctx=canvas.getContext('2d');
ctx.lineWidth = 8;
ctx.fillStyle = 'rgb(69, 69, 196)';
ctx.strokeStyle = 'rgb(0,0,0)';
ctx.strokeRect(0, 0, 500, 500);
ctx.fillRect(4, 4, 492, 492);
ctx.fill();
ctx.moveTo(50, 40);
ctx.lineTo(450, 40);
ctx.stroke();
ctx.lineWidth = 17;
ctx.moveTo(50, 70);
ctx.lineTo(450, 70);
ctx.stroke();
ctx.moveTo(420, 70);
ctx.lineTo(252, 410);
ctx.stroke();
ctx.moveTo(250, 410);
ctx.lineTo(60, 40);
ctx.stroke();
ctx.lineWidth = 11;
ctx.moveTo(90, 110);
ctx.lineTo(400, 110);
ctx.stroke();
ctx.moveTo(110, 150);
ctx.lineTo(380, 150);
ctx.stroke();
ctx.moveTo(130, 190);
ctx.lineTo(360, 190);
ctx.stroke();
ctx.moveTo(155, 230);
ctx.lineTo(340, 230);
ctx.stroke();
ctx.moveTo(175, 270);
ctx.lineTo(320, 270);
ctx.stroke();
ctx.moveTo(195, 310);
ctx.lineTo(300, 310);
ctx.stroke();
ctx.moveTo(215, 350);
ctx.lineTo(280, 350);
ctx.stroke();
ctx.beginPath();
ctx.fillStyle = 'rgb(69, 69, 196)';
ctx.arc(50, 50, 40, 0, Math.PI * 2, false);
ctx.fill();
ctx.closePath();
ctx.beginPath();
ctx.arc(450, 50, 40, 0, Math.PI * 2, false);
ctx.fill();
ctx.closePath();
ctx.beginPath();
ctx.arc(250, 450, 40, 0, Math.PI * 2, false);
ctx.stroke
ctx.fill();
ctx.closePath();
ctx.beginPath();
ctx.fillStyle = 'rgb(176,95,176)';
ctx.arc(45, 50, 40, 0, Math.PI * 2, false);
ctx.fill();
ctx.closePath();
ctx.beginPath();
ctx.arc(455, 50, 40, 0, Math.PI * 2, false);
ctx.fill();
ctx.closePath();
ctx.beginPath();
ctx.arc(250, 455, 40, 0, Math.PI * 2, false);
ctx.fill();
ctx.closePath();
ctx.save();
ctx.beginPath();
ctx.rotate(0.90);
ctx.lineWidth = 2;
ctx.strokeStyle = 'rgb(69, 69, 196)';
ctx.strokeRect(37, -33, 57, 57);
ctx.closePath();
ctx.beginPath();
ctx.strokeRect(294, -355, 57, 57);
ctx.closePath();
ctx.beginPath();
ctx.strokeRect(294, -355, 57, 57);
ctx.closePath();
ctx.beginPath();
ctx.strokeRect(484, 60, 57, 57);
ctx.closePath();
ctx.restore();
ctx.beginPath();
ctx.fillStyle = 'rgb(255,255,255)';
ctx.arc(259, 400, 2, 0, Math.PI * 2, false);
ctx.fill();
ctx.closePath();
ctx.beginPath();
ctx.arc(243, 400, 2, 0, Math.PI * 2, false);
ctx.fill();
ctx.closePath();
ctx.beginPath();
ctx.arc(251, 400, 2, 0, Math.PI * 2, false);
ctx.fill();
ctx.closePath();
ctx.beginPath();
ctx.strokeStyle = 'rgb(176,95,176)';
ctx.lineWidth = 7;
ctx.strokeRect(40, 250, 80, 8);
ctx.closePath();
ctx.save();
ctx.beginPath();
ctx.scale(0.9, 0.9);
ctx.strokeRect(40, 250, 80, 8);
ctx.closePath();
ctx.restore();
ctx.beginPath();
ctx.lineWidth = 7;
ctx.strokeRect(380, 250, 80, 8);
ctx.closePath();
ctx.beginPath();
ctx.scale(0.9, 0.9);
ctx.strokeRect(435, 250, 80, 8);
ctx.closePath();
}
}
//This will display the Drawings div when the Drawings radio button is selected
function drawings(){
	document.getElementById("drawings").style.display = "block";
	document.getElementById("animation").style.display = "none";
	setupDrawingCanvas();
	}


//This will display the Animation div when the Animation radio button is selected
function animation(){
	document.getElementById("animation").style.display = "block";
	document.getElementById("drawings").style.display = "none";
	setupAnimCanvas();
	}
function setupAnimCanvas() {
var canvas = document.getElementById('assignmenttwoCanvas');
if (canvas.getContext) {
ctx = canvas.getContext('2d');
img = new Image();
img.onload = function(e) {
draw();
}
img.src = '../images/dragon.png';
}
}
var startPos = [380, 380];
var endPos = [0, 0];
var dx = -3, dy = -3;
var x = startPos[0], y = startPos[1];
function draw() {
ctx.clearRect(0,0, 500,500);
drawBackground();
ctx.drawImage(img, y, x);
x +=dx;
y +=dy;
if(x < endPos[0] || x > startPos[0] ||
   y < endPos[1] || y > startPos[1] ) {
   dx = -dx;
   dy = -dy;
   }
setTimeout(draw, 16);
}
setupAnimCanvas();
function drawBackground(){
var lineGrad = ctx.createLinearGradient(150, 0, 150, 500);
lineGrad.addColorStop(0, 'black');
lineGrad.addColorStop(0.6, '#5498d1');
lineGrad.addColorStop(1, '#8A5AA6');
ctx.fillStyle = lineGrad;
ctx.fillRect(0, 0, 500, 500);
ctx.fillStyle= 'white';
ctx.beginPath();
ctx.arc(55, 58, 3, 0, Math.PI*2, false);
ctx.fill();
ctx.beginPath();
ctx.arc(227, 128, 2, 0, Math.PI*2, false);
ctx.fill();
ctx.beginPath();
ctx.arc(214, 50, 1, 0, Math.PI*2, false);
ctx.fill();
ctx.beginPath();
ctx.arc(138, 117, 1, 0, Math.PI*2, false);
ctx.fill();
ctx.beginPath();
ctx.arc(43, 195, 1, 0, Math.PI*2, false);
ctx.fill();
ctx.beginPath();
ctx.arc(294, 15, 2, 0, Math.PI*2, false);
ctx.fill();
ctx.beginPath();
ctx.arc(185, 223, 1, 0, Math.PI*2, false);
ctx.fill();
ctx.beginPath();
ctx.arc(305, 123, 1, 0, Math.PI*2, false);
ctx.fill();
ctx.beginPath();
ctx.arc(350, 60, 2, 0, Math.PI*2, false);
ctx.fill();
ctx.beginPath();
ctx.arc(365, 200, 1, 0, Math.PI*2, false);
ctx.fill();
ctx.beginPath();
ctx.arc(375, 150, 1, 0, Math.PI*2, false);
ctx.fill();
ctx.beginPath();
ctx.arc(390, 25, 1, 0, Math.PI*2, false);
ctx.fill();
ctx.beginPath();
ctx.arc(300, 220, 2, 0, Math.PI*2, false);
ctx.fill();
ctx.beginPath();
ctx.arc(450, 123, 2, 0, Math.PI*2, false);
ctx.fill();
ctx.beginPath();
ctx.arc(480, 20, 1, 0, Math.PI*2, false);
ctx.fill();
ctx.beginPath();
ctx.arc(470, 190, 2, 0, Math.PI*2, false);
ctx.fill();
ctx.beginPath();
ctx.arc(20, 20, 1, 0, Math.PI*2, false);
ctx.fill();
ctx.beginPath();
ctx.arc(110, 170, 2, 0, Math.PI*2, false);
ctx.fill();
ctx.beginPath();
ctx.arc(150, 20, 1, 0, Math.PI*2, false);
ctx.fill();
}