Sunday, 18 January 2015

How To Change the Color Of An Image Layer Using JavaScript

Images form an indispensable part of all websites across all domains. Thus, the tonality and color of the images go a long way in determining how well synced it is with the brand message. Adding to that, the color also adds to the visual appeal of the website.

Photoshop is the most popular image editing software of all. It surely can produce some remarkable manipulations but the influx of new technologies has meant that we have at our behest even better and more flexible image editing tools. Canvas is a fine example in case.

The canvas of Canvas

Canvas is emerging as a widely sought-after tool for manipulating images in terms of their pixels, colors and so on. And it surely comes across as an apt replacement for Photoshop.

Canvas is used by adding the <canvas> tag in our HTML code whenever we wish to jazz up our designs but it has to be accompanied with a script that is mean to shape up the graphics. Let's take a look at how you can use Canvas for performing edits on images:

A Basic HTML

Here is a standard HTML that comes into play for integrating a canvas element.

Adding a canvas element to the HTML code along with some JavaScript really fuels your code for great results.

Now, pixels can be doctored with just about anything we are drawing on a canvas, but we will be presenting a tutorial wherein we are using image files. One reason for doing so is to get you accustomed to the procedure that goes in while putting images on a canvas, and the other more important reason is that knowing how to edit images proves to be a very important piece of knowledge and technique to have in your kitty.

But before we get on to creating a full fledged code that helps us change the color of any image layer using Canvas, let's take a look at some of the methods we will use:

putImageData(): Supported by all the major browsers, the putImageData() is used when you want to fetch the image data from an imageData object and put it on the canvas. “ImgData” represents the ImgData object that has to be placed using this method.

The method can be used like:

GetImageData(): On the canvas, there is a part of it for which we need the pixel data. The GetImageData() method method returns an ImageObjectData that gives us the values for that pixel data.

The RGBA values define every pixel in ImageData Object:
  • R represents the color red (from 0-255)
  • G represents the color green (from 0-255)
  • B represents the  color blue (from 0-255)
  • A represents the alpha channel (from 0-255; 0 signifies transparency and 255 signifies full visibility)
drawImage(): As the name suggest, this method does that actual work of drawing an image on the canvas. It can also be used to perform certain alterations on an image.

The method can be used like:

How it All Works Out

Now, before you present the code to you, there are certain basics to understand here. When we are loading an image onto the canvas, there are more than one aspects to it. To begin with, you have to load the image into an HTML image element. Now whether you do so using HTML or create a DOM within JS depends entirely on you.

If you are creating a new DOM, you first have to assign the same to a variable that can then be made use of for loading the image once the src attribute is rightly routed.

Following this, you need to keep a close eye on the load event. The moment the image finishes loading, the load event will trigger into action. Upon the successful loading of the image, it becomes an easier exercise to put the same on the canvas.

The image variable that has been created in the previous step has to be directed to the drawImage method:

There are further iterations to the drawImage method  based on the different arguments it takes as input. As and when you need to resize the images, or for that matter, make any other edits you can do so by making a few tweaks.

Changing the Color of Image Layer

Now, let's jump into the code for manipulating the image layer color using Canvas.

Here is the complete code for the same:

Wrapping Up

Manipulating images in canvas goes beyond the above. We will keep on exploring what else you can do with Canvas. Watch the space.

About the Author

Edward Jones has a total of 4 years of experience in Wordpress Development. Currently, he is working as a dedicated wordpress web developer with OSSMedia Ltd- A leading CMS Outsourcing Company. You can contact him for meeting your Wordpress Web Development requirements within the shortest time duration.


  1. Nice post. I am really happy to visit your blog. This is very useful post.Thanks for sharing.

    photo editing services