canvasを用いて画像の色調補正がしたいです。

Question

photoshopで言うところの色調補正のような機能を今後作成する
サイトに取り入れたくて参考になりそうなサイトを探っていましたら
良いのが見つかりまして、そこでの検証データを基にコードを書いて
みようと試みましたが、一部だけ不可解な点がございましてその部分
だけ教えていただけると幸いにございます。
該当の箇所なのですが、javascriptファイル内のvar changeBrightnessの
二行目に位置するvar diff = brightnessBar.value - cBrigtness;といった
式がございまして、何故同じもの同士で引算してるのかが気になるのです。
リンク内容

コード <div class="main">
  <canvas id="myCanvas" width="493" height="215"></canvas>
</div>

<ul class="control">
  <li>
    <div><input id="brightnessBar" type="range" min="0" max="255" value="125"></div>
  </li>
</ul>

コード 
var canvas  = document.querySelector("#myCanvas");
var context = canvas.getContext("2d");
var width   = canvas.width;
var height  = canvas.height;
var image   = new Image();
image.src = "/labo/html5/canvas/images/001.jpg";
image.onload = function(){initCanvas};
var brightnessBar = document.querySelector("#brightnessBar");
var cBrigtness = brightnessBar.value;

// initialize canvas.
var initCanvas = function() {
     context.drawImage(image, 0, 0);
     brightnessBar.value = 125;
}
var changeBrightness = function() {
     var diff = brightnessBar.value - cBrigtness;
     if (diff == 0) {
          return;
     }
     cBrigtness = brightnessBar.value;

     var pixels = context.getImageData(0, 0, width, height);
     var d = pixels.data;
     for (var i = 0; i < d.length; i+=4) {
          if (i === 0) {
               console.log("r,g,b,a = " + d[i] + "," + d[i+1] + "," + d[i+2] + "," + d[i+3]);
          }
          d[i]   += diff;  // r
          d[i+1] += diff;  // g
          d[i+2] += diff;  // b
     }
     context.putImageData(pixels, 0, 0);
}
window.addEventListener("load", function() {
     initCanvas();
     brightnessBar.onchange = changeBrightness;
     document.querySelector("#reset").onclick = initCanvas;
}, false);

Answer 1

上の方に書いてある

var cBrigtness = brightnessBar.value;

を誤解されているのではないかと思います。これはJavaScript読み込み時に一度だけ実行され、cBrightnessにbrightnessBar.value（=125）を代入します。初期値ですね。この125はHTMLの

<input id="brightnessBar" type="range" min="0" max="255" value="125">

由来です。

今、cBrightness = 125, brightnessBar.value = 125です。

スライダーを動かすと（例えばvalueが200になるようにする）、cBrightness = 125, brightnessBar.value = 200となってchangeBrightnessが起動します。（なぜならJSの下の方でbrightnessBar.onchange = changeBrightness;と書いているから）

そうすると

var diff = brightnessBar.value - cBrigtness; /* diff = 200 - 125 */
if (diff == 0) {
     return;
}//スライダーが動いていなければ何もしないで終了
cBrigtness = brightnessBar.value; //次スライダーが動いた時のために今の値を保存

となります。brightnessBar.value と cBrigtness は同じもの同士ではないのです。

追記

冒頭に書いたcBrightnessの初期化についてですが、brightnessBar.value`（=125）の由来は

image.onload = function(){initCanvas};

でinitCanvasを呼び出している為、というのが正確だと思います。本筋ではないですが、一応。

Comments

[dream]

お忙しい中、回答ありがとうございます！
それぞれのbrightnessは別物なのですね。
つまりは、二つを引いた値がそのままrgb値に代入される
という感じですか？

[ohys]

いえ、違います。
d[i] += diff; d[i+1] += diff; d[i+2] += diff;
とある通り、操作前後のスライダー値の差分を加えています

差分の値をそのまま代入してしまったら全ピクセルrbg値の等しい単色画像になってしまいますよ…?

[dream]

折角教えて頂いているのに申し訳ないのですが、ちょっとイメージしづらくて。
スライダーが200の場合は、200-125=75で結果はどのようになりますか？
重ね重ねすみません。

[ohys]

全ピクセルのRGB値がそれぞれ75増えます。

ご自分で貼ったリンクのページをもう一回よく読むと良いかと思います

[dream]

わかりました。

[dream]

改めて読み返してみましたら、全て理解できました。
貴重な時間を割いて下さり本当にありがとうございました！