When using canvas to adjust the luminosity of an image, everything works fine if the luminosity is only set once. However, when trying to reset the luminosity back to 0, the default image does not appear as expected.
Here is the code that calls the effect:
var mainEffect = new CanvasEffect(canvas[0]);
var thumbsEffect = new CanvasEffect(thumbs[0]);
luminositySlider.change(function() {
var intensity = luminositySlider.val();
mainEffect.apply("luminosity", intensity);
thumbsEffect.apply("luminosity", intensity);
});
This code uses the value from an HTML slider. The previous luminosity is stored in an array as shown below:
function CanvasEffect(canvas) {
var ctx = canvas.getContext("2d");
var WIDTH = canvas.width;
var HEIGHT = canvas.height;
var stack = [];
var imageData;
var data;
this.apply = function(effect, intensity) {
// Code for different effects including luminosity adjustment
};
Original Image:
Image with maximum luminosity:
Reset image to the original (luminosity 0):