HSLA Scale

by kpowz

HTML

<canvas id="1" width="360" height="100">
</canvas>

<canvas id="2" width="100" height="360">
</canvas>

<!-- what about for any width/height; how to strech the hues -->

CSS

canvas{
    
}

JavaScript

var canvas = document.getElementById("1");
if (!canvas.getContext) return;

var ctx = canvas.getContext('2d');

canvas.className = "supported center";

var hue = 0;
var saturationInterval = 100 / canvas.width;
console.log(saturationInterval);
for (var x = 0; x < canvas.width; x++){    
    for (var y = 0; y < canvas.height; y++){
       var saturation = saturationInterval * y;
        ctx.fillStyle = "hsla("+hue+", "+saturation+"%, 50%, 1)";
        ctx.fillRect(x,y,1,1);       
     }
    hue++;
   }

var canvas = document.getElementById("2");
if (!canvas.getContext) return;

var ctx = canvas.getContext('2d');

canvas.className = "supported center";

hue = 0;
saturationInterval = 100 / canvas.width;
console.log(saturationInterval);
for (var y = 0; y < canvas.height; y++){
    for (var x = 0; x < canvas.width; x++){    
       var saturation = saturationInterval * x;
        ctx.fillStyle = "hsla("+hue+", "+saturation+"%, 50%, 1)";
        ctx.fillRect(x,y,1,1);       
     }
    hue++;
   }