JSFiddle - React, Tailwind, and code Playground

by forresto

HTML

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

JavaScript

// Golden ratio hue spirals

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

var size = 300;
// From http://en.wikipedia.org/wiki/Golden_ratio
var PHI = (1 + Math.sqrt(5)) / 2;
// Think τ! https://www.khanacademy.org/math/vi-hart/v/pi-is--still--wrong
var TAU = Math.PI * 2;

// p.size(400, 400);
canvas.width = Math.ceil(size * PHI);
canvas.height = size;

context.fillStyle = "white";
context.strokeStyle = "black";
context.lineWidth = 0.5;

var hueSteps = 7;
var hueChange = 360 / hueSteps;
var hue = 0;

while (size > 0.5) {
    context.fillStyle = "hsl(" + hue + ", 100%, 70%)";
    hue += hueChange;

    context.fillRect(0, 0, size, size);

    context.fillStyle = "hsl(" + ((hue+180)%360) + ", 100%, 70%)";
    
    context.beginPath();
    context.moveTo(size, size);
    context.arc(size, size, size, TAU/2, 0 - TAU/4, false);
    context.moveTo(size, size);
    context.fill();

    context.translate(size, 0);
    context.rotate(TAU / 4);
    size = size / PHI;
    context.translate(0, -size);
}