Javascript drawing canvas

I have been making some progress in my journey to learning and mastering javascript. I am currently working on creating a drawing application using the tool box. I seem to develop a understanding of how the application works.

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.

Built-In or Third Party (Dead Simple)

Not sure if it’s supported by Internet Explorer though. You can read its value from a ‘change’ (onChange) event through

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.