title: Implementing a Game start / Game Over / restart steps to a basic css canvas game
body: <p>So I'm trying to create a basic css game. I was able to get it to work without any additional screens (the game would just start the moment the HTML it's written on is opened), and now I'm trying to add additional functionality (the first screen in the canvas would have a button to start the game and after the game is over, there would be a new screen on the canvas with a "Try again" -button) to it. </p>
  
  <p>I thought I could do it by making the initialization of the game board (that used to be in a global scope / outside of any functions) a "GameStart()" -function, but for some reason it's not quite working. </p>
  
  <p>The code is properly calling for my GameStart() -function (tested it out by placing alerts on key spots), but I can't get it to call my draw() -function which would start the actual game and loop. </p>
  
  <p>Here's my code, though I've taken the liberty to not include the functions related to how the game works (the functions draw() uses) since they'd just act as spam here. </p>
  
  <p>Edit:
  To clarify, what I'm trying to ask is if it's possible to incorporate different screens for a canvas game this way or is there a "proper" way that's completely different from this? </p>
  
  <pre><code>&lt;script&gt;
  
  var canvas = document.getElementById("Canvas");
  var ctx = canvas. getContext("2d");
  
  
  function GameStart()
  {
      // clear previous canvas
      context.clearRect(0, 0, canvas.width, canvas.height);
      // ball variables here
      var dx = 0;
      var dy = 0;
      var ballRadius = 7;
      var x = canvas.width/2;
      var y = canvas.height/2;
  
      // paddle variables here
      var paddleHeight = 10;
      var paddleWidth = 125;
      var paddleX = (canvas.width-paddleWidth)/2;
      var rightbutton = false;
      var leftbutton = false;
  
      document.addEventListener("keydown", keyDownHandler, false);
      document.addEventListener("keyup", keyUpHandler, false);
      document.addEventListener("mousemove", mouseMoveHandler, false);
  
      // destroyable blockfields here
      var brickRowCount = 6;
      var brickColumnCount = 20;
      var brickWidth = 45;
      var brickHeight = 45;
      var brickPadding = 0;
      var brickOffsetTop = 30;
      var brickOffsetLeft = 30;
      var bricks=[];
  
      for(c=0; c&lt;brickColumnCount; c++) 
      {
          bricks[c] = [];
          for(r=0; r&lt;brickRowCount; r++) 
          {
              bricks[c][r] = { x: 0, y: 0, status: 1 };
          }
      }
  
      // player here
      var score = 0;
      var lives = 3;
      var destroyed = 0;
      var dscore = 1;
      var endscore = 0;
      draw();
  }
  </code></pre>
  
  <p>... there's a bunch of functions related to the game between here, but they should not be the cause of the problem since they worked fine when I was not trying to add the "GameStart()" -function ...</p>
  
  <pre><code>function draw() {
      alert("Drawing");
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      drawBall();
      drawPaddle();
      collisionDetection();
      drawBricks();
      drawScore();
      drawLives();
      x += dx;
      y += dy;
      if (dy &lt; 2 &amp;&amp; dy &gt;= 0)
      {
          dy += 0.05;
      }
      if (score &gt;  0)
      {
          score=score-dscore;
      }
      if(rightbutton &amp;&amp; paddleX &lt; canvas.width-paddleWidth)
      {
          paddleX +=5;
      }
      else if(leftbutton &amp;&amp; paddleX &gt; 0)
      {
          paddleX -=5;
      }
      requestAnimationFrame(draw);
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>The only thing I changed about the code is that I tied the actions that weren't inside any functions prior to this into the GameStart() -function and moved draw() -call from the end of the script into the GameStart() -function and added GameStart() -function call to the end of the script</p>