HTML5 Game - Randomizing pixels on image

  1. HOME
  2. HTML5 Game
  3. Canvas
  4. Image Data

Description

Randomizing pixels on image

Demo

ResultView the demo in separate window 

<!DOCTYPE html>
                       /*  ww w.  j a  va 2  s  .co m*/
<html>
  <head>
    <title>Manipulating images and video</title>
    <meta charset="utf-8">
                           
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
                           
    <script type="text/javascript">
      $(document).ready(function() {  
        let canvas = $("#myCanvas");
        let context = canvas.get(0).getContext("2d");
                               
        // Randomising pixels
        let imageData = context.createImageData(200, 200);
        let pixels = imageData.data;
        let numPixels = imageData.width*imageData.height;
                               
        // Access and change pixel values
        for (let i = 0; i < numPixels; i++) {
          pixels[i*4] = Math.floor(Math.random()*255); // Red
          pixels[i*4+1] = Math.floor(Math.random()*255); // Green
          pixels[i*4+2] = Math.floor(Math.random()*255); // Blue
          pixels[i*4+3] = 255; // Alpha
        };
                               
        // Draw image data to the canvas
        context.putImageData(imageData, 0, 0);
                             
      });
    </script>
  </head>
                         
  <body>
    <canvas id="myCanvas" width="500" height="500">
      <!-- Insert fallback content here -->
    </canvas>
  </body>
</html>

Related Topic