Use getImageData() to invert the color of every pixels of an image on the canvas - Javascript Canvas Reference

Javascript examples for Canvas Reference:getImageData

  1. HOME
  2. Javascript
  3. Canvas Reference
  4. getImageData

Description

Use getImageData() to invert the color of every pixels of an image on the canvas

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
<body>

<img id="scream" src="http://java2s.com/resources/c.png" alt="The Scream" width="220" height="277">
<canvas id="myCanvas" width="220" height="277" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>
document.getElementById("scream").onload = function() {
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    var img = document.getElementById("scream");
    ctx.drawImage(img, 0, 0);
    var imgData = ctx.getImageData(0, 0, c.width, c.height);
    // invert colors
    var i;
    for (i = 0; i < imgData.data.length; i += 4) {
        imgData.data[i] = 255 - imgData.data[i];
        imgData.data[i+1] = 255 - imgData.data[i+1];
        imgData.data[i+2] = 255 - imgData.data[i+2];
        imgData.data[i+3] = 255;
    }/*from  w  ww  .  j  ava2  s.  c  o m*/
    ctx.putImageData(imgData, 0, 0);
};
</script>

</body>
</html>

Related Tutorials