HTML5 Game - Invert Image Color

  1. HOME
  2. HTML5 Game
  3. Canvas
  4. Image Data

Description

Invert Image Color

Demo

ResultView the demo in separate window 

<!doctype html>  
    <html>  
     <head>  
      <meta charset="utf-8">  
      <title>Invert Color</title>  
      <style>canvas{border:1px solid red;}</style>  
     </head>  
     <body>  
      <canvas id="canvas" width="400" height="400"></canvas>  
      <script>  
      window.onload = function () {  
    let canvas = document.getElementById('canvas'),  
        context = canvas.getContext('2d');  
  
    //draw some red, green, and blue stripes  
    for (let i = 0; i < canvas.width; i += 10) {  
      for (let j = 0; j < canvas.height; j += 10) {  
        context.fillStyle = (i % 20 === 0) ? "#f00" : ((i % 30 === 0) ? "#0f0" : "#00f");  
        context.fillRect(i, j, 10, 10);  
      }  //ww  w.  j  a  v  a 2 s . c  o m
    }  
  
    let imagedata = context.getImageData(0, 0, canvas.width, canvas.height),  
        pixels = imagedata.data;  
  
    //pixel iteration  
    for (let 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>

Related Topic