admin管理员组

文章数量:1425675

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:

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:

• javascript
• css
• html
• canvas

Share Improve this question Follow edited Dec 10, 2013 at 21:21 brasofilo 26.1k1515 gold badges9494 silver badges186186 bronze badges asked Dec 10, 2013 at 21:00 user3088233user3088233 5111 gold badge22 silver badges44 bronze badges 7

• Why cant you get its value on the event onchange? Here is an example on jsfiddle that I found here. BTW, currently there are some browsers that does not support type=color. For a list check this link – wendelbsilva Commented Dec 10, 2013 at 21:10
• 1 +1+ for having the tab How to Ask open in the browser :) – brasofilo Commented Dec 10, 2013 at 21:23
• @wendelbsilva Thanks, I will try having a crack at that... – user3088233 Commented Dec 10, 2013 at 21:48
• Here is my code jsfiddle/KQHMA/2 -- So I want somehow for the stroke color to be changed to whatever color the user picks using the color picker. – user3088233 Commented Dec 10, 2013 at 21:48
• @user3088233 http://jsfiddle/wjAdP/. You just need to get the color on the event onchange and set it to the strokeStyle. From your code I added the call back change. In this function it set the color value to the variable color. And in the draw method, it set the strokeStyle. – wendelbsilva Commented Dec 10, 2013 at 21:53

 |  Show 2 more ments

3 Answers 3

Sorted by: Reset to default 3

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.

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.

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);

本文标签： javascriptHow to use a color picker for the canvas stroke colorStack Overflow