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. This tutorial explains 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.

function loadImage(){

img = new Image();

img.onload = function() {

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

img.src = 'censer.jpg';

}
	

Filter the Image

After drawing an image to the canvas call the 2D context's getImageData() method. In this example get all of 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 red. The second integer represents green. The third integer represents blue. The fourth integer represents the alpha value.

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. The data is copied starting at the upper left hand corner of the canvas at coordinates (0,0). The second and third parameters are the X and Y coordinates on the canvas to place the modified data.

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

More Filters

The variety of image filters you can program is probably astounding. 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 unique possibilities exist with modifiable pixel data.

For example the following few lines of code demonstrate transposing the green and blue pixels.

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. This article demonstrated 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 Source Code. See more HTML5 Color Palette Examples.

HTML5 Color Palette Examples

Copyright © 2015 Seven Thunder Software. All Rights Reserved.
Sprite Sheet Animation