HTML5 canvas image manipulation.

We can do many things with an image drawn on canvas. We can invert the image colors, change the image to grayscale, remove red or green color from the image, etc. Every pixel of a digital image(bitmap or raster graphics like jpeg, png, gif, etc.) can be manipulated using the canvas api.

If you are looking for tutorials on some of the canvas image filters, you can visit the links below.

The code below shows how to load an image into canvas. Image is kept in the same folder as the html.

Download the attachment containing the source code for this tutorial at the end of this page.

<!DOCTYPE html>

<html>
<head>
<title>Image manipulation in html5 canvas | Qoncious.com</title>
</head>

<body>
<canvas id="canvas" width="800" height="600">
<p> No canvas support! </p>
</canvas>

window.onload = function()
{
    var canvas = document.getElementById('canvas');
    context = canvas.getContext('2d');

    var image = new Image();
    image.onload = function()
    {
        var imageX = canvas.width/2 - image.width/2;
        var imageY = canvas.height/2 - image.height/2;

        context.drawImage(image, imageX, imageY);

}
image.src = "bridge.jpg";
}
</script>

</body>
</html>

bridge image

The image will be loaded and drawn inside the the <canvas> element inside the <body> tag. The size of the canvas is determined by the “width” and the “height” attributes. While drawing the image inside the canvas, we should take care of the image dimensions. If the image is larger than the canvas, the parts of the image which fall outside the canvas will not be drawn.

The main JavaScript code is placed inside the the <script> tag. The “window.onload” event makes sure that the code is run after the the html document is loaded in the browser.

The steps inside the the function which is called on "window.onload" event:

1. Store a reference of the canvas element in the variable “canvas”.

2. Get the 2d rendering context of the canvas element. Using the context we can draw an image on canvas.

3. Create a new Image object, and write a function which is executed after the image has finished loading (image.onload event) to draw the loaded image.

4. The function contains the code to draw the image(in this example, the dimensions of the image are less than the dimensions of the canvas element, so that the image can be drawn completely inside the canvas).

5. The context.drawImage() function takes the image object as the first parameter. The second the the third parameters are the position from where the image is drawn). It takes more parameters, you can see the specification here.

Note: Observe that the “image.src” is set after declaring the the function for the “image.onload” event. It is done to make sure that the function is called after the image is loaded. Image starts loading as soon as the browser reads the image.src value.

HTML5 canvas pixel manipulation

Add the code shown below after the line “context.drawImage(image, imageX, imageY);”. This example code minimizes the value of red color in every pixel by multiplying it with 0.2. You can change the value of the multipliers for other colors and alpha.

var imageData = context.getImageData(imageX, imageY, image.width, image.height);
var dataArray = imageData.data;

for(var i = 0; i < dataArray.length; i += 4)
{
        var red = dataArray[i]; // 0 to 255
        var green = dataArray[i + 1]; // 0 to 255
        var blue = dataArray[i + 2]; // 0 to 255
        var alpha = dataArray[i + 3]; // 0 to 255

        dataArray[i] = 0.2 * red; // you can multiply the color and alpha values with a number between 0 and 1
        dataArray[i + 1] = 1 * green;
        dataArray[i + 2] = 1 * blue;
        dataArray[i + 3] = 1 * alpha;
}

context.putImageData(imageData, imageX, imageY);

bridge pixel manipulation

Note: This part of the code may not get executed in chrome browser if you are working locally in a computer. Chrome generates an error “Unable to get image data from canvas because the canvas has been tainted by cross-origin data. Uncaught Error: SecurityError: DOM Exception 18”.

It works in Firefox. If you want to test in chrome keep the html and the image files in a local server and access the html using “localhost/ ….”.

Using context.getImageData(), you can access the pixel level information contained in the image. The values of red, green, blue, and alpha(transparency) of a pixel are contained in an array which can be accessed using the data property of imageData.

var dataArray = imageData.data;

You can see the for loop in which every pixel's red, green, blue, and alpha values can be accessed and manipulated. After the for loop it is necessary to put the image data back using “context.putImageData(imageData, imageX, imageY);” to see the effect.

Attachment: