title: Slow performance drawing dashed lines in HTML5 Canvas
body: <p>I am attempting to make a Pong clone using HTML5 canvas. I want to draw a dashed line down the middle of the playing field as is found in the original Pong. I am doing this by extending the <code>CanvasRenderingContext2D</code> object as shown in <a href="https://rads.stackoverflow.com/amzn/click/com/0132761610" rel="nofollow noreferrer" rel="nofollow noreferrer">David Geary's</a> excellent book:</p>
  
  <pre><code>CanvasRenderingContext2D.prototype.dashedLine = function (x1, y1, x2, y2, dashLength) {
      dashLength = dashLength === undefined ? 5 : dashLength;
  
      var deltaX = x2 - x1;
      var deltaY = y2 - y1;
      var numDashes = Math.floor(
                Math.sqrt(deltaX * deltaX + deltaY * deltaY) / dashLength);
  
      for (var i=0; i &lt; numDashes; ++i) {
          context[ i % 2 === 0 ? 'moveTo' : 'lineTo' ]
           (x1 + (deltaX / numDashes) * i, y1 + (deltaY / numDashes) * i);
      }
  </code></pre>
  
  <p>I then have a <code>render()</code> function that actually makes all the calls to render elements on the canvas. Included in this is my <code>renderBackground()</code> function which colors the background and draws the dashed line:</p>
  
  <pre><code>function render() {
      ctx.clearRect(0, 0, cWidth, cHeight);
      renderBackground();
      // Rest removed for brevity
  }
  
  function renderBackground() {
      ctx.lineWidth = 5;
      ctx.strokeStyle = '#FFFFFF';
      ctx.fillStyle = '#000000';
      ctx.fillRect(0, 0, cWidth, cHeight);
      ctx.dashedLine(0, 0, 0, cHeight, 10);
      ctx.stroke()
  }
  </code></pre>
  
  <p>Then at the end I have a function called <code>animLoop()</code> that actually calls the <code>render()</code> function and makes use of <code>requestAnimationFrame()</code> for smoother animations:</p>
  
  <pre><code>function animLoop() {
      render();
      requestAnimationFrame(animLoop);
  }
  
  window.requestAnimationFrame = (function() {
      return (
             window.requestAnimationFrame       ||
             window.webkitRequestAnimationFrame ||
             window.mozRequestAnimationFrame    ||
             function( callback ){
                 window.setTimeout(callback, 1000 / 60);
             }
          );
  })();
  </code></pre>
  
  <p>If I let my game run for more than 30 seconds it starts slowing down dramatically to the point that it is unplayable and CPU usage by the browser hovers around 134% for both Firefox and Chrome. The slowness is only present when I am rendering the dashed line. I am not sure what is going, but below I also ran my code through Chrome Inspectors profiler and get the following:</p>
  
  <p><img src="https://i.stack.imgur.com/FrKiT.png" alt="enter image description here"></p>
  
  <p>My <code>renderBackground()</code> function is only taking .46% of the CPU time. Also I am not sure what the <code>(program)</code> is supposed to signify. Any thoughts on what could be causing the slowness?</p>
  
  <p>Also you can see the complete code I have so far on my <a href="https://github.com/nryoung/pong.js" rel="nofollow noreferrer">Github repo</a>.</p>