fork download
copy 
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <link rel="stylesheet" type="text/css" href="https://d...content-available-to-author-only...a.org/en-US/docs/Template:CustomSampleCSS?raw=1" />
  5.     </head>
  6. <body>
  7.  
  8. <canvas id="canvas" width="300" height="227"></canvas>
  9.  
  10. <div>
  11.   <input id="grayscalebtn" value="Grayscale" type="button">
  12.   <input id="invertbtn" value="Invert" type="button">
  13. </div>
  14. <script type="text/javascript">
  15.                 var img = new Image();
  16. img.src = 'https://m...content-available-to-author-only...s.org/files/5397/rhino.jpg';
  17. img.onload = function() {
  18.   draw(this);
  19. };
  20.  
  21. function draw(img) {
  22.   var canvas = document.getElementById('canvas');
  23.   var ctx = canvas.getContext('2d');
  24.   ctx.drawImage(img, 0, 0);
  25.   img.style.display = 'none';
  26.   var imageData = ctx.getImageData(0,0,canvas.width, canvas.height);
  27.   var data = imageData.data;
  28.  
  29.   var invert = function() {
  30.     for (var i = 0; i < data.length; i += 4) {
  31.       data[i]     = 255 - data[i];     // red
  32.       data[i + 1] = 255 - data[i + 1]; // green
  33.       data[i + 2] = 255 - data[i + 2]; // blue
  34.     }
  35.     ctx.putImageData(imageData, 0, 0);
  36.   };
  37.  
  38.   var grayscale = function() {
  39.     for (var i = 0; i < data.length; i += 4) {
  40.       var avg = (data[i] + data[i +1] + data[i +2]) / 3;
  41.       data[i]     = avg; // red
  42.       data[i + 1] = avg; // green
  43.       data[i + 2] = avg; // blue
  44.     }
  45.     ctx.putImageData(imageData, 0, 0);
  46.   };
  47.  
  48.   var invertbtn = document.getElementById('invertbtn');
  49.   invertbtn.addEventListener('click', invert);
  50.   var grayscalebtn = document.getElementById('grayscalebtn');
  51.   grayscalebtn.addEventListener('click', grayscale);
  52. }
  53. </script>
  54.  
  55. </body>
  56. </html>
Runtime error #stdin #stdout #stderr 0.01s 29832KB
comments (?)
stdin
copy 
Standard input is empty
stdout
copy 
Standard output is empty
stderr
copy 
prog.js:1:0 SyntaxError: syntax error:
prog.js:1:0 <!DOCTYPE html>
prog.js:1:0 ^
https://ideone.com/AugsoB
language:
JavaScript (SMonkey 60.2.3)
created:
10 years ago
visibility:
public

Share or Embed source code

Discover > Sphere Engine API

The brand new service which powers Ideone!

Discover > IDE Widget

Widget for compiling and running the source code in a web browser!