JSFiddle - React, Tailwind, and code Playground

by hesster92

HTML

<center>
<div class="center">
<canvas id="myCanvas" width="500" height="500" style="border:3px solid black;">
Your browser does not support the HTML5 canvas tag.</canvas>
<br>
<button onclick="doDrawing();">Start Drawing</button>
<button onclick="stopDrawing();">Stop Drawing</button>
<button onclick="clearCanvas();">Clear Canvas</button><br>
<p id="maxInterval">

</p>
</div>
</center>

CSS

canvas#myCanvas {
    background-color:rgba(255,0,0,0.1)!important;
    width: 500px !important;
    height: 500px !important;

JavaScript

var t = 0;
var c = document.getElementById("myCanvas");
var z = c.width/2;
var R = z/2;
var r = 0;
var O = Math.floor((Math.random() * 100) + 25);
var ctx = c.getContext("2d");


function doDrawing() {
    t = 0;
     r += 2*Math.random()-1;

    ctx.clear();
      
    var timesRun = 0;
    var color =  '#'+Math.floor(Math.random()*16777215).toString(16);
    
    var x = (z+(R+r)*Math.cos(t) - (r+O)*Math.cos(((R+r)/r)*t));
    var y = (z+(R+r)*Math.sin(t) - (r+O)*Math.sin(((R+r)/r)*t));   

    ctx.beginPath();
    ctx.strokeStyle = color;
    ctx.moveTo(x,y);
      
    var interval = setInterval(function(){
    timesRun += 1;
    if(timesRun === 1000){
        clearInterval(interval);
		document.getElementById("maxInterval").innerText = "You have reached the max intervals. Please start a new drawing." 
		}
        
    beginDrawing();}, 20); 
    
}
function beginDrawing()
{
  t += 0.02;
  x = Math.floor(z+(R+r)*Math.cos(t) - (r+O)*Math.cos(((R+r)/r)*t));
  y = Math.floor(z+(R+r)*Math.sin(t) - (r+O)*Math.sin(((R+r)/r)*t));

  ctx.lineTo(x,y);  
  ctx.stroke();
}

CanvasRenderingContext2D.prototype.clear = 
  CanvasRenderingContext2D.prototype.clear || function (preserveTransform) {
    if (preserveTransform) {
      this.save();
      this.setTransform(1, 0, 0, 1, 0, 0);
    }

    this.clearRect(0, 0, this.canvas.width, this.canvas.height);

    if (preserveTransform) {
      this.restore();
	  
    }           
};

function stopDrawing(){
	r = 0;
	}

function clearCanvas(){
	 ctx.clear();
	 ctx.beginPath();
	 t = 0;
	 r = 0;
	 
}