JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="hsl-square" width="100" height="100"></canvas>

JavaScript

function draw(hue){
	var canvas = document.getElementById("hsl-square");
	var ctx = canvas.getContext('2d');
	for(row=0; row<100; row++){
		var grad = ctx.createLinearGradient(0, 0, 100,0);
		grad.addColorStop(0, 'hsl('+hue+', 100%, '+(100-row)+'%)');
		grad.addColorStop(1, 'hsl('+hue+', 0%, '+(100-row)+'%)');
		ctx.fillStyle=grad;
		ctx.fillRect(0, row, 100, 1);
	}	
}

draw(100); // add the hue selected here