JSFiddle - React, Tailwind, and code Playground

by Christian Sonne

HTML

<script src="https://modernizr.com/downloads/modernizr-latest.js"></script>
<div id="container"> 
    <canvas id="displayCanvas" width="1024px" height="576px">
        Your browser does not support HTML5 canvas.
    </canvas>
    <form>
    <p id="caption">
        HTML5 Canvas - Morphing Fractal Curves, version 2.
        <input type="button", id="btnRegenerate" value="regenerate">
    	<input type="button", id="btnExport" value="export image (png)">
        <br><a href="http://www.rectangleworld.com">rectangleworld.com</a>
    </p>
    </form>
</div>

CSS

body {background-color:#ffffff; color:#333333;} 
	h4 {font-family: sans-serif; color:#333333; font-size:16px;}
	h3 {font-family: sans-serif; color:#333333;}
	p {font-family: sans-serif; color:#333333; font-size:14px;}
		#caption {position:absolute; width:1024px; text-align:center; top:520px; z-index:1}
	a {font-family: sans-serif; color:#d15423; text-decoration:none;}
	canvas {}
		#displayCanvas {position:absolute; top:10px; z-index:0;}
	div {}
		#container {width:1024px; height:576px; margin:auto;}

JavaScript

window.addEventListener("load", windowLoadHandler, false);

//for debug messages while testing code
var Debugger = function() { };
Debugger.log = function(message) {
	try {
		console.log(message);
	}
	catch (exception) {
		return;
	}
}

function windowLoadHandler() {
	canvasApp();
}

function canvasSupport() {
	return Modernizr.canvas;
}

function canvasApp() {
	if (!canvasSupport()) {
		return;
	}
	
	var displayCanvas = document.getElementById("displayCanvas");
	var context = displayCanvas.getContext("2d");
	var displayWidth = displayCanvas.width;
	var displayHeight = displayCanvas.height;
	
	//off screen canvas used only when exporting image
	var exportCanvas = document.createElement('canvas');
	exportCanvas.width = displayWidth;
	exportCanvas.height = displayHeight;
	var exportCanvasContext = exportCanvas.getContext("2d");
		
	//buttons
	var btnExport = document.getElementById("btnExport");
	btnExport.addEventListener("click", exportPressed, false);
	
	var btnRegenerate = document.getElementById("btnRegenerate");
	btnRegenerate.addEventListener("click", regeneratePressed, false);
	
	var numCircles;
	var maxMaxRad;
	var minMaxRad;
	var minRadFactor;
	var circles;
	var iterations;
	var numPoints;
	var timer;
	var drawsPerFrame;
	var drawCount;
	var bgColor,urlColor;
	var lineWidth;
	var colorParamArray;
	var colorArray;
	var dataLists;
	var minX, maxX, minY, maxY;
	var xSpace, ySpace;
	var lineNumber;
	var twistAmount;
	var fullTurn;
	var lineAlpha;
	var maxColorValue;
	
	init();
	
	function init() {
		numCircles = 15;
		maxMaxRad = 200;
		minMaxRad = 200;
		minRadFactor = 0;
		iterations = 11;
		numPoints = Math.pow(2,iterations)+1;
		drawsPerFrame = 4;
		
		fullTurn = Math.PI*2*numPoints/(1+numPoints);
		
		minX = -maxMaxRad;
		maxX = displayWidth + maxMaxRad;
		minY = displayHeight/2-50;
		maxY = displayHeight/2+50;
		
		twistAmount = 0.6*Math.PI*2;
		
		stepsPerSegment = Math.floor(500/numCircles);
		
		maxColorValue = 80;
		lineAlpha = 0.06;
		
		bgColor =...