title: Faster Bresenham line for HTML canvas
body: <h1>Slow render</h1>
  <p>I am using <a href="https://en.wikipedia.org/wiki/Bresenham%27s_line_algorithm" rel="nofollow noreferrer">Bresenham's line algorithm</a> to render pixel art lines in real time. It renders 1 pixel at a time <code>ctx.rect(x,y,1,1)</code> which is a slow operation. I can not use the pixel buffer, which would greatly reduce the render overhead, as I am using composite operations, alpha, and filters (some of which taint the canvas).</p>
  <h2>The function</h2>
  <pre><code>function pixelArtLine(ctx, x1, y1, x2, y2) {
      x1 = Math.round(x1);
      y1 = Math.round(y1);
      x2 = Math.round(x2);
      y2 = Math.round(y2);
      const dx = Math.abs(x2 - x1);
      const sx = x1 &lt; x2 ? 1 : -1;
      const dy = -Math.abs(y2 - y1);
      const sy = y1 &lt; y2 ? 1 : -1;
      var e2, er = dx + dy, end = false;
      ctx.beginPath();
      while (!end) {
          ctx.rect(x1, y1, 1, 1);
          if (x1 === x2 &amp;&amp; y1 === y2) {
              end = true;
          } else {
              e2 = 2 * er;
              if (e2 &gt; dy) {
                  er += dy;
                  x1 += sx;
              }
              if (e2 &lt; dx) {
                  er += dx;
                  y1 += sy;
              }
          }
      }
      ctx.fill();        
  };
  </code></pre>
  <p>How can I improve this function?</p>