Spiral pattern sketch

by PhilQ

HTML

<button id="download">Download image</button>
<div id="drawing"></div>

SCSS

*, ::before, ::after { margin: 0; padding: 0; box-sizing: border-box; }

body {
	background: #1f2227;
}

#download {
	position: fixed;
	top: 2rem;
	right: 2rem;
	display: inline-block;
	background: #1a1d21;
	color: #fff;
	font-weight: bold;
	font-family: sans-serif;
	border: none;
	outline: none;
	padding: 1em;
	border-radius: 8px;
	cursor: pointer;
}

#drawing {
	display: block;
}

svg, canvas {
	display: block;
	margin: 150px auto 0;
	background: #1a1d21;
	// background: #fff;
	// background: transparent;
}

JavaScript

var width = 800, height = 800;

const radians = (degrees) => (Math.PI / 180) * degrees;


/* Canvas drawing */

	var cnv, ctx;

	function initCanvas() {
		let div = document.getElementById('drawing');
		cnv = document.createElement('canvas');
		cnv.setAttribute('id', 'canvas1');
		div.appendChild(cnv);
		ctx = cnv.getContext('2d');

		cnv.width = width;
		cnv.height = height;

		ctx.translate(Math.floor(width / 2), Math.floor(height / 2));
		ctx.clearRect(-Math.floor(width / 2), -Math.floor(height / 2), width, height);

		ctx.strokeStyle = '#fff';
		ctx.fillStyle = 'rgba(255,255,255, 0.3)';

		//ctx.fillRect(-1, -1, 2, 2);

		// window.addEventListener('keydown', (e) => {
		// 	if (e.code == 'Space') { // e.key == ' '
		// 	}
		// }, false);
	}

	var r_step = 5;

	function drawSpiralCanvas(r_step, steps, direction) {
		ctx.beginPath();
		//ctx.moveTo(r_step, 0);
		for (let s = 1; s <= steps; s++) {
			//ctx.rotate(radians(direction * 90));
			//ctx.lineTo(s * r_step, 0);
			let r = s + 1;
			let x = ((s-1)%4 < 2) ? -1: 0;
			let y = (s%4 > 1) ? 1: 0;
			ctx.arc(
				x * r_step,
				y * direction * r_step,
				r * r_step,
				0,
				direction * radians(90),
				(direction>0 ? false : true)
			);
			ctx.rotate(radians(direction * 90));
		}
		//ctx.fill();
		ctx.stroke();
		ctx.closePath();
	}

	function drawCanvas_old() {
		ctx.save();
		for (let i = 0; i < 2; i++) {
			ctx.save();
			ctx.rotate(radians(45 + i * 180));
			drawSpiralCanvas(r_step, 50, 1);
			// Mirrored
			//ctx.rotate(radians(-90));
			//drawSpiralCanvas(r_step, 50, -1);
			ctx.restore();
		}
		ctx.restore();
	}

	function drawArchimedianSpiralCanvas(a, b, startAngle, endAngle, angleIncrement, color) {
		// See:
		// https://en.wikipedia.org/wiki/List_of_spirals
		// https://en.wikipedia.org/wiki/Archimedean_spiral
		ctx.save();
		ctx.strokeStyle = color;
		ctx.moveTo(0,0);
		ctx.beginPath();
		let r = 0;
		for (let t = startAngle; t <= endAngle; t += angleIncrement) {
			r = a + b *...