Toggle navigation
☰
HTML
CSS
Scripting
Database
<!DOCTYPE html> <html> <body> <canvas id="pixelCanvas" width="300" height="225" style="border:1px solid #d3d3d3;"></canvas> <br> <button onclick="invertColors()">Invert Colors</button> <script> var canvas = document.getElementById("pixelCanvas"); var ctx = canvas.getContext("2d"); var img = new Image(); img.src = "/pix/byron_bay_300x225.jpg"; img.onload = function() { ctx.drawImage(img, 0, 0); }; function invertColors() { // Get all pixel data from the canvas var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height); var data = imageData.data; // Loop through pixels and invert colors for (var i = 0; i < data.length; i += 4) { data[i] = 255 - data[i]; // Red data[i + 1] = 255 - data[i + 1]; // Green data[i + 2] = 255 - data[i + 2]; // Blue // data[i+3] is Alpha, we'll leave it alone } // Put the modified data back onto the canvas ctx.putImageData(imageData, 0, 0); } </script> </body> </html>
