title: Is it possible to draw multiple filled circles in one path on canvas
body: <p>I am trying to make a performance optimization in the HTML5 canvas drawing code.
  In particular I am looking at filled circles and lines. For lines I did optimization like that:
  for every segment of the line it did the following:</p>
  
  <ul>
  <li>Begin path</li>
  <li>Move to</li>
  <li>Line to </li>
  <li>Close path</li>
  <li>Stroke</li>
  </ul>
  
  <p>We got improvement once we opened path once and performed moveTo and lineTo for all points and after that closed path and did Stroke. Perf gain was pretty good.</p>
  
  <p>I try to do similar thing for filled circles. Right now filled circles rendered in similar manner:
  for every circle:Begin path, draw arc, set shape fill style, fill.
  Test (<a href="http://jsperf.com/rendering-filled-circle/7" rel="nofollow noreferrer">http://jsperf.com/rendering-filled-circle/7</a> ) shows that rendering and filling multiple circles at once would be faster.
  However, I will need to use moveTo before every call to arc otherwise I will get incorrect result: <a href="https://jsfiddle.net/gaeb9es8/1/" rel="nofollow noreferrer">https://jsfiddle.net/gaeb9es8/1/</a>
  <a href="https://i.stack.imgur.com/AvLEH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/AvLEH.png" alt="enter image description here"></a>
  Here is what I expect: <a href="https://jsfiddle.net/j4b7jz03/1/" rel="nofollow noreferrer">https://jsfiddle.net/j4b7jz03/1/</a>
  <a href="https://i.stack.imgur.com/lpi2F.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lpi2F.png" alt="enter image description here"></a></p>
  
  <pre><code>function render2(x, y, context){
              // x, y are arrays of points to render in a single path
              context.beginPath();
              for (var i=0; i&lt; x.length; i++){
                  //context.moveTo(x[i], y[i]);
                  context.arc(x[i], y[i], 5, 0, 2 * Math.PI, false);
              }
              context.closePath();
              context.fill();          
          }
  </code></pre>
  
  <p>So the question is: is there a way to draw multiple filled circles of the same color in the same path on canvas and without using moveTo? moveTo is causing perf regression.</p>