更改HTML5画布中的笔触颜色

Question

I'm new to HTML5 canvas, and I was playing with this example

Then I wanted to change the color of the stroke when I click on a color selector

$("button").click(function()
{
    console.log("click");
    stroke_color = "#0000FF";
});

What happens is that if a make a click on the canvas I see the new color, but if I start to move the mouse to make a line, then the color of the stroke is the one I defined first.

How can I change the color dynamically?

Here's a link to the fiddle (althought I didn't make it work)

HTML

<button>
change color!
</button>
<div id="main">
  <canvas id="canvas"></canvas>
</div>

JS

  var stroke_color = "#FF0000";

  $("button").click(function()
  {
    console.log("click");
    stroke_color = "#0000FF";
  });

    var canvas = document.querySelector('#canvas');
    var ctx = canvas.getContext('2d');

    var sketch = document.querySelector('#main');
    var sketch_style = getComputedStyle(sketch);
    canvas.width = parseInt(sketch_style.getPropertyValue('width'));
    canvas.height = parseInt(sketch_style.getPropertyValue('height'));


    // Creating a tmp canvas
    var tmp_canvas = document.createElement('canvas');
    var tmp_ctx = tmp_canvas.getContext('2d');
    tmp_canvas.id = 'tmp_canvas';
    tmp_canvas.width = canvas.width;
    tmp_canvas.height = canvas.height;

    sketch.appendChild(tmp_canvas);

    var mouse = {x: 0, y: 0};
    var last_mouse = {x: 0, y: 0};

    // Pencil Points
    var ppts = [];

    /* Mouse Capturing Work */
    tmp_canvas.addEventListener('mousemove', function(e) {
        mouse.x = typeof e.offsetX !== 'undefined' ? e.offsetX : e.layerX;
        mouse.y = typeof e.offsetY !== 'undefined' ? e.offsetY : e.layerY;
    }, false);


    /* Drawing on Paint App */
    tmp_ctx.lineWidth = 5;
    tmp_ctx.lineJoin = 'round';
    tmp_ctx.lineCap = 'round';
    tmp_ctx.strokeStyle = stroke_color;
    tmp_ctx.fillStyle = stroke_color;

    tmp_canvas.addEventListener('mousedown', function(e) {
        tmp_canvas.addEventListener('mousemove', onPaint, false);

        mouse.x = typeof e.offsetX !== 'undefined' ? e.offsetX : e.layerX;
        mouse.y = typeof e.offsetY !== 'undefined' ? e.offsetY : e.layerY;

        ppts.push({x: mouse.x, y: mouse.y});

        onPaint();
    }, false);

    tmp_canvas.addEventListener('mouseup', function() {
        tmp_canvas.removeEventListener('mousemove', onPaint, false);

        // Writing down to real canvas now
        ctx.drawImage(tmp_canvas, 0, 0);
        // Clearing tmp canvas
        tmp_ctx.clearRect(0, 0, tmp_canvas.width, tmp_canvas.height);

        // Emptying up Pencil Points
        ppts = [];
    }, false);

    var onPaint = function() {

        // Saving all the points in an array
        ppts.push({x: mouse.x, y: mouse.y});

        if (ppts.length < 3) {
            var b = ppts[0];
            tmp_ctx.beginPath();
            //ctx.moveTo(b.x, b.y);
            //ctx.lineTo(b.x+50, b.y+50);
            tmp_ctx.arc(b.x, b.y, tmp_ctx.lineWidth / 2, 0, Math.PI * 2, !0);
            tmp_ctx.fill();
            tmp_ctx.closePath();

            return;
        }

        // Tmp canvas is always cleared up before drawing.
        tmp_ctx.clearRect(0, 0, tmp_canvas.width, tmp_canvas.height);

        tmp_ctx.beginPath();
        tmp_ctx.moveTo(ppts[0].x, ppts[0].y);

        for (var i = 1; i < ppts.length - 2; i++) {
            var c = (ppts[i].x + ppts[i + 1].x) / 2;
            var d = (ppts[i].y + ppts[i + 1].y) / 2;

            tmp_ctx.quadraticCurveTo(ppts[i].x, ppts[i].y, c, d);
        }

        // For the last 2 points
        tmp_ctx.quadraticCurveTo(
            ppts[i].x,
            ppts[i].y,
            ppts[i + 1].x,
            ppts[i + 1].y
        );
        tmp_ctx.stroke();

    };

Answer 1

Setting the stroke style changes the color of everything you draw afterwards.

However, in your application you are storing all coordinates in an array and when the user makes a change you delete the image and redraw all those stored points.

I would recommend you to store the current color together with the coordinates when you add them.

ppts.push({x: mouse.x, y: mouse.y, color:stroke_color});

Then in the for-loop in your onPaint function set tmp_ctx.strokeStyle to the color stored for that point before you draw the line:

    for (var i = 1; i < ppts.length - 2; i++) {
        var c = (ppts[i].x + ppts[i + 1].x) / 2;
        var d = (ppts[i].y + ppts[i + 1].y) / 2;

        tmp_ctx.strokeStyle = ppts[i].color;
        tmp_ctx.quadraticCurveTo(ppts[i].x, ppts[i].y, c, d);
    }