How to use a color picker for the canvas stroke color?

Question

In my basic canvas painting tool I want the user to be able to change the color of the stroke by using a color picker. So I want the ctx.strokeStyle to change to whatever color the user picks on the color picker. I've managed to add the color picker to the canvas by using the input type="color" but I'm wondering how I can make the color of the stroke/brush in the canvas to change according to the color picked in the color picker.

So this is my canvas at the moment:

And I want the user to change the stroke color by using this:

Answer 1

Based on the picture you posted, looks like you want a solution like markE posted in his answer. Although, in the text you mention type="color". If you want to use this input you can check this jsfiddle working. In this second case, just remember a lot of browser do not support it yet. Click here if you want to see a list of browser that support it.

Below I will try to detail what changes I did to your jsfiddle.

Firstly, you need to set a callback to the color input. This mean when the value of the input changes, it calls the method change. The function change is getting the value of the input and set in a global variable called color.

var color = "rgb(255,0,0)";
function change(e){
    color = this.value;
}
document.getElementById("color").onchange = change;

The other change was inside your draw function. Before the draw it is getting the value in the variable color. This way, the next time you change the color it will update the color used in the stroke.

ctx.strokeStyle = color;

With those changes, if in the future you decide to use another tool to get the color (for example, you can check the browser to see if it support the input="color" and use a different color picker in this case), you just need to set the new color in the variable color.

Answer 2

Here's a simple example of a color picker on a "tools" canvas used to set the current color (fill/stroke) on the drawing canvas:

Javascript paint Canvas, need help re-locating buttons?

For your "color wheel" picker, you would paint your wheel on the tools canvas and then use context.getImageData to grab the pixel color data under the mouse cursor.

var imgData=ctx.getImageData(mouseX,mouseY,1,1);

var data=imgData.data;

return("rgba("+data[0]+","+data[1]+","+data[2]+","+data[3]+")");

After the user picks their color on the tools canvas, you can use context.strokeStyle and context.fillStyle to make those colors active on the drawing canvas.

Answer 3

All you need to do is get the value of the color input and set the strokeStyle to that.

Live Demo

var points=new Array(),
    colorInput = document.getElementById("color");

        function start(e){
          var mouseX = e.pageX - canvas.offsetLeft;
          var mouseY = e.pageY - canvas.offsetTop;
          paint = true;
          ctx.beginPath();
          ctx.moveTo(mouseX,mouseY);
          points[points.length]=[mouseX,mouseY];
        };

        function draw(e){

          if(paint){
             var mouseX = e.pageX - canvas.offsetLeft;
             var mouseY = e.pageY - canvas.offsetTop; 
             ctx.lineTo(mouseX,mouseY);
             ctx.stroke();  

             // set the value to the color input
             ctx.strokeStyle = colorInput.value;

             ctx.lineJoin = ctx.lineCap = 'round';

             points[points.length]=[mouseX,mouseY];
          }

        }
        function stop(e){
          paint=false;
         var s=JSON.stringify(points);
            localStorage['lines']=s;
        }  



        var paint=false;
        var canvas = document.getElementById('myCanvas');
        var ctx=canvas.getContext("2d");
        canvas.addEventListener('mousedown',start);
        canvas.addEventListener('mousemove',draw);
        canvas.addEventListener('mouseup',stop);