title: How to stop repeat of Image using Canvas drawImage() without clearing everything
body: <p>How do you draw an image into the canvas without it printing a bunch of the same image smearing across. The platforms stick together not separating from each other. For some reason you have to clear the whole RECT and than everything is gone???</p>
  
  <p>Anybody have any ideas?</p>
  
  <p>Code: </p>
  
  <pre><code>//////////////////////////////////////////////////////////
  //
  // MOVE PLATFORMS
  
  var cFunc = 0;
  var setRand = 1;
  function setR() {
      setRand = setTimeout(setR, 10);
      cTAdd = Math.floor(Math.random() * 100 + 1);
  }
  
  var block00;
  var block01; // ADD SEPERATION BLOCK(BLOCK HOLE)
  var block02;
  var block03;
  var block04; // ADD SEPERATION BLOCK(BLOCK HOLE)
  var block05;
  
  function landT() {
      setThis = setTimeout(landT, 10);
  
      var canvas = document.getElementById("canvas");
      var context = canvas.getContext('2d');
  
      ///////////////////////////////////////////////
          //
          // X POSITION OF (BLOCK HOLE)
  
          ///////////////////////////////////////////////////////////////////////////
          //
          // BOTTOM ROW
  
          block00 = document.createElement("img");
          block01 = document.createElement("img");
          block02 = document.createElement("img");
  
          if (cTAdd &gt; 0 &amp;&amp; cTAdd &lt; 40) {
              block00.src = "images/sep2.png";
              context.drawImage(block00, moveBlock1, 315, 400, 28);
          }
  
          if (cTAdd &gt; 40 &amp;&amp; cTAdd &lt; 80) {
              block01.src = "images/sep1.png"; // ADD SEPERATION BLOCK(BLOCK HOLE)
              context.drawImage(block01, moveBlock2, 315, 200, 28);
          }
  
          if (cTAdd &gt; 80 &amp;&amp; cTAdd &lt; 100) {
              block02.src = "images/platform00.png";
              context.drawImage(block03, moveBlock3, 315, 158, 28);
          }
  
  
          ///////////////////////////////////////////////////////////////////////////
          //
          // BLOCK02 GET X POS OF ADDED BLOCK 
  
          if (getX1 == 0) { //////////////////////////////////////////// SET (BLOCK HOLE) X
              var doc2 = block02.getBoundingClientRect();
              gX1 = doc2.left;
              getX1 = 1;
          }
  
  
          ///////////////////////////////////////////////////////////////////////////
          //
          // TOP ROW
  
          block03 = document.createElement("img");
          block04 = document.createElement("img");
          block05 = document.createElement("img");
  
          if (cTAdd &gt; 0 &amp;&amp; cTAdd &lt; 40) {
              block03.src = "images/sep2.png";
              context.drawImage(block03, moveBlock1, 165, 400, 28);
          }
  
          if (cTAdd &gt; 40 &amp;&amp; cTAdd &lt; 80) {
              block04.src = "images/sep1.png"; // ADD SEPERATION BLOCK(BLOCK HOLE)
              context.drawImage(block04, moveBlock1, 165, 200, 28);
          }
  
          if (cTAdd &gt; 80 &amp;&amp; cTAdd &lt; 100) {
              block05.src = "images/platform00.png";
              context.drawImage(block05, moveBlock1, 165, 158, 28);
          }
  
  }
  
  //////////////////////////////////////////////////////////
  //
  // MOVE PLATFORMS 
  
  var thisSet = 1;
  var cPlayer = 1;
  var moveSpeed = 5;
  var xPos = 50;
  var yPos = 380;
  function moveLand() {
  
      var canvas = document.getElementById("canvas");
      var context = canvas.getContext('2d');
  
      thisSet = setTimeout(moveLand, 30);
  
      if (xPos &gt;= 350 &amp;&amp; moveL == 1) {
          moveBlock1 = moveBlock1 - 15;
      }
  
      if (gX1 &gt; 0 &amp;&amp; moveL == 1 &amp;&amp; xPos &gt;= 350) {
          gX1 = gX1 - 15;
      }
      if (getX1 == 1 &amp;&amp; gX1 == 0) {
          getX1 = 0;
      }
      if (gX1 &lt; 0) {
          gX1 = 0;    
      }
  
  
      console.log("X1: " + gX1); // CONSOLE/LOG gX1 
  
      if (moveBlock1 &lt;= -1500) {
          moveBlock1 = 1000;
          moveBlock2 = 1300;
          moveBlock3 = 1600;
          context.clearRect(0, 0, 1023, 300); 
      }
  
  }
  </code></pre>