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

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 = window.innerWidth;
el.height = window.innerHeight;
ctx.lineJoin = ctx.lineCap = 'round';

function init(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();
}

$('body').on("mousemove", init);
$('body').on("touchstart", init);
$('body').on("touchmove", init);

$(window).resize(function () {
    el.width = window.innerWidth;
    el.height = window.innerHeight;
    repeatOften();

});

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);
}