HTML5 Game - Canvas Image Data

Getting image data

We can access the image data.

WARNING

The code must run on a web server due to security constraints with the getImageData() method.

Demo

<!DOCTYPE HTML> 
<html>
    <head>
        <script>
            window.onload = function(){
                let canvas = document.getElementById("myCanvas");
                let context = canvas.getContext("2d");
                //from   w  w  w  .j a  v  a 2s.  co  m
                let imageObj = new Image();
                imageObj.onload = function(){
                    let sourceWidth = this.width;
                    let sourceHeight = this.height;
                    let destX = canvas.width / 2 - sourceWidth / 2;
                    let destY = canvas.height / 2 - sourceHeight / 2;
                    let sourceX = destX;
                    let sourceY = destY;
                    
                    context.drawImage(this, destX, destY);
                    
                    let imageData = context.getImageData(sourceX, sourceY, sourceWidth, sourceHeight);
                    let data = imageData.data;
          
                    let str = "width=" + imageData.width + ", height=" + imageData.height + ", data length=" + data.length;
                    context.font = "12pt Calibri";
                    context.fillText(str, 4, 14);
                };
                imageObj.src = "http://java2s.com/style/download.png";
            };
        </script>
    </head>
    <body>
        <canvas id="myCanvas" width="600" height="250" style="border:1px solid black;">
        </canvas>
    </body>
</html>

Note

The pixel manipulation updates the RGB values of pixels.

RGB represents the red, green, and blue components of a pixel's color.

Each component is an integer between 0 and 255, where 0 represents no color and 255 represents full color.

RGB values are often times represented as follows:

rgb(red,green,blue)

Here are some common color values represented with the RGB color model:

rgb(0,0,0) = black 
rgb(255,255,255) = white 
rgb(255,0,0) = red 
rgb(0,255,0) = green 
rgb(0,0,255) = blue 
rgb(255,255,0) = yellow 
rgb(255,0,255) = magenta 
rgb(0,255,255) = cyan

In addition to RGB, pixels can also have an alpha channel.

The alpha refers to its opacity.

An alpha channel of 0 is a fully transparent pixel, and an alpha channel of 255 is a fully opaque pixel.

RGBA color space refers to the RGB color model (RGB) plus the alpha channel (A).

Note 2

The code above draws an image, gets its image data, and then writes out the image data properties to the screen.

We can get the image data using the getImageData() method of the canvas context:

context.getImageData(sourceX,sourceY,sourceWidth,sourceHeight);

The getImageData() method works with the canvas context and not the image object.

In order to get image data, we must first draw an image onto the canvas and then use getImageData() method of the canvas context.

The ImageData object returned from getImageData() contains three properties:

width
height
data.