JSFiddle - React, Tailwind, and code Playground

by Darby Rathbone

HTML

<canvas id="c" width="910" height="428" style="width: 910px; height: 428px;"></canvas>
<script>
    var a = document.getElementsByTagName('canvas')[0];
    var b = document.body;
    var d = function(e) {
        return function() {
            e.parentNode.removeChild(e);
        };
    }(a);
    // unprefix some popular vendor prefixed things (but stick to their original name)
    var AudioContext = window.AudioContext || window.webkitAudioContext;
    var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame || function(f) {
            setTimeout(f, 1000 / 30);
        };
    // stretch canvas to screen size (once, wont onresize!)
    a.style.width = (a.width = innerWidth) + 'px';
    a.style.height = (a.height = innerHeight) + 'px';

    var c = a.getContext('2d');
</script>

CSS

html, body {

          margin: 0;

          padding: 0;

          border: 0;

      }

      #c {

          display: block;

      }

      /* kill scrollbars from hell */

JavaScript

for(var points = [],p=  function(){return [(innerWidth * Math.random()) | 0, (innerHeight * Math.random()) | 0];} points.length < 25; points.push(p())) {
     points.push(p());
    c.beginPath();
    c.arc(points[points.length - 1][0], points[points.length - 1][1], 5, 0, 4, false);
    c.fill();
    console.log(points[points.length - 1]);
}