JSFiddle - React, Tailwind, and code Playground

by Nick Hulea

HTML

<canvas id="c"></canvas>

CSS

canvas {
    width:100%;
    height:100%;
    overflow:hidden;
    position:absolute;
    top:0;
    left:0;
}
html {
    width:100%;
    height:100%;
    overflow:hidden;
    position:absolute;
    top:0;
    left:0;
}

JavaScript

// ==ClosureCompiler==
// @output_file_name default.js
// @compilation_level ADVANCED_OPTIMIZATIONS
// ==/ClosureCompiler==

var viewportWidth = $(window).width();
var viewportHeight = $(window).height();
var isDrawing, points = [],
    radius = 15;
var el = document.getElementById('c');
var ctx = el.getContext('2d');

function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}
el.width = viewportWidth;
el.height = viewportHeight;
ctx.lineJoin = ctx.lineCap = 'round';
el.onmousemove = function (e) {
    isDrawing = true;
    points.push({
        x: e.clientX,
        y: e.clientY,
        radius: getRandomInt(10, 50),
        opacity: 0.1
    });
    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
    repeatOften();
};

$(window).resize(function () {
    el.width = viewportWidth;
    el.height = viewportHeight;

});

function repeatOften() {
    for (var i = 0; i < points.length; i++) {
        ctx.beginPath();
        ctx.globalAlpha = points[i].opacity;
        ctx.arc(
        points[i].x, points[i].y, points[i].radius,
        false, Math.PI * 2, false);
        var color = "#" + Math.random().toString(16).slice(2, 8);
        ctx.fillStyle = color;
        ctx.strokeStyle = color;
        ctx.fill();
        ctx.stroke();
    }
    requestAnimationFrame(repeatOften);
}