JSFiddle - React, Tailwind, and code Playground

by Lukas Kuligowski

HTML

<body onLoad="Init()">
    <canvas id="canvas" width="256" height="128">
        Sorry your browser does not support Canvas, try Firefox or Chrome!	
    </canvas>
</body>

JavaScript

// Global variables
const FPS = 60;// FrameRate
var canvas = null;
var ctx = null;
window.onload = Init;

var bInstantDraw = false;
var MOVES_PER_UPDATE = 100; //How many pixels get placed down
var bDone = false;
var width; //canvas width
var height; //canvas height
var colorSteps = 32;

var imageData;
var grid;
var colors;

var currentPos;
var prevPositions;

// This is called when the page loads
function Init()
{
    canvas = document.getElementById('canvas'); // Get the HTML element with the ID of 'canvas'
	width = canvas.width;
	height = canvas.height;
    ctx = canvas.getContext('2d'); // This is necessary, but I don't know exactly what it does
	
	imageData = ctx.createImageData(width,height); //Needed to do pixel manipulation
	
	grid = []; //Grid for the labyrinth algorithm
	colors = []; //Array of all colors
	prevPositions = []; //Array of previous positions, used for the recursive backtracker algorithm
	
	for(var r = 0; r < colorSteps; r++)
	{
		for(var g = 0; g < colorSteps; g++)
		{
			for(var b = 0; b < colorSteps; b++)
			{
				colors.push(new Color(r * 255 / (colorSteps - 1), g * 255 / (colorSteps - 1), b * 255 / (colorSteps - 1)));
				//Fill the array with all colors
			}
		}
	}
	
	/*colors.sort(function(a,b)
	{
		if (a.r < b.r)
            return 1;
        if (a.r > b.r)
            return -1;
		if (a.g < b.g)
            return -1;
        if (a.g > b.g)
            return 1;
		if (a.b < b.b)
            return -1;
        if (a.b > b.b)
            return 1;
        return 0;
	});*/
	
	for(var x = 0; x < width; x++)
	{
		grid.push(new Array());
		for(var y = 0; y < height; y++)
		{
			grid[x].push(0); //Set up the grid
			//ChangePixel(imageData, x, y, colors[x + (y * width)]);
		}
	}
	
	currentPos = new Point(Math.floor(Math.random() * width),Math.floor(Math.random() * height)); 
	
	grid[currentPos.x][currentPos.y] = 1;
	prevPositions.push(currentPos);
	ChangePixel(imageData, currentPos.x, currentPos.y,...