With the addition of canvas to HTML5, various possibilities have arisen, such as creating small games or even a memes generator .
With this, I would like to know if through canvas it would be possible to create a color picker.
I see a lot of implementations of color picker out there, (they even tried to input[type=color] , but I'm not sure about compatibility).
If it were possible, I wanted it to be close to that:
There are several even, some interesting:
What I found out was to generate the color palette (codepen link code):
// esse elemento é um canvas
var colorStrip = document.getElementById('color-strip');
var ctx2 = colorStrip.getContext('2d');
var width2 = colorStrip.width;
var height2 = colorStrip.height;
// desenha o retângulo
ctx2.rect(0, 0, width2, height2);
var grd1 = ctx2.createLinearGradient(0, 0, 0, height1);
// desenha cada parte corresponde à paleta de cores
grd1.addColorStop(0, 'rgba(255, 0, 0, 1)');
grd1.addColorStop(0.17, 'rgba(255, 255, 0, 1)');
grd1.addColorStop(0.34, 'rgba(0, 255, 0, 1)');
grd1.addColorStop(0.51, 'rgba(0, 255, 255, 1)');
grd1.addColorStop(0.68, 'rgba(0, 0, 255, 1)');
grd1.addColorStop(0.85, 'rgba(255, 0, 255, 1)');
grd1.addColorStop(1, 'rgba(255, 0, 0, 1)');
ctx2.fillStyle = grd1;
ctx2.fill();