title: Slow and lag javascript
body: <p>I have a simple javascript program.</p>
  
  <p>You can move a square in it.</p>
  
  <p>But after a while, it start slowing and lagging.</p>
  
  <p>What's the problem? Why is it slow?</p>
  
  <p>Is this too much use of ram?</p>
  
  <p>I use Javascript canvas and setInterval.
  Or is it really out of date?</p>
  
  <p>aaaaaaaaaaaaaaaaaa</p>
  
  <p>Sorry, I can not speak English very well.</p>
  
  <pre><code>&lt;body onload="Start()"&gt;
    &lt;script&gt;
  
      function Start() {
        myAvatar = new component("black", 30, 30, 50, 50);
        goldMine = new component("yellow", 30, 30, 200, 100),
  
          Field.start();
      }
  
      var Field = {
  
        field: document.createElement("canvas"),
  
        start: function () {
          this.field.height = 800;
          this.field.width = 800;
          this.context = this.field.getContext("2d");
          document.body.insertBefore(this.field, document.body.childNodes[0]);
          this.interval = setInterval(fieldUpdate, 10);
  
          window.addEventListener('keydown', function (e) {
            Field.keys = Field.keys || [];
            Field.keys[e.keyCode] = (e.type == "keydown");
  
  
          })
  
          /////KEY UP/////
          window.addEventListener('keyup', function (e) {
            Field.keys[e.keyCode] = (e.type == "keydown");
  
          })
        },
  
        clear: function () {
          this.context.clearRect(0, 0, this.field.width, this.field.height);
        }
      }
  
      function component(color, width, height, x, y) {
        this.color = color;
        this.width = width;
        this.height = height;
        this.x = x;
        this.y = y;
  
        this.componentUpdate = function () {
          ctx = Field.context;
          ctx.save();
          ctx.fillStyle = color;
          ctx.fillRect(this.x, this.y, this.width, this.height);
        }
      }
  
      function fieldUpdate() {
  
        Field.clear();
  
        myAvatar.componentUpdate();
        goldMine.componentUpdate();
  
        if (Field.keys &amp;&amp; Field.keys[37]) {
          myAvatar.x--;
          var origCoord = [myAvatar.x, myAvatar.y];
  
        }
  
        if (Field.keys &amp;&amp; Field.keys[38]) {
          myAvatar.y--;
          var origCoord = [myAvatar.x, myAvatar.y];
  
        }
        if (Field.keys &amp;&amp; Field.keys[39]) {
          myAvatar.x++;
          var origCoord = [myAvatar.x, myAvatar.y];
  
  
        }
  
        if (Field.keys &amp;&amp; Field.keys[40]) {
          myAvatar.y++;
          var origCoord = [myAvatar.x, myAvatar.y];
        }
      }
    &lt;/script&gt;
  &lt;/body&gt;
  </code></pre>