JSFiddle - React, Tailwind, and code Playground

by alemonteiro

HTML

<canvas id="c" width="500" height="300"></canvas>

<div id="d">

</div>

JavaScript

var c = document.getElementById('c'),
	ctx = c.getContext("2d"),
	centerx = (ctx.canvas.width * 0.7),
	centery = (ctx.canvas.height * 0.7),
  num_seq = 9;

function drawRect(size, x, y, dir) {
	ctx.rect(x,y,size,size);
	ctx.stroke(); 
}

function l(s) {
	ctx.getElementById('d').innerText = "A";
}

function fib(n) {
	var f = [], i = 2;
	f[0] = 0;
  f[1] = 1;
  for(i=2; i<=n; i++)
  {
      f[i] = f[i-2] + f[i-1];
  }
	return f;
}

function draw() {
	var fibs = fib(num_seq), 
  		len = fibs.length,
  		last = fibs[len-1],
      maxWidth = ctx.canvas.width,
      maxLastWidth = (0.45 * maxWidth),
      startWidth = maxLastWidth / last,
      turn_angle = 90, i =0, il,
      getW = function(val) {
      	return ((maxLastWidth * val) / last);
      },
      x = centerx,
  		y = centery,
      angle = 270,
      lastLastWidth = 0,
      lastWidth = 0,
      curWidth = 0,
      points = [],
      pointsArcs = [];
      
  drawRect(startWidth, x, y);
  
  
  
  for(var i=2, il=fibs.length; i < il; i++) {
  var  touchPoint = { x: 0, y: 0 },
      arcPoint = { x: 0, y: 0, a: 0, s: 0, e : 0};
  	curWidth = getW(fibs[i]);
    if ( lastWidth === 0 ) { lastWidth = curWidth; lastLastWidth = curWidth; }
    
    arcPoint.s = curWidth;
    
    //alert(maxLastWidth + ' : ' + curWidth + ' : ' + last + ' : ' + fibs[i]);
  	if ( angle === 270 ) {
    	y = y + lastWidth;
      touchPoint.y = y;
      touchPoint.x = x;
      arcPoint.y = y;
      arcPoint.x = x + curWidth;
      arcPoint.a = 1;
      arcPoint.e = 0.5;
    }
    else if ( angle === 0 || angle === 360 ) {
    	y = y - lastLastWidth;
      x = x + lastWidth;
      touchPoint.y = y + curWidth;
      touchPoint.x = x;
      
      arcPoint.y = y;
      arcPoint.x = x;
      arcPoint.a = 0.5;
      arcPoint.e = 0;
    }
    else if ( angle === 90 ) {
    	y = y - curWidth;
      x = x - lastLastWidth;
      touchPoint.y = y + curWidth;
      touchPoint.x = x + curWidth;
      
      arcPoint.y = y + curWidth;
     ...