I am trying to invert the colors of the pixel image through canvas and display it on the screen via ctx.putImageData (dataImg, 0,0). The source is displayed, but the inverted version is not. I apologize for the stupid question in advance ((

<!-- begin snippet: js hide: false console: true babel: false --> 
 <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
Your browser does not support canvas

 var ctx = document.getElementById('canv').getContext('2d'); var pic = new Image(); pic.src = 'img/penguins.png'; pic.onload = function() { ctx.drawImage(pic,0,0) } var dataImg = ctx.getImageData(0,0,pic.width,pic.height); var pix = dataImg.data; for (i=0; i<pix.length; i+=4) { pix[i]=255- pix[i]; pix[i+1]=255-pix[i+1]; pix[i+2]=255-pix[i+2]; pix[i+3]=255; } ctx.putImageData(dataImg,500,0); 
 <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <canvas id='canv' width='600' height='600'>Вaш брaузeр нe поддeрживaeт canvas</canvas>

    1 answer 1

    The conversion code must be placed in a load event handler.

     <script> var ctx = document.getElementById('canv').getContext('2d'); var pic = new Image(); pic.src = 'img/penguins.png'; pic.onload = function() { ctx.drawImage(pic,0,0) var dataImg = ctx.getImageData(0,0,pic.width,pic.height); var pix = dataImg.data; for (i=0; i<pix.length; i+=4){ pix[i]=255- pix[i]; pix[i+1]=255-pix[i+1]; pix[i+2]=255-pix[i+2]; pix[i+3]=255; } ctx.putImageData(dataImg,500,0); } </script>