Red Image Filter Tutorial

HTML5 Web Development

Image Filter Example Image Filter Source Code Introduction Load and Draw the Image Filter the Image More Filters Summary

Introduction

Learn to implement a red image filter effect with the HTML5 canvas element. Learn the steps to apply a red image filter to the canvas. This article also discusses options for other types of filters.

Obtain References

When the Web page loads obtain references to the canvas and 2D context with JavaScript.

function loadGame(){
canvas = document.getElementById(
 'cv'
);

context = canvas.getContext(
 '2d'
); 
   
loadImage();  
   
}

Load and Draw the Image

The following listing creates a new image reference, adds an anonymous onload event listener, then assigns the image's src property the path to an image file. Wait until the image loads to draw it to the canvas.

The onload event activates after the image loads. Attempting to draw the image, before it loads, triggers exceptions.

Number N_DIM equals 300 for this example. The image renders at 300 pixels wide by 300 pixels high. However in reality media queries load style sheets which resize the graphic. The image renders to the canvas at 300 x 300, but the canvas stretches for responsive Web design. Despite hard coded dimensions, the source code with style sheets provide responsive Web design which scales up or down based on screen dimensions and orientation.

function loadImage(){

img = new Image();

img.onload = function() {

context.drawImage(
 this,
 0,
 0,
 N_DIM,
 N_DIM
 );
};

img.src = 'butterfly-fish.jpg';

}

Filter the Image

After drawing an image to the canvas, call the 2D context's getImageData() method. In this example render all the image data from the upper left hand corner to the full width and height.

In the following listing parameters 0,0 represent the upper left hand corner of the canvas. Variables N_DIM,N_DIM represent the square width and height of the canvas. Method getImageData() returns an ImageData reference.

var aPixels = context.getImageData(
 0, 
 0, 
 N_DIM, 
 N_DIM
);

The data property of the ImageData object contains an array of integers representing red, green, blue, and alpha channels. Every four integers in the array describe one pixel on the canvas. The first integer represents the red channel. The second integer represents the green channel. The third integer represents the blue channel. The fourth integer represents the alpha channel. Channels are components of color. Combine red, green, blue, and alpha, for large a range of colors.

The following listing iterates over the array of color channels, zeroing out the green and blue components. The red and alpha data remain unchanged.

for(var i = 0; i < data.length; i += 4) {

// Green component
data[i + 1] = 0; 

// Blue component
data[i + 2] = 0;      
}

Last copy the image back to the canvas with the 2D context's putImageData() method. The following listing demonstrates copying the modified array of pixel data back to the canvas. Copy image data starting at the upper left hand corner of the canvas with coordinates (0,0). Pixel array aPixels, displays from the top left corner, until all data's rendered.

// Display new image
context.putImageData(
 aPixels, 
 0, 
 0
);

More Filters

You can program an astounding number of unique photo filters with techniques demonstrated in this tutorial. For example consider assigning zero to the green or red channels only. Consider switching color channels, using trigonometric functions, inverting colors, or applying alpha values. Contrast, blur, and many other amazing possibilities exist with modifiable pixel data.

For example the following few lines of code demonstrate transposing the green and blue pixels. See the Image Filter Example, with tutorial, for interactive modifications to the red, green, and blue channels.

for(var i = 0; i < data.length; i += 4) {

// Save green.
var green = data[i + 1];

// Assign blue
// to green component.
data[i + 1] = data[i + 2]; 

// Assign green
// to blue.
data[i + 2] = green;      
}

Summary

This tutorial explained how to implement a red image filter effect with the HTML5 canvas element. You learned the steps to apply a red image filter to the canvas. This tutorial also discussed options for other types of filters. See the Image Filter Example, with tutorial, for interactive modifications to the red, green, and blue channels.

See the Image Filter Source Code. See more HTML5 Color Palette Examples.

HTML5 Color Palette Examples

Ad for 3D Marketing Learn 3D Programming Ad
Copyright © 2015 Seven Thunder Software. All Rights Reserved.