Skip to content
Related Articles

Related Articles

How to find an average color of an image using JavaScript ?

View Discussion
Improve Article
Save Article
  • Last Updated : 14 Feb, 2022
View Discussion
Improve Article
Save Article

The average color of an image can be found with JavaScript by drawing the image on a canvas element. The following steps have to be performed to get the average color of an image:

1. The image is first drawn on the canvas using the method context.drawImage() of the Canvas 2D API. This method takes in the image and the dimensions as parameters and draws it to the canvas.


context.drawImage( img, width, height );

2. The image data of the canvas is returned using the context.getImageData() method. It returns an ImageData object representing the pixel data for a specified section of the canvas. 


context.getImageData( x, y, width, height )

3. The average red, green and blue colors are then calculated with this image data by adding all the color values separately and finding the average value of that color.



<!DOCTYPE html>
<html lang="en">
        Find Average Color of
        image via JavaScript?
        #img {
            position: absolute;
            top: 20%;
            left: 25%;
        #block {
            position: absolute;
            background-color: white;
            height: 70px;
            width: 70px;
            left: 50%;
            top: 25%;
    <img height="100px" width="150px"
        id="img" src=
    <div id="block"></div>
    <!-- Function to find the average color -->
        function averageColor(imageElement) {
            // Create the canvas element
            var canvas
                = document.createElement('canvas'),
                // Get the 2D context of the canvas
                    = canvas.getContext &&
                imgData, width, height,
                // Define variables for storing
                // the individual red, blue and
                // green colors
                rgb = { r: 0, g: 0, b: 0 },
                // Define variable for the
                // total number of colors
                count = 0;
            // Set the height and width equal
            // to that of the canvas and the image
            height = canvas.height =
                imageElement.naturalHeight ||
                imageElement.offsetHeight ||
            width = canvas.width =
                imageElement.naturalWidth ||
                imageElement.offsetWidth ||
            // Draw the image to the canvas
            context.drawImage(imageElement, 0, 0);
            // Get the data of the image
            imgData = context.getImageData(
                        0, 0, width, height);
            // Get the length of image data object
            length =;
            for (var i = 0; i < length; i += 4) {
                // Sum all values of red colour
                rgb.r +=[i];
                // Sum all values of green colour
                rgb.g +=[i + 1];
                // Sum all values of blue colour
                rgb.b +=[i + 2];
                // Increment the total number of
                // values of rgb colours
            // Find the average of red
                = Math.floor(rgb.r / count);
            // Find the average of green
                = Math.floor(rgb.g / count);
            // Find the average of blue
                = Math.floor(rgb.b / count);
            return rgb;
        // Function to set the background
        // color of the second div as
        // calculated average color of image
        var rgb;
        setTimeout(() => {
            rgb = averageColor(
            // Select the element and set its
            // background color
                .style.backgroundColor =
                'rgb(' + rgb.r + ','
                + rgb.g + ','
                + rgb.b + ')';
        }, 500)



My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!