JSFiddle - React, Tailwind, and code Playground

by arcm111

HTML

<canvas id="canvas" width="300" height="300" >Not supported</canvas>

CSS

canvas
{
	border: 2px solid #000;
	background: white;
}

JavaScript

var initRotation = 30;
var spiralInnerDistance = 5;
var center = {'x': 150, 'y': 150};
var c = document.getElementById ('canvas');
var ctx = c.getContext ("2d");

function spiral (angle)
{
	var r = initRotation + spiralInnerDistance * angle;
	var y = r * Math.sin (angle) + center.y;
	var x = r * Math.cos (angle) + center.x;
	return [x, y];
}

function draw()
{
	ctx.beginPath();              
	ctx.lineWidth = "2";
	ctx.strokeStyle = "red";
	ctx.moveTo (150, 150);
	for (var i = 0; i < 360 * 4; i += 10)
	{
		var pt = spiral (i * Math.PI / 180);
		console.log (pt);
		ctx.lineTo (pt[0], pt[1]);
	}
	ctx.stroke();
}

draw();