JSFiddle - React, Tailwind, and code Playground

by Raul roa

HTML

<canvas id="canvas" width="300" height="300" tabindex='0' class="default">This browser or document mode doesn't support canvas</canvas>

CSS

canvas {
    border: 1px solid black;
}

JavaScript

// Get the canvas element
// 
var canvas = document.getElementById('canvas');

// Get a reference to the drawing context 
// 
var ctx = canvas.getContext('2d');

// Touch object collection
// 
var touches = [];
var mouseIsDown = 0;
var canX = [],
    canY = [],
    bubble = [],
    colors = [],
    speed = [];
var score = 0,
    len = 0;

if (canvas && ctx) {
    canvas.addEventListener("touchstart", touchDown, false);
    canvas.addEventListener("touchmove", touchXY, false);
    canvas.addEventListener("touchend", touchUp, false);
    canvas.addEventListener("mousedown", mouseDown, false);
    canvas.addEventListener("mousemove", mouseXY, false);
    document.body.addEventListener("mouseup", mouseXY, false);

    for (var i = 0; i < 4; i++) {
        bubble[i] = 0;
        colors[i] = '#' + Math.floor(Math.random() * 16777215).toString(16);
        speed[i] = getRandomInt(1, 5);
    }

    animate();
}

function mouseUp() {
    mouseIsDown = 0;
    mouseXY();
}

function mouseDown() {
    mouseIsDown = 1;
    mouseXY();
}


function mouseXY(event) {
    canX[0] = event.pageX - canvas.offsetLeft;
    canY[0] = event.pageY - canvas.offsetTop;
    len = 1;
}

function touchDown(event) {
    mouseIsDown = 1;
    touchXY(event);
}

function touchUp(event) {
    mouseIsDown = 0;
    touches = event.targetTouches;
    len = touches.length;
}

function touchXY(event) {
    event.preventDefault();

    touches = event.targetTouches;
    len = touches.length;
    for (var index = 0; index < len; ++index) {
        canX[index] = event.targetTouches[index].pageX - canvas.offsetLeft;
        canY[index] = event.targetTouches[index].pageY - canvas.offsetTop;
    }

}

function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

function animate() {

    // Clear the canvas
    // 
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // create a path for each bubble

    for (var i = 0; i < 4; i++) {
        ctx.strokeStyle =...