title: Clear Canvas works only once
body: <p>So in my code I'm drawing an arrow in a fullscreen canvas. After one second it will be deleted by my clear canvas function which works fine. Now a circle shall be drawn. Also works perfectly fine. After that I want to clear the canvas again but it doesn't work anymore. Does anyone have an idea why it only works once?
  Many thanks, any answer will help!</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 generateRandomNumber() {
    var minangle = 0;
    var maxangle = 2 * Math.PI;
    randangle = Math.random() * (maxangle - minangle) + minangle;
    return randangle;
  };
  
  
  function createArrowAngle() {
    var currentangle = generateRandomNumber();
    var canvas = document.getElementById('myCanvas');
    var context = canvas.getContext('2d');
    var centerX = canvas.width / 2;
    var centerY = canvas.height / 2;
    var x1 = centerX + 50 * Math.cos(currentangle);
    var y1 = centerY + 50 * Math.sin(currentangle);
    var x2 = centerX + 50 * Math.cos(currentangle + Math.PI);
    var y2 = centerY + 50 * Math.sin(currentangle + Math.PI);
    return [x1, y1, x2, y2]
  }
  
  function drawCircle(circleColour) {
    var canvas = document.getElementById('myCanvas');
    var context = canvas.getContext('2d');
    var centerX = canvas.width / 2;
    var centerY = canvas.height / 2;
    var radius = 20;
  
    context.beginPath();
    context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
    context.fillStyle = circleColour;
    context.fill();
    context.lineWidth = 20;
    context.strokeStyle = circleColour;
    context.stroke();
  }
  
  function drawArrow(fromx, fromy, tox, toy, colourarrow) {
    //variables to be used when creating the arrow
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    var headlen = 3;
  
    var angle = Math.atan2(toy - fromy, tox - fromx);
  
    //starting path of the arrow from the start square to the end square and drawing the stroke
    ctx.beginPath();
    ctx.moveTo(fromx, fromy);
    ctx.lineTo(tox, toy);
    ctx.strokeStyle = colourarrow;
    ctx.lineWidth = 20;
    ctx.stroke();
  
    //starting a new path from the head of the arrow to one of the sides of the point
    ctx.beginPath();
    ctx.moveTo(tox, toy);
    ctx.lineTo(tox - headlen * Math.cos(angle - Math.PI / 7), toy - headlen * Math.sin(angle - Math.PI / 7));
  
    //path from the side point of the arrow, to the other side point
    ctx.lineTo(tox - headlen * Math.cos(angle + Math.PI / 7), toy - headlen * Math.sin(angle + Math.PI / 7));
  
    //path from the side point back to the tip of the arrow, and then again to the opposite side point
    ctx.lineTo(tox, toy);
    ctx.lineTo(tox - headlen * Math.cos(angle - Math.PI / 7), toy - headlen * Math.sin(angle - Math.PI / 7));
  
    //draws the paths created above
    ctx.strokeStyle = colourarrow;
    ctx.lineWidth = 20;
    ctx.stroke();
    ctx.fillStyle = colourarrow
    ctx.fill();
  }
  
  function clearcanvas1(canvastoclear) {
    var canvas = document.getElementById(canvastoclear),
      ctx = canvas.getContext("2d");
    ctx.clearRect(0, 0, canvas.width, canvas.height);
  }
  
  try {
    var canvas = document.getElementById("myCanvas");
    canvas.width = innerWidth;
    canvas.height = innerHeight;
    var differentcolours = ['#FFA500', '#FFFF00', '#FF0000', '#0000FF', '#008000', '#EE82EE', '#40E0D0', '#FFFFFF'];
    var angles = createArrowAngle();
  
    //draw an arrow after 1 second
    drawArrow(angles[0], angles[1], angles[2], angles[3], differentcolours[7]);
    //clear canvas after 1 second --&gt; this works
    setTimeout(function() {
      clearcanvas1("myCanvas")
    }, 1000);
    //draw a circle after 4 seconds --&gt; this works
    setTimeout(function() {
      drawCircle(differentcolours[7])
    }, 4000);
    //clear canvas after 1 second --&gt; this doesn't work
    setTimeout(function() {
      clearcanvas1("myCanvas")
    }, 1000);
  
  } catch (err) {
    document.getElementById("demo").innerHTML = err.message;
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* {
    margin: 0;
    padding: 0;
  }
  
  body,
  html {
    height: 100%;
  }
  
  #myCanvas {
    position: absolute;
    width: 100%;
    height: 100%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body bgcolor='black'&gt;
    &lt;canvas id="myCanvas" oncl&gt;&lt;/canvas&gt;
    &lt;p id="demo" style="color: white" oncl&gt;&lt;/p&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>