title: Design on HTML5 canvas - how to speed up rendering
body: <p>So I was under the impression that rendering designs on the HTML5 canvas would be quite fast. I'm using the following code and I would think it would take less than a second to render, but it takes about <strong>2 minutes</strong> total.</p>
  
  <p>Code:</p>
  
  <pre><code> &lt;script&gt;
  var canvas = document.getElementById("canvas")
      ctx = canvas.getContext('2d')
      maxW = window.innerWidth
      maxH = window.innerHeight
      x = -1
      numLeft = 15
  
  //maxW = 300
  //maxH = 300
  canvas.setAttribute("width", maxW)
  canvas.setAttribute("height", maxH)
  ctx.fillStyle = "rgba(0,0,0,.5)"
  
  for(var j = 0; j &lt; maxH; j++){
    for(var i = 0; i &lt; maxW; i++){
      if(numLeft &lt; 0){
        if(x == -1){
          ctx.fillStyle = "rgba(127,127,127,.5)"
          //numLeft += 12
          numLeft += 5
        }
        else{
          ctx.fillStyle = "rgba(0,0,0,.5)"
          //numLeft += 24
          numLeft += 15
        }
        x *= -1
      }
      ctx.fillRect(i,j,i+1,j+1)
      numLeft--
    }
    //numLeft -= 5 this one's crazy :D
    numLeft -= 3
  }
  </code></pre>
  
  <p></p>
  
  <p>It's supposed to draw <strong>diagonal stripes in black and grey</strong>. But again, it's taking forever to render and would crash most people's browsers. Any hints as to how to speed this up?</p>