Canvas How to - Shift color data

Question

We would like to know how to shift color data.

Answer


<!--from w  ww .  ja  v  a2 s .c  o m-->
<!DOCTYPE html>
<html>
<head>
<script type='text/javascript'
  src='http://code.jquery.com/jquery-1.6.js'></script>
<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
    var ctx = $('#cv').get(0).getContext('2d');
    var g = ctx.createRadialGradient(200, 200, 0, 200, 200, 200);
    g.addColorStop(0, 'red');
    g.addColorStop(1, 'blue');
    ctx.fillStyle = g;
    ctx.fillRect(0, 0, 400, 400);
    var imgdata = ctx.getImageData(0, 0, 400, 400);
    var data = imgdata.data;
    for(var i = 0; i < data.length; i += 4) {
        data[i]     = nearest(data[i],     8);
        data[i + 1] = nearest(data[i + 1], 8);
        data[i + 2] = nearest(data[i  +2], 4);
    }
    ctx.putImageData(imgdata, 0, 0);
    function nearest(x, a) {
        return Math.floor(x / (255 / a)) * (255 / a);
    }
});//]]>  
</script>
</head>
<body>
  <canvas width="400" height="400" id="cv"></canvas>
</body>
</html>

The code above is rendered as follows: