title: Draw a circle filled with random color sqares on canvas
body: <p>I've got pretty strange example to work on...
  I need to fill a circle with 1x1 pixels, all with different colors in a browser.</p>
  
  <p>What I tried, is something like this</p>
  
  <pre><code>function getRandomColor() {
      var letters = '0123456789ABCDEF'.split('');
      var color = '#';
      for (var i = 0; i &lt; 6; i++ ) {
          color += letters[Math.round(Math.random() * 15)];
      }
      return color;
  }
  
  function createRandomSqaure(destination) {
      var size = destination.height() * destination.width();
  
      for (var i = 0; i &lt; size; i += 1) {
          destination.append('&lt;div class="pixel" style="background: ' + getRandomColor() + '"&gt;&lt;/div&gt;');
      }
  }
  
  createRandomSqaure($('.pic'));
  </code></pre>
  
  <p>The case is, it super slow (as you can imagine, loop goes 40k times for 200x200 image), I thought maybe a better way will be drawing It on canvas?
  And I need to draw a circle filled with this pixels in the end...</p>
  
  <p>I don't know how to do something like this in a more optimal way, I can use a nodejs server also, but I think generating something like this server side on heroku is a way too much.</p>
  
  <p>I'm just curious what do you guys think, and what is the best way to do something like this?</p>