title: Javascript performance drop when drawing multiple object
body: <p>I've created a canvas where I draw 100 cubes, each with a diffrent speed, position and size. It runs just as i'd expect at the frame rate I want.</p>
  
  <p>But when I switch to a diffrent programe it takes a few seconds for my laptop to adjust, so I'm unable to use any program for a few seconds, I think this might be because of the script and when I take a look at task manager my GPU usage goes up to 40%</p>
  
  <p>Here is the code:</p>
  
  <pre><code>  var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
  
    var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
    var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
  
    c.setAttribute('width', w);
    c.setAttribute('height', h);
  
    var Ypos = [];
    var Xpos = [];
    var cubeWidth = [];
    var Yspeed = [];
    for (var i = 0; i &lt; 100; i ++) cubeWidth[i] = getRandomInt(7, 10);
    for (var i = 0; i &lt; 100; i ++) Yspeed[i] = getRandomInt(30, 90) / 10;
    for (var i = 0; i &lt; 100; i ++) Ypos[i] = getRandomInt(0, c.height);
    for (var i = 0; i &lt; 100; i ++) Xpos[i] = getRandomInt(0, c.width);
  
    setInterval( function() {
    ctx.clearRect(0, 0, c.width, c.height);
  
    for (var i = 0; i &lt; 100; i ++) {
      Ypos[i] += Yspeed[i];
  
      if (Ypos[i] + cubeWidth[i] / 2 &gt; h) {
      Ypos[i] = -cubeWidth[i] / 2;
      Xpos[i] = getRandomInt(0, c.width);
      }
  
      var width = 10;
      var height = 10;
  
      ctx.beginPath();
      ctx.moveTo(-cubeWidth[i] / 2 + Xpos[i], -cubeWidth[i] / 2 + Ypos[i]);
      ctx.lineTo(cubeWidth[i] / 2 + Xpos[i], -cubeWidth[i] / 2 + Ypos[i]);
      ctx.lineTo(cubeWidth[i] / 2 + Xpos[i], cubeWidth[i] / 2 + Ypos[i]);
      ctx.lineTo(-cubeWidth[i] / 2 + Xpos[i], cubeWidth[i] / 2 + Ypos[i]);
      ctx.lineTo(-cubeWidth[i] / 2 + Xpos[i], -cubeWidth[i] / 2 + Ypos[i]);
      ctx.stroke();
      ctx.closePath();
    }
    }, 1000/60);
  
    function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
    }
  </code></pre>
  
  <p>what could I do to fix this problem?</p>