Change Color Depth of Html5 Canvas Element - Javascript Canvas

Javascript examples for Canvas:Example

  1. HOME
  2. Javascript
  3. Canvas
  4. Example

Description

Change Color Depth of Html5 Canvas Element

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://code.jquery.com/jquery-1.6.js"></script> 
      <script type="text/javascript">
    $(window).load(function(){//from  w  w  w.ja v  a2 s .  c  o m
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>

Related Tutorials