javascript - グレースケール変換後に HTML5 キャンバスを通常に変更する方法

Question

次のコードを使用して、HTML5 キャンバス イメージをグレースケールに変換しています。ボタンをクリックして、グレースケールに変換した後、通常に戻す必要があります。どうやってやるの？

これが私のコードです。

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");

var imageData = context.getImageData(0, 0, canvas.width, canvas.height);
var data = imageData.data;
        for(var i = 0; i < data.length; i += 4) {
          var brightness = 0.34 * data[i] + 0.5 * data[i + 1] + 0.16 * data[i + 2];
          data[i] = brightness;
          // red
          data[i + 1] = brightness;
          // green
          data[i + 2] = brightness;
          // blue
          // i+3 is alpha (the fourth element)
        }
        context.putImageData(imageData, 0, 0);