title: Switch between two functions while disabling the other
body: <p>I want to switch between the two functions Seifenblasen_blasen() and next().</p>
  <p>My first problem is that the text Bubble doesn't change to Bounce. I tried doing it with <code>display: none;</code> but that doesn't seem to work because I didn't clear out the section thereby bringing back Bubble as a text a split second after clicking the button Bounce. Another side effect of doing it with <code>display: none;</code> is that it just spawns another invisible canvas underneath, when clicking the same button again, uselessly crowding the page.
  The second problem that occurs is that the texts Bubble and Bounce don't stand in the middle of the section or canvas respectively.
  lastly comming back to my title I want to seemlessly switch between the to screens. Therefore I need to fix the two problems above. As I haven't tested it when going from Bounce back to Bubble I might need to hide the canvas or get rid of it completely aswell to make it work. That's where I need help as I think it would be best to just be able to disable one of the functions when starting the other one allowing for an easy switch between the two.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function Seifenblasen_blasen(){
              document.getElementById("text").innerHTML = "Bubble";
              const section = document.querySelector('section')
              const createElement = document.createElement('spawn')
              var size = Math.random() * 60;
              createElement.style.width = 30 + size + 'px';
              createElement.style.height = 30 + size + 'px';
              createElement.style.left = Math.random() * innerWidth + "px";
              section.appendChild(createElement);
              
              setTimeout(() =&gt; {
                  createElement.remove()
              },8000)
              
          }
          const Blaseninterval = setInterval(Seifenblasen_blasen, 100)
        function next() {
              document.getElementById("text").innerHTML = "Bounce";
              (function() {
                  var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
                  window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
                  window.requestAnimationFrame = requestAnimationFrame;
              })();
  
              canvas = document.createElement('canvas');
              canvas.id = 'screen';
              document.body.appendChild(canvas);
              canvas.width = window.innerWidth;
              canvas.height = window.innerHeight;
  
              var canvas = document.getElementById('screen');
              var screenWidth = canvas.width;
              var screenHeight = canvas.height;
              var ctx = canvas.getContext("2d");
              var fps = 144;
              var interval = 500/fps;
              var lastTime = (new Date()).getTime();
              var currentTime = 0;
              var delta = 0;
              function mainLoop() {
                  window.requestAnimationFrame(mainLoop);
  
                  currentTime = (new Date()).getTime();
                  delta = (currentTime - lastTime);
  
                  if (delta &gt; interval) {
                      ctx.fillStyle = "#1F69FA";
                      ctx.fillRect(0, 0, screenWidth, screenHeight);
                      draw();
                      controlBall();
                      lastTime = currentTime - (delta % interval);
                  }
              }
              
              function controlBall() {
                  if (randomNumber(1,100) &lt; 5) {
                      ballArray.push(new Ball());            
                  }
                  if (ballArray.length === 40) {
                      for (var i = 0; i &lt; 20; i++) {
                          ballArray.shift();
                      }
                  }    
              }
  
              function draw() {
                  drawBall();
              }
              var ballArray = [];
              var gravity = 0.9;
  
              function drawBall() {
                  for (var i = 0; i &lt; ballArray.length; i++) {
                      var ball = ballArray[i];
                      ctx.fillStyle = ball.color;
                      ctx.beginPath();
                      ctx.arc(ball.x, ball.y,15 + ball.radius, 0, Math.PI * 2);
                      ctx.fill();
                      ctx.closePath();
          
                      ball.x += ball.xd;
                      if (ball.x + ball.radius &gt; screenWidth || ball.x - ball.radius &lt; 0) {
                          ball.xd *= -1;
                      }
          
                      ball.gravitySpeed += gravity;
                      ball.y += (ball.yd + ball.gravitySpeed);
                      if (ball.y + ball.radius &gt; screenHeight) {
                          if (ball.xd !== 0) {
                              ball.xd *= ball.friction  ;
                          }
                          ball.y = screenHeight - ball.radius;
                          ball.gravitySpeed = -(ball.gravitySpeed * ball.bounce);
                      }
                  }
              }
  
              function Ball() {
                  this.radius = randomNumber(5, 20);
                  this.color = '#' + Math.floor(Math.random()*16777215).toString(16);
                  this.x = randomNumber(this.radius, screenWidth - this.radius);
                  this.y = -this.radius;
                  this.yd = 0;
                  this.xd = randomNumber(-5, 5);
                  this.gravitySpeed = 0;
                  this.bounce = 0.8;
                  this.friction = 0.99;
                  return this;
              }
  
              function randomNumber(min, max) {
                  return Math.floor(Math.random() * (max - min + 1) + min);
              };
  
              mainLoop();
          }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>        body, html{
              margin:0;
              padding:0;
          }
  
          .container {
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
              
          }
          section {
              width: 100%;
              height: 90vh;
              overflow: hidden;
              background: #1F69FA;
              display: flex;
              justify-content: center;
              align-items: center;
              flex-direction: column;
          }
          #text{
              font-size: 10em;
              color: #333;
              height: 90%
              width: 100%;
              text-align: center;
              font-family: consolas;
              background-color:#1F69FA;
          }
          section spawn {
              position: absolute;
              bottom: -80px;
              background: transparent;
              border-radius: 50%;
              pointer-events: none;
              box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.5);
              animation: animate 4s linear infinite;
          }
  
          section spawn:before {
              content: '';
              position: absolute;
              width: 100%;
              height: 100%;
              transform: scale(0.25) translate(-70%, -70%);
              background: radial-gradient(#fff, transparent);
              opacity: 0.6;
              border-radius: 50%;
          }
  
          @keyframes animate {
              0% {
                  transform: translateY(0%);
                  opacity: 1;
              }
              99% {
                  opacity: 1;
              }
              100% {
                  transform: translateY(-2000%);
                  opacity: 0;
              }
          section span {
              margin-top: 700px;
              font-size: 1em;
              color: #333;
              margin: 0 auto;
              font-family: consolas;
              background-color: #1F69FA;
              border: none;
              position: absolute;
          }
          #btn{
              postion: absolute;
              margin: 0 auto;
          }   
          canvas { 
              display:block; 
              postion: absolute;
              top: 0
              height: 100%;
              width: 100%;
          }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;section&gt;
      &lt;/section&gt;
      &lt;h2 id="text"&gt;&lt;/h2&gt;
      &lt;div id="container"&gt;
          &lt;button id="btn" onclick="Seifenblasen_blasen()"&gt;Bubble&lt;/button&gt;
          &lt;button id="btn1" onclick="next()"&gt;Bounce&lt;/button&gt;
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>