绘制后更改画布上的笔颜色

Question

I'm trying to change the color of the contents of the canvas after it is drawn. So if you start drawing a green circle, you could then decide later to make your previously drawn circle into a red a circle.

I'm using the signaturePad plugin here: https://github.com/szimek/signature_pad

I have some of the functionality built, but the pen color change doesn't change previously drawn elements. Here's a fiddle: http://jsfiddle.net/Z6g5Z/

Thanks for your help! The fiddle is prob. the best way to see the issue, but the JS and markup are below.

var canvas = $("#can")[0];
var signaturePad = new SignaturePad(canvas, {
    minWidth: 2,
    maxWidth: 5,
    penColor: "rgb(66, 133, 244)"
});

$('#clear').click(function(){
    signaturePad.clear();
});

$('.global-color li').click(function(){
    $('.on').removeClass('on');
    var $t = $(this);
    $t.addClass('on');
    var selectedColor = $t.data('color');
    signaturePad.penColor = hexToRgb(selectedColor);
});


<ul class="global-color">
    <li class="yellow-pick" data-color="#f8c90d">yellow</li>
    <li class="green-pick" data-color="#3dae49">green</li>
    <li class="orange-pick" data-color="#e87425">orange</li>
    <li class="blue-pick on" data-color="#009cc5">blue</li>
</ul>
<div>
    <input id="clear" type="button" value="clear" />
</div>
<canvas id="can" width="200px" height="200px"></canvas>

Answer 1

In your color change handler, have all canvas change its (non-transparent) pixels to the new color.
For this, most simple is to use globalComposite operation mode 'source-in', and fill over the canvas with the new color :

// set all pixels of the image to this color
function setCurrentColor(canvas, color) {
   var context = canvas.getContext('2d');
   context.save();
   context.fillStyle = color;
   context.globalCompositeOperation = 'source-in';
   context.fillRect(0,0,canvas.width, canvas.height);
   context.restore();
}

i updated your demo : http://jsfiddle.net/gamealchemist/Z6g5Z/3/

Answer 2

You can by changing composite mode and fill in the color you want on the existing content.

With a library like this you have no guarantee of the inner workings of it so it may work today and may not work tomorrow - if the author decides to change the way it behaves internally.

So with that disclaimer you can use the following code to change the color of the existing drawing - this works in general with all canvas drawings and changes non-transparent pixels to what you draw on top:

function changeColor() {
    ctx.save();
    ctx.globalCompositeOperation = 'source-atop';
    ctx.fillStyle = selectedColor;
    ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
    ctx.restore();
}

However, since we are going to tap into the library there are at least one other limitation here. The library seem to use a second canvas on top where it registers the mouse. When pen is up it transfer that drawing to the main canvas. The drawback with this, for us, is that the pen change won't happen until we draw something new; we can't change the pen color visually just by using the above function - for that you would have to patch the library to add for example a method which did all the steps needed internally.

But we do get close by adding the following setting:

var signaturePad = new SignaturePad(canvas, {
    minWidth: 2,
    maxWidth: 5,
    penColor: "rgb(66, 133, 244)",
    onBegin: changeColor             /// add callback here
});

Live demo here

Hope this helps!