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

vter
  • 1,881
  • 1
  • 20
  • 38

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
  • 305
  • 1
  • 13
  • 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. – vter Jan 12 '19 at 17:02
  • Okay, I managed to fix the problem by replacing HSL with HSV. – vter Jan 12 '19 at 18:34