Spiral

<button onclick="drawSpiral()">Draw Spiral</button>
<canvas height="400" id="canvas" width="400">
</canvas>
<script>
// Get the canvas element and its context
function drawSpiral() {
const canvas = document.querySelector('#canvas');
if (!canvas.getContext) {
return;
}
const ctx = canvas.getContext('2d');
// set line stroke and line width
ctx.strokeStyle = 'red';
ctx.lineWidth = 5;
// draw a red line
a=0;r=0;i=0, n=4*2*Math.PI,dr=0.05,x0=200,y0=200;
ctx.beginPath();
ctx.moveTo(x0, y0);
for(a=0;a<n;a+=0.01){
ctx.lineTo(200+r*Math.cos(a), 200+r*Math.sin(a));
r+=dr;
}
ctx.stroke();
}
</script>