单击链接时画布变量未更新

Question

See link: http://jndgn.com/colortheory/bezold.html

When clicking the 'Bigger Stripes' link in the nav I'm attempting to simply update the number of colored stripes in the canvas below it. The variable 'stripeNum' is set at 100 and when clicked should change to 20 via:

$(function(){
  $("#stripes").on("click",function(e){
    e.preventDefault();

    if(stripeNum == 100) {
        stripeNum = 20;
    } else {
        stripeNum = 100;
    }       
  });
})

...but when clicked, no action occurs. Do I somehow need to get the canvas to update itself? A bit of an HTML5 rookie here. Thanks in advance for any thoughts.

JSFiddle attached for easier code transparency.

Answer 1

You need to re-draw the canvas, as well as clearing it when you do this. You could simply make this adjustment and you'd be good:

First, wrap the canvas drawing you have in a function:

var contextFill = function() {
  context.clearRect(0, 0, canvas.width, canvas.height); // Clear on draw
  for (var i = 0; i < stripeNum + 1; i++) {
    context.beginPath();
    context.rect(0, i * canvas.height / stripeNum, canvas.width, canvas.height / (2 * stripeNum));
    context.fillStyle = randomColor;
    context.fill();
   }
}

Then, call contextFill() on document ready. The only addition I made to the above is context.clearRect , to clear the canvas.

Finally, also call it when your bigger stripes is called, eg:

...
if (stripeNum == 100) {
     stripeNum = 20;
} else {
     stripeNum = 100;
}    
contextFill();

If you want to update canvas on window resize, you can watch the resize event on the window. The downside is it can occur many times depending on how the user is resizing. You can use a library like lodash to ensure that the function only is called every N milliseconds. For example:

window.addEventListener('resize', _.debounce(function() {
     contextFill();
}, 500));