Add ability to download directly in browser

browser.js

@@ -69,6 +69,8 @@ function reload (config) {
   background.onload = () => {
     var renderer = createRenderer(opts);
 
+    document.querySelector('.download').onclick = () => window.open(renderer.canvas.toDataURL(), '_blank')
+
     if (opts.debugLuma) {
       renderer.debugLuma();
     } else {

index.html

@@ -32,9 +32,14 @@
   .seed-text {
     font-weight: 700;
   }
+  .download,
   .howto {
     font-size: 9px;
   }
+  .download:hover {
+    text-decoration: underline;
+    cursor: pointer;
+  }
   #fill {
     cursor: pointer;
     position: absolute;
@@ -51,6 +56,7 @@
   <header class="seed-container">
   <div>seed – <span class="seed-text">12380</span></div>
   <div class="howto">tap to randomize</div>
+  <div class="download">download image</div>
   </header>
   <script src="bundle.js"></script>
 </body>

lib/createRenderer.js

@@ -39,6 +39,7 @@ module.exports = function createRenderer (opt) {
   var particles = newArray(count).map(() => resetParticle());
 
   return {
+    canvas: canvas,
     clear: clear,
     step: step,
     debugLuma: function () {
@@ -104,7 +105,7 @@ module.exports = function createRenderer (opt) {
     p.time = random(0, p.duration);
     p.velocity = [ random(-1, 1), random(-1, 1) ];
     p.speed = random(0.5, 2) * dpr;
-    
+
     // Note: We actually include the background color here.
     // This means some strokes may seem to "erase" the other
     // colours, which can add a nice effect.