HTML Canvas Image Color Invert

Description

HTML Canvas Image Color Invert

View in separate window 

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Invert Color</title>
  </head>/*from  ww w  .  j av  a 2s. c  om*/
  <body>
    <canvas id="canvas" width="400" height="400"></canvas>
  
    <script>
    window.onload = function () {
      var canvas = document.getElementById('canvas'),
          context = canvas.getContext('2d');

      //draw some stripes: red, green, and blue
      for (var i = 0; i < canvas.width; i += 10) {
        for (var j = 0; j < canvas.height; j += 10) {
          context.fillStyle = (i % 20 === 0) ? "red" : ((i % 30 === 0) ? "pink" : "yellow");
          context.fillRect(i, j, 10, 10);
        }
      }

      var imagedata = context.getImageData(0, 0, canvas.width, canvas.height),
          pixels = imagedata.data;

      //pixel iteration
      for (var offset = 0, len = pixels.length; offset < len; offset += 4) {
        //invert each color component of the pixel: r,g,b,a (0-255)
        pixels[offset]     = 255 - pixels[offset];     //red to cyan
        pixels[offset + 1] = 255 - pixels[offset + 1]; //green to magenta
        pixels[offset + 2] = 255 - pixels[offset + 2]; //blue to yellow
        //pixels[offset + 4] is alpha (the fourth component)
      }
        
      context.putImageData(imagedata, 0, 0);
    };
    </script>
  </body>
</html>



PreviousNext

Related