JSFiddle - React, Tailwind, and code Playground

by eapo

HTML

<canvas id="c" width="300" height="300"></canvas>
<br/>
a: <input id="a" type="text" value='0'/>
<br/>
b: <input id="b" type="text" value='1'/>
<br/>
p: <input id="p" type="text" value='100'/>
<br/>

<button id="draw">Draw</button>

CSS

#c {
    border: 1px solid #000;
}

JavaScript

var c = document.getElementById('c');
var context = c.getContext("2d");
var centerx = context.canvas.width / 2;
var centery = context.canvas.height / 2;

function asd(a,b,p){
    context.clearRect(0, 0, 300, 300);

    context.moveTo(centerx, centery);
    context.beginPath();
    for (i = 0; i < p; i++) {
        angle = 0.1 * i;
        x = centerx + (a + b * angle) * Math.cos(angle);
        y = centery + (a + b * angle) * Math.sin(angle);

        context.lineTo(x, y);
    }
    context.strokeStyle = "#000";
    context.stroke();
}
$('#draw').click(function() {
    a = parseFloat($('#a').val());
    b = parseFloat($('#b').val());
    p = eval($('#p').val());

asd(a,b,p);

});