x
<html><body><h1>HTML5 Canvas</h1><h2>The getImageData() Method</h2><img id="scream" src="img_the_scream.jpg" alt="The Scream" width="220" height="277"><canvas id="myCanvas" width="220" height="277" style="border:1px solid grey"></canvas><script>document.getElementById("scream").onload = function() { const c = document.getElementById("myCanvas"); const ctx = c.getContext("2d"); const img = document.getElementById("scream"); ctx.drawImage(img, 0, 0); const imgData = ctx.getImageData(0, 0, c.width, c.height); // invert colors for (let 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; } ctx.putImageData(imgData, 0, 0);};</script></body></html>