Canvas conic gradient

by Nikaple

HTML

<canvas></canvas>
<div>
  <input id="precision" type="range" max="120" min="1" value="1">
</div>

JavaScript

const $input = document.querySelector('#precision');
let precision = $input.value - 0;
$input.addEventListener('input', function(){
console.log(this.value - 0);
	precision = this.value - 0;
});
$input.addEventListener('change', function(){
	precision = this.value - 0;
});

const canvas = document.querySelector('canvas');
canvas.width = 600;
canvas.height = 600;
const ctx = canvas.getContext('2d');
ctx.translate(300, 300);

function tick() {
	ctx.clearRect(-300, -300, 600, 600);
	for(let i = 0; i < 360; i += precision) {
    ctx.beginPath();
    ctx.fillStyle = `hsl(${i}, 100%, 50%)`;
    ctx.moveTo(0, 0);
    ctx.lineTo(200 * Math.cos(i / 180 *  Math.PI), 200 * Math.sin(i / 180 *  Math.PI));
    ctx.lineTo(200 * Math.cos((i+precision*2) / 180 *  Math.PI), 200 * Math.sin((i+precision*2) / 180 *  Math.PI))
    ctx.closePath();
    ctx.fill();
  }
	requestAnimationFrame(tick);
}

tick();