0

I'm implementing a color picker using HTML5 canvas. It is the same kind as that of Chrome DevTools.

How to restore cursors on both canvases when a user inserts values through the inputs?

enter image description here

vulp
  • 1,451
  • 13
  • 32

1 Answers1

2
  1. HSL(Hue, Saturation, Lightness) is needed
  2. Convert the input value RGB to HSL (RGB to HSL conversion)
  3. The slider in your picture, represent the Hue value
  4. And the color palette, from top to bottom, represent the Lightness 0%~100%; from left to right, represent the Saturation 0%~100%
Learning
  • 218
  • 1
  • 10
  • This almost works. The problem is that `Lightness` does not lay on the canvas as `X` coordinate of the cursors. Because its values are: top left: 100%, top right 50%, bottom left: 0 bottom right: 0. – vulp Jan 12 '19 at 17:02
  • Okay, I managed to fix the problem by replacing HSL with HSV. – vulp Jan 12 '19 at 18:34