JSFiddle - React, Tailwind, and code Playground

by forresto

HTML

<canvas id="drawing"></canvas>

JavaScript

/*
    Color array and object array drawing
*/

var canvas = document.getElementById("drawing");
context = canvas.getContext("2d");

// p.size(400, 400);
canvas.width = 400;
canvas.height = 400;


// If you want to use mouseX and mouseY
var mouseX = 0;
var mouseY = 0;
canvas.onmousemove = function (e) {
    mouseX = e.pageX - this.offsetLeft;
    mouseY = e.pageY - this.offsetTop;
};

// If you want to use mousePressed
var mousePressed = false;
canvas.onmousedown = function (e) {
    mousePressed = true;
};
canvas.onmouseup = function (e) {
    mousePressed = false;
};




var colors = [];
colors.push("rgba(255, 200, 100, 0.25)");
colors.push("rgba(200, 100, 150, 0.25)");
colors.push("hsla(240, 100%, 75%, 0.25)");
colors.push("hsla(240, 100%, 75%, 0.25)");

var squares = [];

var i = 0;
while (i < 100) {
    var square = {};
    square.x = Math.random() * canvas.width;
    square.y = Math.random() * canvas.height;
    square.size = Math.random() * 25 + 5;
    square.speedX = 4 - Math.random() * 8;
    square.speedY = 4 - Math.random() * 8;

    var index = i % colors.length;
    square.color = colors[index];

    squares.push(square);

    i++;
}

var draw = function () {
    for (var i = 0; i < squares.length; i++) {
        var square = squares[i];
        context.fillStyle = square.color;
        context.fillRect(square.x, square.y, square.size, square.size);
        if (mousePressed) {
            square.x = mouseX;
            square.y = mouseY;
        } else {
            square.x += square.speedX;
            square.y += square.speedY;
            if (square.x > canvas.width) {
                square.x = 0;
            }
            if (square.x < 0) {
                square.x = canvas.width;
            }
            if (square.y > canvas.height) {
                square.y = 0;
            }
            if (square.y < 0) {
                square.y = canvas.height;
            }
        }
    }
};

setInterval(draw, 50);