初めて投稿させて頂きます。

javascriptでcanvasでグラデーションの色が変化するアニメーションを作成しているのですが、HSLに関してよくわからないので教えて頂きたくお願い致します。

分からない点
・記述方法がわからない
・HSLがどの分類になるのかがわからない(関数なのか、オブジェクトなのか等)
下記ソースコードの記述を見ると関数だが、javascript HSLで検索しても記述方法や何に分類されるのか見つからなかった(検索の仕方が悪いかもしれませんが)

調べてわかった事は引数が3つあり、それぞれに当てはまる
hsl(色相, 彩度, 輝度)
色相　→rad or deg?
彩度　→100%
輝度　→50％
(値は下記ソースコードより)
基本はわかるのですが、rad or deg(これが色相？)の値だったり、その前後の＋だったり、カンマ区切り部分の区切り方が不明だったりと記述方法がわかりません。

下記ソースコードは他の掲示板で教えてもらった記述方法です。
11行目：　 var makeColor = () => 'hsl('+ rad + 'deg, 100%, 50%)';
書き方は関数だけど関数の基本的な書き方 var makecolor () => {}のような書き方でない

もう一つは下記ソースコードにはありませんが、
ctx = canvas.getContext("2d"),
HSLcolor = (d) => 'hsl('+ d + 'deg, 100%, 60%)';
getContext('2d')の後に連続で記述している。
HSLcolorの部分は自分で名前を作成した変数なのか、それとも別の物なのかがわからない

説明分かりづらく申し訳ございませんが、教えて頂きたくお願い致します。
再度、わからないこと
・HSLの記述方法がわからない
・このHSLというものは何に分類されるのか(関数？、オブジェクト?、etc）

<script>
    var line_canvas = document.getElementById("line"); 
    var line_ctx = line_canvas.getContext("2d");

function drawFrame() {
var makeColor = () => 'hsl('+ rad + 'deg, 100%, 50%)';
var grad = line_ctx.createLinearGradient(0,0,360,240);
line_ctx.clearRect(0, 0, 450, 450);
grad.addColorStop(0.0, makeColor(deg));
grad.addColorStop(1.0, makeColor(deg +30));

line_ctx.strokeStyle = grad;

    line_ctx.beginPath(); 
    line_ctx.moveTo(100,-100);
    line_ctx.lineTo(0,200);
    line_ctx.lineTo(100,200);
    line_ctx.lineTo(50,400);
    line_ctx.lineTo(200,150);
    line_ctx.lineTo(80,150);
    line_ctx.lineTo(67,0); 
    line_ctx.stroke(); 
    line_ctx.fillStyle = grad; 
    line_ctx.fill();   
}
 var deg = 0;
 setInterval(() => {
    rad = deg % 360;
    console.log(deg);
    drawFrame(deg++);
    },33);
  </script>