Canvas Lighten Test

by Riffic

HTML

<canvas id="canvas" width="400" height="400" style="border: 1px solid black"></canvas>
<input type="text" id="amount" />
<button id="lighten" type="button">Lighten By</button>

JavaScript

var canvas = document.getElementById('canvas'),
    ctx = canvas.getContext('2d'),
    w = window.innerWidth,
    h = window.innerHeight;

ctx.fillStyle = '#ffffff';
ctx.fillRect(0, 0, w, h);

ctx.fillStyle = '#ff0000';
ctx.fillRect(10, 10, 100, 380);

var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
console.log( imageData );

//lighten( canvas, ctx, 0.5 );

$("#lighten").on('click', function(){
    var lightAmount = $("#amount").val();
    lighten( canvas, ctx, lightAmount );
})

function lighten(cvs, ctx, amount ){
            
            var change = parseFloat(amount) || 0,
                imgData = imageData.data;

            change = Math.max(-1, Math.min(1, change));
            //console.log("Lightening vars: ", change, "ImgData:", imgData );
            if ( imgData ) {

                var pixelCount = imageData.width * imageData.height * 4;
                var multiplier = change + 1;
                console.log("Changing light", pixelCount, multiplier, imgData );
                for( var i=0; i < pixelCount; i+= 4){
                    var originalR = imgData[i],
                        originalG = imgData[i+1],
                        originalB = imgData[i+2]
                    var r = originalR  ? Math.max(0, Math.min(255, imgData[i] * multiplier) ) : 255*amount;
                        g = originalG  ? Math.max(0, Math.min(255, imgData[i+1] * multiplier)): 255*amount,
                        b = originalB  ? Math.max(0, Math.min(255, imgData[i+2] * multiplier)): 255* amount;                    
                    imgData[i] = r;
                    imgData[i+1] = g;
                    imgData[i+2] = b;
                }

                ctx.putImageData( imageData, 0, 0 );
            }else{
                console.log("Image Data can't be edited");
            }
    }