title: tick method in javascript for canvas
body: <p>I'm trying to make a tick method for this code.</p>
  
  <p>When I try to put a while loop or time interval it just goes blank.</p>
  
  <p>I want the tick method to call this function without the canvas going blank.
  How would i make that tick method<br>
  <div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>function setup(){
      var canvas = document.getElementById('my_canvas');
      var ctx = canvas.getContext('2d');
      canvas.width = 800;
      canvas.height = 600;
   var gun = new Image();
   var badguy = new Image();
      var wall1 = 200;
      var ground = new Image();
      var back = new Image();
   var back2 = new Image();
   var back3 = new Image();
      var wall = new Image();
      var wall2 = new Image();
  back.onload = function() {
      ctx.drawImage(back, 0, 0, 800, 300);
  };
  back2.onload = function() {
      ctx.drawImage(back2, mountainplace, 0, mtnsize1, 300);
  };
  back3.onload = function() {
      ctx.drawImage(back3, mountainplace2, 0, mtnsize2, 300);
  };
  ground.onload = function() {
      ctx.drawImage(ground, groundplace, 300, 1980, 200);
  };
  wall.onload = function() {
      ctx.drawImage(wall, place2, 250, size2, 100);
  };
  wall2.onload = function() {
      ctx.drawImage(wall2, place, 250, size, 100);
  };
   badguy.onload = function() {
      ctx.drawImage(badguy, badguyplace, 250, 100, 100);
  };
  gun.onload = function() {
      ctx.drawImage(gun, 0, 100, 400, 400);
  };
  back2.src = "moutain1.png";
  back3.src = "moutain2.png";
  back.src = "backing.png";
  ground.src = "ground1.jpg";
  wall.src = "wall.png";
  wall2.src = "wall2.png";
  badguy.src = "santa2.png";
  gun.src = "gun1.png";
  };</code></pre>
  </div>
  </div>
  </p>