However, I would like to design my color picker interface so that I can directly pick a color from the color picker interface and use it to paint and draw line into the canvas. How do you accomplish this.
I am following this online tutorial as a guideline for creating the app. enlight.nyc/projects/web-paint/
Not sure if it’s supported by Internet Explorer though. You can read its value from a ‘change’ (onChange) event through e.target.value.
Color Pallete (Simple)
Well, basically you need a set of buttons (or basically any element would suffice, like a set of divs or a table with various cells) that when clicked will set a global state variable containing the intended color.
A quick way to achieve this without having to create a separate event handler for each color, you could specify the colour as an HTML attribute (assuming you’re not using vue.js, react.js or angular) like data="#COLOR" for example and then make the event handler read it and store it in the variable.
I prepared a JSBin:
Your own picker (Advanced)
Now if you need a better color picker implemented by yourself, like the ones in painting apps, it’s a bit harder to build because you have to produce some sort of big grid with colors or a weird mix of gradients that produce a 2d version of the color picker you’re used to. You could also create another canvas to represent this 2d visualization of the 24-bit color space.