topical media & game development

talk show tell print

#try-canvas.htm / htm



  <!DOCTYPE HTML>
  <html>
   <head>
    <title>Edge detection demo</title>
    <script>
     var image = new Image();
     function init() {
       image.onload = demo;
       image.src = "@walk.jpg";
     }
     function demo() {
       var canvas = document.getElementsByTagName('canvas')[0];
       var context = canvas.getContext('2d');
  
       // draw the image onto the canvas
       context.drawImage(image, 0, 0);
  
       // get the image data to manipulate
       var input = context.getImageData(0, 0, canvas.width, canvas.height);
  
       // get an empty slate to put the data into
       var output = context.createImageData(canvas.width, canvas.height);
  
       // alias some variables for convenience
       // notice that we are using input.width and input.height here
       // as they might not be the same as canvas.width and canvas.height
       // (in particular, they might be different on high-res displays)
       var w = input.width, h = input.height;
       var inputData = input.data;
       var outputData = output.data;
  
       // edge detection
       for (var y = 1; y < h-1; y += 1) {
         for (var x = 1; x < w-1; x += 1) {
           for (var c = 0; c < 3; c += 1) {
             var i = (y*w + x)*4 + c;
             outputData[i] = 127 + -inputData[i - w*4 - 4] -   inputData[i - w*4] - inputData[i - w*4 + 4] +
                                   -inputData[i - 4]       + 8*inputData[i]       - inputData[i + 4] +
                                   -inputData[i + w*4 - 4] -   inputData[i + w*4] - inputData[i + w*4 + 4];
           }
           outputData[(y*w + x)*4 + 3] = 255; // alpha
         }
       }
  
       // put the image data back after manipulation
       output.data = outputData; // AE
       context.putImageData(output, 0, 0);
     }
    </script>
   </head>
   <body onload="init()">
    <canvas width=800 height=600></canvas>
   </body>
  </html>
  


(C) Æliens 04/09/2009

You may not copy or print any of this material without explicit permission of the author or the publisher. In case of other copyright issues, contact the author.