I can't seem to have 2 images rotating in opposite directions within the same Script. Im trying to keep my code really clean, and I am a beginner to Javascript. Can anyone help? here is my code...

Code:
  <script type="text/javascript">
            var cog = new Image();
			var cog2 = new Image();
            
			function init() {
                cog.src = 'images/bigwheel.png';
                setInterval(draw,10);
            }
			
			function init() {
                cog2.src = 'images/smallwheel.png';
                setInterval(draw,10);
            }
			
            var rotation = 0;
            function draw(){
                var ctx = document.getElementById('bigwheelcanvas').getContext('2d');
                ctx.globalCompositeOperation = 'destination-over';
                ctx.save();
                ctx.clearRect(0,0,173,173);
                ctx.translate(86.5,86.5); // to get it in the origin
                rotation +=.1;
                ctx.rotate(rotation*Math.PI/64); //rotate in origin
                ctx.translate(-86.5,-86.5); //put it back
                ctx.drawImage(cog,0,0);
                ctx.restore();
			}
			init();
			
			var rotation = 0;
            function draw(){
                var ctx = document.getElementById('smallwheelcanvas').getContext('2d');
                ctx.globalCompositeOperation = 'destination-over';
                ctx.save();
                ctx.clearRect(0,0,150,150);
                ctx.translate(75,75); // to get it in the origin
                rotation -=.1;
                ctx.rotate(rotation*Math.PI/64); //rotate in origin
                ctx.translate(-75,-75); //put it back
                ctx.drawImage(cog2,0,0);
                ctx.restore();
			}
			init();	

        </script>
HTML

Code:
<div id="bigwheel">
	
    <canvas id="bigwheelcanvas" width="173" height="173"></canvas>

</div><!--bigwheel-->

<div id="smallwheel">
	
  <canvas id="smallwheelcanvas" width="150" height="150"></canvas>

</div><!--smallwheel-->