JSFiddle - React, Tailwind, and code Playground

HTML

<p>original color: hsl(100,50%,50%)</p>
<p>after a 100deg rotation it should be hsl(200,50%,50%)</p>
<canvas id="drawing" width="200" height="100"></canvas>
<p id="sample"></p>

JavaScript

var ctx = document.getElementById('drawing').getContext('2d');
        ctx.fillStyle = "hsl(100,50%,50%)";
        ctx.fillRect(0, 0, 100, 100);
        ctx.filter = 'hue-rotate(100deg)';
        ctx.fillRect(100, 0, 100, 100);
        var sampleRGB = ctx.getImageData(150, 10, 1, 1);
        var sampleHSL = rgbToHsl(sampleRGB.data[0],sampleRGB.data[1],sampleRGB.data[2]);
        document.getElementById('sample').innerHTML = 
            "but instead it's (R: "+sampleRGB.data[0]+
            ", G: "+sampleRGB.data[1]+
            ", B: "+sampleRGB.data[3]+
            ") = (H: "+sampleHSL.h+
            ", S: "+sampleHSL.s+
            "%, L: "+sampleHSL.l +"%)";

function rgbToHsl(r, g, b){
    r /= 255, g /= 255, b /= 255;
    var max = Math.max(r, g, b), min = Math.min(r, g, b);
    var h, s, l = (max + min) / 2;

    if(max == min){
        h = s = 0;
    }else{
        var d = max - min;
        s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
        switch(max){
            case r: h = (g - b) / d + (g < b ? 6 : 0); break;
            case g: h = (b - r) / d + 2; break;
            case b: h = (r - g) / d + 4; break;
        }
        h /= 6;
    }
    return {h:Math.round(h*360), s:Math.round(s*100), l:Math.round(l*100)};
}