JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas">
    <p>This is a <a href="http://dev.w3.org/html5/spec/Overview.html#the-canvas-element">canvas</a> demo
        and your browser doesn't seem to support it :(</p>
</canvas>

CSS

html, body {
    height: 100%;
    margin: 0;
    overflow: hidden;
    width: 100%;
}
canvas {
    background-color: #000;
    height: 75%;
    width: 75%;
    cursor:none;
}

JavaScript

// RequestAnimFrame: a browser API for getting smooth animations
window.requestAnimFrame = (function () {
    return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) {
        window.setTimeout(callback, 1000 / 60);
    };
})();
// Initialize the canvas first with 2d context like
// we always do.
var canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d"),
    // Now get the height and width of window so that
    // it works on every resolution. Yes! on mobiles too.
    W = window.innerWidth,
    H = window.innerHeight;
// Set the canvas to occupy FULL space.
canvas.width = W;
canvas.height = H;
canvas.addEventListener("mousedown", mouseDown, false);
canvas.addEventListener("mousemove", mouseXY, false);
canvas.addEventListener("touchstart", touchDown, false);
canvas.addEventListener("touchmove", touchXY, true);
canvas.addEventListener("touchend", touchUp, false);
// Some variables for later use
var shapes = [],
    shapesCount = 20,
    mouse = {},
    mouseIsDown = 0;
// Every basic and common thing is done. Now we'll create
// a function which will paint the canvas black.
function paintCanvas() {

    // Default fillStyle is also black but specifying it
    // won't hurt anyone and we can change it back later.
    // If you want more controle over colors, then declare
    // them in a variable.
    ctx.globalCompositeOperation = "source-out";
    ctx.fillStyle = "black";
    ctx.fillRect(0, 0, W, H);
}
//Star shape
function star(c, x, y, r, p, m) {
    ctx.save();
    ctx.beginPath();
    ctx.translate(x, y);
    ctx.moveTo(0, 0 - r);
    for (var i = 0; i < p; i++) {
        ctx.rotate(Math.PI / p);
        ctx.lineTo(0, 0 - (r * m));
        ctx.rotate(Math.PI / p);
        ctx.lineTo(0, 0 - r);
    }
    ctx.fill();
    ctx.restore();

}

function apple(x, y) {
    this.scale = 20 / 100;
   ...